Cara Membuat Tombol Alternative Download Pada Website Dan Blogger

Tombol Alternative Download - Mungkin diantara kalian banyak yang mempunyai website atau blog dengan genre download? Karena pasalnya sekarang lagi ngetrennya download gaes. apabila kalian punya maka kalian harus mencoba teknik mempercantik tampilan tombol download sobat menjadi menarik. karena pengunjung pasti merasa betah apabila apa yang mereka lihat sungguh menarik. namun biasanya menarik membutuhkan banyak pengkodingan sehingga menjadikan lemot, nah disini kendala untuk ini tidak usah khawatir karena CSS code hanya sedikit dan sangat responsive bahkan tak ada bedanya dipasangi sama sebelum dipasangi dalam hal kecepatannya.

Baca Juga Selengkapnya :

Cara Membuat Tombol Download Aplikasi Android Yang Keren

Oke, langsung saja ke carany ya gaes.

Kalian harus login Blogger terlebih dahulu
Kemudian, Edit template kalian dan taruh code berikut tepat diatasnya " ]]></b:skin> "

Lalu pastekan code CSS berikut ini :

.button,input.button{position:relative;display:inline-block;margin-right:1em;margin-bottom:1.34em;padding:0.667em 2em;border-bottom:none;-webkit-border-radius:0.333em;-moz-border-radius:0.333em;border-radius:0.333em;background-color:rgba(84,87,102,1);color:#FFFFFF!important;text-decoration:none!important;text-transform:uppercase;font-size:0.778em!important;line-height:1.714em!important;cursor:pointer}
.button,input.button{-webkit-transition:background-color 0.3s linear,color 0.3s linear;-moz-transition:background-color 0.3s linear,color 0.3s linear;transition:background-color 0.3s linear,color 0.3s linear}
.button:hover,input.button:hover{border-bottom:none;background-color:rgba(84,87,102,0.9)}
.button:active,input.button:active{box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1)}
.button i{margin-right:0.667em;vertical-align:middle;line-height:1em!important}
.button.red,input.button.red{background-color:rgba(253,104,91,1)}
.button.red:hover,input.button.red:hover{background-color:rgba(253,104,91,0.9)}
.button.blue,input.button.blue{background-color:rgba(96,158,234,1)}
.button.blue:hover,input.button.blue:hover{background-color:rgba(96,158,234,0.9)}
.button.mint,input.button.mint{background-color:rgba(79,206,173,1)}
.button.mint:hover,input.button.mint:hover{background-color:rgba(79,206,173,0.9)}
.button.purple,input.button.purple{background-color:rgba(171,148,233,1)}
.button.purple:hover,input.button.purple:hover{background-color:rgba(171,148,233,0.9)}
.linktambahan{padding-bottom:20px;padding-top:20px;}
.alternatif{text-transform:uppercase;color:white;padding:3px;background:#6ab344;width:100%;font-family: 'Roboto',Segoe UI,Segoe,Arial,Verdana,sans-serif;text-align:center}

Apabila sudah kemudian kalian save,

Kemudian, buatlah artikel seperti biasanya. lalu tempatkan code berikut ini agar nantinya keluar tampilan Link Alternative Keren seperti yang ada pada pembahasan kali ini :

Code Script berikut lalu paste ke artikel dalam mode HTML :

<div class="sal-box cf addon-apps" style="margin: 5px 0;">
<div class="item cf">
<div class="alternatif">
<b>Link Alternatif</b></div>
<div class="linktambahan">
<center>
<a class="button purple" href="#" target="_blank"><i class="fa fa-cloud-download"></i> Google Drive</a>
<a class="button mint" href="#" target="_blank"><i class="fa fa-cloud-download"></i>  Media Fire</a>
<a class="button blue" href="#" target="_blank"><i class="fa fa-cloud-download"></i> Upfile Mobi</a>
<a class="button red" href="#" target="_blank"><i class="fa fa-cloud-download"></i>  Zippy Share</a>
</center>
</div>
<div class="addon-discover">
<span class="title-text xxsSz fwN text-link cl4 bdrB0"></span><a class="title-text xxsSz text-link cl4" href="http://jokamp-cyber-fighter.blogspot.com/"></a></div>
</div>
</div>

Apabila sudah maka silahkan kalian Publikasikan artikel kalian,

Jika sudah maka akan tampir seperti gambar dibawah ini :

Hasilnya :

Link Alternatif

Google Drive Media Fire Upfile Mobi Zippy Share