Cara membuat Tombol Download di Postingan Blog

Untuk para Blogger terutama blog mereka yang menyediakan mengunduhan suatu file, Peran tombol download ini selain untuk mempercantik post juga akan mempermudahkan pengunjungnya untuk mendownload suatu file. 

Cara Membuat Tombol Download Keren

Pertama, Untuk mempastekan kode CSS didalam template blog Kalian harus  Login ke Blogger setelah itu masuk ke Tema kemudian klik Edit HTML 

Kedua, Jika sudah saatnya untuk memasukkan kode CSS, untuk pemasangan kode kali ini untuk memudahkan kalian mencari Tekan Tombol CRTL + F (untuk perangkat PC), cari kode ]]></b:skin> jika sudah ketemu, langkah selanjutnya adalah mempastekan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

.dlbutton br {display: none !important;}
.dlbutton {
margin: 0px auto;
width: 200px;
position: relative;
z-index: 1;
}
.dlbutton a {
color: white !important;
display: block;
width: 200px;
height: 50px;
background: #2DA5C6;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font: 17px/50px Helvetica, Verdana, sans-serif;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}
.dlbutton a, .slide {
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.slide {
position: absolute;
z-index: -1;
display: block;
margin: -50px 0 0 10px;
width: 180px;
height: 40px;
background: #444;
color: #fff;
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
.dlbutton:hover .bottom {
margin: -10px 0 0 10px;
}
.dlbutton:hover .top {
margin: -80px 0 0 10px;
line-height: 35px;
}
.dlbutton a:active {
background: #00b7ea;
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}
.dlbutton:active .bottom {
margin: -20px 0 0 10px;
}
.dlbutton:active .top {
margin: -70px 0 0 10px;
}

JIka sudah kalian pastekan kode diatas, Selanjutnya kalian tinggal klik Simpan untuk menyimpan kode yang tadi kalian sudah pastekan, Untuk pemasangan CSS sampai disini selesai, kita akan berlanjut untuk pemasangan kode HTML didalam postingan

Ketiga, Silahkan kalian masuk ke menu Edit di salah satu postigan yang ingin kalian beri Tombol Downloadnya, setelah masuk Buka Kolom HTML diatas kanan postingan blog (Ingat HTML bukan Compose), Sudah tahu? 

Keempat, Kita akan masuk ke pemasangan Kode HTML di blog, silahkan Copy Paste kode HTML dibawah ini (sesuai letak dimana tombol itu ingin kalian tempatkan)

<div class="dlbutton"><a href="Link" target="_blank">Download</a><div class="slide top">Nama_File.rar</div><div class="slide bottom">Size : 10 MB</div></div>

Note : Silahkan ganti Link diatas dengan Link tujuan yang ingin anda berikan ke dalam tombol Download, Ganti Name_File.rar dengan nama daripada File download itu, Ganti 10 MB dengan ukurang file tersebut,  Nah jika kalian ingin juga mengganti Nama yang terlihat dipostingan yaitu Download dengan keinginan hati kalian, silahkan Ganti Download dengan kata yang ingin anda ubah,