Cara Membuat Tombol Demo dan Download di Postingan Blog

Cara Membuat Tombol Demo dan Download di Postingan Blog - Fungsi Tombol Demo dan Postingan ini tidak lain adalah untuk menampilkan halaman demontrasi atau sebuah link download dari sebuah artikel yang kita tulis. Ada banyak cara untuk membuat tombol demo dan download ini, dari menggunakan gambar berlogo demo / download dan menyisipkan link di dalam gambar tersebut, dan ada yang menggunakan html.

Nah pada kesempatan kali ini saya akan berbagi tutorial bagaimana Cara Membuat Tombol Demo dan Download di Postingan Blog dengan menggunakan CSS3 dengan tampilan responsive dan efek ketika di sorot denga kursor mouse kita. Untuk yang penasaran dengan tampilan tombol demo dan download ini, bisa di lihat di bawah ini

DEMO

DOWNLOAD

Cara Membuat Tombol Demo dan Download di Blogger

Pertama, Login ke Blogger > Template > Edit HTML > Salin kode di bawah ini dan simpan di atas atau sebelum tag </style> atau ]]><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;}

Untuk menerapkan tombol demo dan download di postingan, salin dan simpan kode berikut di menu HTML postingan sobat

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Ganti YOUR-LINK-HERE dengan alamat Url Halaman Demo atau Link Download sobat.

Demikian tutorial Cara Membuat Tombol Demo dan Download di Postingan Blog ini semoga bermanfaat.