Tombol Demo dan Download ini di buat dengan menggunakan CSS3, kelebihan dengan menggunakan CSS adalah blog kita tidak akan terasa berat saat loading dan tidak membutuhkan waktu yang cukup lama saat loading, tombol Demo dan Download ini tidak akan memberikan pengaruh banyak terhadap proses pembuatan blog.
Langsung aja tutorial Cara Membuat Tombol Demo dan Download Dengan CSS
berikut langkah-langkahnya :
1. Buka Blogger > masuk ke menu Template > pilih Edit HTML
2. Kemudian Copy Code CSS Berikut sebelum ]]></b:skin>
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
3. Simpan Template4. Kemudian buat artikel baru yang nantinya akan kita berikan tombol Demo & Download
5. Kemudian untuk pemanggilannya Copy Code berikut didalam postingan pada Tab HTML (bukan Compose)
<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="https://bhaktimedia.blogspot.co.id/" target="_blank">DEMO</a></li>
<li><a class="download" href="https://bhaktimedia.blogspot.co.id/" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
Catatan : Ganti Link
https://bhaktimedia.blogspot.co.id dengan link yang akan anda tuju.Tips : Untuk Warna Tombol bisa anda sesuaikan dengan keinginan anda.
Demikian tutorial Cara Membuat Tombol Demo dan Download Dengan CSS di Blog semoga bisa bermanfaat dan selamat mencoba.
"Happy Blogging"
Posting Komentar
Silahkan tinggalkan pesan jika Anda punya saran, kritik, atau pertanyaan seputar topik pembahasan diatas.
Catatan :
Komentar ini menggunakan moderasi, setiap komentar yang masuk akan diperiksa terlebih dahulu sebelum ditampilkan. Hanya komentar yang berkualitas dan relevan dengan topik di atas yang akan ditampilkan. Harap gunakan sebaik-baiknya.
Terima kasih telah menjadi Pengunjung yang bijak.