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.

0 Response to "Cara Membuat Tombol Download menggunakan CSS di blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

advertisement