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:&#39;f135&#39;;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:&#39;f019&#39;;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.

Belum ada Komentar untuk "Cara Membuat Tombol Demo dan Download di Postingan Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Daftar Situs Idn Poker Online di 18Dewa dan juga Poker Qiu atau di sebut Pokerqiu adalah situs ceme online terpercaya sama dengan 18Dewapoker dan situs poker pkv yang terkenal adalah Masterdomino88 atau nama lain Domino88 bersaing di dunia game online poker Bandar389 dan poker idn lainnya yang memberikan kemenangan tinggi yaitu Big Poker88 baru lagi agen poker bernama Rekan Poker yang punya banyak peluang besar.