Cara Membuat Tombol Download Slide Top and Down di Blog

Slide Top and Down adalah sebuah sebuah tombol yang berbentuk kotak persegi panjang dengan sedikit penambahan efek shadow pada bagian sisi samping. Sedangkan pada bagian sisi lain yaitu sisi atas dan sisi bawah ada tombol yang tampil slide keatas dan kebawah jika disorot mouse, pada tombol slide ini ditampilkan nama file, jenis, type dan juga ukuran file yang kita bagikan.

Penempatan Slide Top and Down akan menambah cantik tampilan tombol download pada blog yang akan membuat rasa tertarik pasa visitor untuk meng-klik tombol yang yang dipasang pada entri posting blog dan tertarik untuk berkunjung kembali pada waktu lain.

Biar sesuai dengan apa yang diharapkan, maka perhatikan langkah demi langkah penempatan kode HTML, style atau CSS dibawah ini dengan seksama. Langkah yang harus dilakukan adalah:

Cara meletakkan CSS Download Slide Top and Down pada blog.

Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>.

/* skin-design buttons */

.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; }

Kemudian tekan tombol SAVE Template.

Cara memanggil CSS diatas pada entri posting blog.

Letakkan kode HTML dibawah ini sesuai keinginan dalam entri posting.

<div class="dlbutton">

<a href="XXXX" target="_blank">Download</a>

<div class="slide top">Size file anda</div>

<div class="slide bottom">Size file anda</div>

</div>

Pada teks box XXXX bisa diganti dengan link anda.
Pada teks box Download bisa diganti sesuai dengan selera anda.
Pada teks box Nama File anda bisa diganti sesuai dengan nama file anda.
Pada teks box Size file anda bisa diganti sesuai dengan ukuran file anda.
Jika semua selesai dan sesuai dengan pemaparan diatas maka langkah selanjutnya klik tombol PUBLISH dan lihat hasilnya.

Result

Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.