Cara Membuat Tombol Download menggunakan CSS di blogger

Langsung saja langkah-langkah nya sebagai berikut :

• Masuk ke Blogger > Pilih menu Tema > Edit HTML.
• Cari code ]]></b:skin> lalu sisipkan kode CSS di bawah ini di atas code tersebut.

#download {list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:-webkit-inline-box;text-decoration:none!important;color:#FFF!important}

.btn ul {margin:0;padding:0}

.btn li{display:inline;margin:5px;padding:0;list-style:none;}

.googlep,.download{padding:12px 15px!important;color:#fff!important;font-weight:600;font-size:13px;font-family:Open Sans;text-align:center;border-radius:3px;border:0;transition:all .2s ease-out;margin-right:10px;}

.googlep {background-color:#2D9E3B;}

.download {background-color:#1A66BC;}

.googlep:hover {background-color:#35BA45; opacity:1;}

.download:hover {background-color:#2073D2;opacity:1;}

.googlep:before {content:&#39;\f04b&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

.download:before {content:&#39;\f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} 

.main h3 {  width: auto;margin-top: 10px;}}

• Simpan tema.
• Silahkan buat postingan dan sisipkan kode di bawah ini :

<div style="text-align: center;"><a class="download" href="link_download" target="_blank">Click to FREE Download</a></div>

• Ganti tulisan link_download yang berwarna merah di atas dengan link download anda.
• Publikasikan postingan anda.

Sebagai contoh hasilnya bisa dilihat di bawah ini :

DEMO

Terimakasih.

Share this post