Skip to main content

follow us

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.

Disclaimer : Semua Konten yang kami bagikan semuanya adalah Gratis, dan kalian di ijinkan untuk mereshare ulang dg menyertakan link sumber dari Pehawe Dan kami tidak pernah meminta donasi atas apa yg kami bagikan. Trims

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar