Cara Membuat Tombol Download Dengan CSS Pada Blog

Download

Salam semua semoga sehat selalu, Untuk kali ini saya akan membagikan tutorial yang tidak asing lagi tapi sering di cari pembahasan tutorial kali ini yaitu bagaimana cara membuat tombol download pada blogger agar lebih menarik dan elegan di pandang mata,

fungsi utamanya tidak lain hanya untuk menambah ke rapian blog sobat dan memudahkan para pengunjung blog kita yang nantinya berdampak naiknya reting blog kita hehe menghayal sedikit dengan harapan pasti :)

Langsung deh kita parktekan pada blog sobat, tapi perlu di perhatikan tidak ada salahnya backup dulu template blog sobat, jadi kalo terjadi kesalahan yang tidak di inginkan tidak uring-uringan karna template rusak dan saya tidak bertanggung jawab loh hehe tapi siap membantu :)

Langkah pertama pastinya sobat login dulu ke blogger pada alamat www.blogger.com setelah login masuk ke menu Template dan klik cadangkan / pulihkan, Lebih jelas lihat gambar di bawah gan :)

Backup / Restore Template Blogger

Jangan Lupa Baca juga : Memasang Syntax Highlighter 3.0.83 Otomatis di Blogger

Oke setelah data template berhasil di amankan masuk ke tahap berikutnya yaitu edit template sobat, Masih pada menu yang sama cari tombol Edit HTML dan Kilik deh tombolnya, nanti sobat akan di bawa ke halaman yang penuh dengan code-code Lebih jelas lihat gambar :)

Edit HTML Blogger

Nah kan sekarang sudah tampak kumpulan code-code yang banyak banget dan rumit untuk pemula seperti saya, Masuk bagian Editing HTML hati-hati gan biar sekali edit sukses dan tersenyum indah :) heheh lebay, Kembali ke topik,
Sekarang sobat masukan kode dibawah ini tepat diatas tag kode ]]></b:skin>  Cari kode tersebut dengan menekan CTRL+F biar gampang :) hehehe, Sudah ketumu langsung deh masukan kode dibawah ini tepat diatasnya Tag kode : ]]></b:skin>

[

/*Button Download*/

.btndl br {display: none !important;}



.btndl {

margin: 0px auto;

width: 200px;

position: relative;

z-index: 1;

}

.btndl 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 );

}

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

}

.btndl:hover .bottom {

margin: -10px 0 0 10px;

}

.btndl:hover .top {

margin: -80px 0 0 10px;

line-height: 35px;

}

.btndl 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 );

}

.btndl:active .bottom {

margin: -20px 0 0 10px;

}

.btndl:active .top {

margin: -70px 0 0 10px;

}

/*End Button Download*/

]

Dan di bawah ini adalan kode penggunaanya gan

[
<div class="btndl">
<a href="https://www.blogger.com/www.okflash.net" target="_blank" title="Gratis">Download</a>  <br />
<div class="slide top">
OKFLASH.rar</div>
<div class="slide bottom">
Size : 500 TB</div>
</div>
<div style="text-align: center;">
</div>
</div>
]

Penulisan kode di atas pada mode HTML Gan pada saat posting Artikel yang mengharuskan menyertakan link Download.

Sudah dulu ya gan semoga kali ini tutorialnya sedikit membantu sobat-sobat blogger yang sedang berkarnya trimakasih wasalam semoga sehat sellalu :)