Cara Membuat Tombol Download Button - Tombol Download Untuk Unduhan dan Demo Blog ini dirasa perlu guna memantafkan tampilan blog kita. Dengan tombol download keren membuat blog kita terlihat profesional. Itu hal yang kita abaikan karena alasan utamanya adalah kerapihan blog. Tampil Rapi, blog kita terkesan dibuat dengan tidak asal-asalan.
Bila kita hanya mengandalkan depault blogger maka tampilan Download atau link unduhan blog kita hanya akan tampil link teks saja. Fitur Download, Demo atau tombol lainnya yang perlu "didekorasi" memerlukan penambahan sedikit kode CSS untuk mendesain-nya. Jika memang anda memerlukan ini tak usah cemas karena kita akan membuat Tombol Download Untuk Unduhan dan Demo Blog secara lengkap dan tentunya keren.
Langkah membuat Tombol Download atau Demo dipostingan atau halaman Blog ini sangat mudah. Saya jamin anda tertarik untuk mengikuti langkah-langkah ini karena pembuatan tombol ini tak akan menguras keringat anda. Ya Gan, hanya sedikit penambahan kode style dan CSS pada postingan yang ada tombol download-nya tsb.
Cara Buat Tombol Download di Blogger sbb;
* Masuk Pengaturan Blogger.
* Klik Tema pilih Edit HTML.
* Cari kode ]]></b:skin>
*. Letakan kode dibawah ini tepat diatas kode ]]></b:skin>
Lalu langkah penambahan kode CSS pada postingan cukup dengan menambahkan kode berikut :
Untuk Demo Tombol Download Keren bisa anda lihat pada button demo dibawah ini:
Langkah membuat Tombol Download atau Demo dipostingan atau halaman Blog ini sangat mudah. Saya jamin anda tertarik untuk mengikuti langkah-langkah ini karena pembuatan tombol ini tak akan menguras keringat anda. Ya Gan, hanya sedikit penambahan kode style dan CSS pada postingan yang ada tombol download-nya tsb.
Cara Buat Tombol Download di Blogger sbb;
* Masuk Pengaturan Blogger.
* Klik Tema pilih Edit HTML.
* Cari kode ]]></b:skin>
*. Letakan kode dibawah ini tepat diatas kode ]]></b:skin>
/* Tombol Download */
#wrap{margin: 20px auto;text-align: center;}
#wrap br{display: none;}
.btn-slide, .btn-slide2{position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #009688;border: 2px solid #0099cc;margin: 10px;transition: .5s;}
.btn-slide2{border: 2px solid #0099cc;}
.btn-slide:hover{background-color: #fc0511;}
.btn-slide2:hover{background-color: #0366fc;}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2{left: 100%;margin-left: -45px;background-color: #fdfdfd;color: #0099cc;}
.btn-slide2:hover span.circle2{color: #efa666;}
.btn-slide:hover span.title, .btn-slide2:hover span.title2{left: 40px;opacity: 0;}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2{opacity: 1;left: 40px;}
.btn-slide span.circle, .btn-slide2 span.circle2{display: block;background-color: #05f70d;color: #fff;position: absolute;float: left;margin: 5px;line-height: 42px;height: 40px;width: 40px;top: 0;left: 0;transition: .5s;border-radius:50%;}
.btn-slide2 span.circle2{background-color: #f50511;}
.btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2{position: absolute;left:90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #fff;transition: .5s;}
.btn-slide2 span.title2,.btn-slide2 span.title-hover2{color: #fff;left:80px;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2{left:80px;opacity: 0;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2{color: #fff;}
Lalu langkah penambahan kode CSS pada postingan cukup dengan menambahkan kode berikut :
<div id="wrap">
<a class="btn-slide" href="https://www.rapiserui.com/" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<span class="circle2"><i class="fa fa-download"></i></span>
<a class="btn-slide2" href="https://www.rapiserui.com/2020/06/cinta-sejati-menurut-thomas-arya-satu.html" target="_blank"><span class="title2">Download</span>
<span class="title-hover2">Click here</span></a></div>
Untuk Demo Tombol Download Keren bisa anda lihat pada button demo dibawah ini:
Demo
Click here
Cara kedua tanpa tombol DEMO
<!-- Add icon library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<!-- Auto width -->
<button class="btn"><i class="fa fa-download"></i> Download</button>
<!-- Full width -->
<button class="btn" style="width: 100%;"><i class="fa fa-download"></i> Download</button><br />
Hasilnya seperti penampakan Tombol Download ini;
Contoh 2:
Cara Paling Sederhana membuat Tombol Download dengan Tombol Button;
<a download="Contoh Unduh Sebuah Gambar" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu4uQ2kIrzO40KyTGxaY7qThnrxYIr5osFb7qRgIp5IPMSgj5dnzdwwhCev3lDBltiSIElpY5Ky26dtFkK54sMnyeoOvvryURP8lHkEKWRFk8bsRLXSyGLODh8F0YGCWCOmEqLB_WG_PO_/s320/Krap.jpg"><button>Download</button></a>
Cara kedua tanpa tombol DEMO
<!-- Add icon library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<!-- Auto width -->
<button class="btn"><i class="fa fa-download"></i> Download</button>
<!-- Full width -->
<button class="btn" style="width: 100%;"><i class="fa fa-download"></i> Download</button><br />
Hasilnya seperti penampakan Tombol Download ini;
Contoh 2:
Cara Paling Sederhana membuat Tombol Download dengan Tombol Button;
<a download="Contoh Unduh Sebuah Gambar" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu4uQ2kIrzO40KyTGxaY7qThnrxYIr5osFb7qRgIp5IPMSgj5dnzdwwhCev3lDBltiSIElpY5Ky26dtFkK54sMnyeoOvvryURP8lHkEKWRFk8bsRLXSyGLODh8F0YGCWCOmEqLB_WG_PO_/s320/Krap.jpg"><button>Download</button></a>
