Tuesday, January 16, 2018

Cara Membuat Tombol Alternative Download Pada Website Dan Blogger

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 :


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 :




Baca Juga Lainnya :



Bagaimana ?
Keren bukan Tombol Alternatifnya?
Selamat mencoba di website kalian yah,


Semoga dengan adanya artikel saya ini dapat membantu anda mempercantik website yang sedang kalian bangun.
Jangan lupa untuk Subscribe dan Share.
Sekian dan Terimakasih.



Kata Kunci Terkait :
  • Cara Membuat Tombol Download Alternatif
  • Cara Membuat Tombol Download Keren Alternatif
  • Tombol Download Alternatif Keren
  • Tombol Download Alternatif
  • Tombol Download Alternatif Website
  • Tombol Download Alternatif Blogger
  • Tombol Download Alternatif Blog
  • Gimana Cara Membuat Tombol Alternatif Download
  • Membuat Tombol Alternatif Download
  • Membuat Tombol Download Alternatif Website
  • Membuat Tombol Download Alternatif Keren
  • Tombol Download Alternatif Keren




PERLU DIKETAHUI


Iklan yang tampil pada halaman situs ini sepenuhnya sudah diatur oleh Pihak Google, kami hanya menyediakan tempat kosong khusus untuk iklan dari Google. Maka, apabila ada iklan yang dirasa kurang baik bagi anda sehingga tidak seharusnya ditampilkan, harap segera menginformasikan hal tersebut kepada kami dengan melalui Formulir Kontak yang ada di bagian bawah sendiri pada situs ini. Kemudian, kami akan segera menyampaikannya pada pihak Google terkait masalah tersebut.
Laporan dapat anda sertakan lampiran :
  • Nama Iklan
  • Alamat Screenshoot(Gambar) Iklan


Load Disqus Comments Hide Disqus Comments