Pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Mudah Membuat Tombol Demo Dan Download Sederhana Pada Postingan Blogger. Tombol Demo dan Download merupakan suatu tombol yang beriksikan Link yang berfungsi menjadi perantara antara situs website/blog anda dengan situs website/blog yang berisikan media penyimpanan.
Fungsi dari pemasangan Tombol Demo dan Download pada situs website/blog ini sebenarnya mempunyai peran yang sangat penting yaitu mempermudah pengunjung untuk mengetahui Tombol Link yang berisikan Demo, Download, Buy, Transaksi atau sebagainya.
Karna fungsi dari Tombol Demo dan Download pada situs website/blog memiliki peran yang peting maka pemilik situs website/blog memberikan efek khusus atau warna pada Tombol Demo dan Download ini tujuannya untuk mempercantik blog dan mempermudah pengunjung situs website/blog anda dalam membedakan Tombol Link yang tersedia.
Di postingan sebelumnya saya pernah memberikan tutorial serupa, namun kali ini saya membuat tombol demo dan download dengan tampilan sederhana agar tidak memberatkan tampilan loading blog. Jadi bagi yang tertarik untuk memasang Tombol Demo dan Download pada situs blog kalian, ikuti tutorial di bawah ini.
Cara Mudah Membuat Tombol Demo Dan Download Sederhana Pada Postingan Blogger
1. Pertama buka Blog anda > Pilih menu Tema > kemudian pilih Edit HTML
2. Kemudian letakkan kode berikut sebelum ]]></b:skin> atau </style>
/* Tombol btn-demo dan btn-download CSS */
.goindotibutton{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}
.goindotibutton ul {margin:0;padding:0}
.goindotibutton li{display:inline;margin:5px;padding:0;list-style:none;}
.btn-demo,.btn-download{padding:12px 50px!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}
.btn-demo {background-color:#3498DB;}
.btn-download {background-color:#EB1943;}3. Kemudian Pilih Simpan Tema
4. Untuk menerapkan Kedua Tombol Demo dan Downoad di blog anda, pilih Entri Baru > pilih HTML > letakkan kode ini di dalamnya > kemudian Publikasikan
<div style="text-align: center;">
<ul class="goindotibutton">
<li><a class="btn-demo" href="LINK-ANDA" rel="nofollow noopener" target="_blank">demo</a></li>
<li><a class="btn-download" href="LINK-ANDA" rel="nofollow noopener" target="_blank">download</a></li>
</ul>
</div>Sedangkan Jika anda hanya ingin memasang Tombol Demo Saja tepat di tengah-tengahnya maka gunakanlah kode ini
<div style="text-align: center;">
<ul class="goindotibutton">
<li><a class="btn-demo" href="LINK-ANDA" rel="nofollow noopener" target="_blank">demo</a></li>
</ul>
</div>Sedangkan jika untuk Tombol Download Saja gunakan kode ini gunakan kode ini
<div style="text-align: center;">
<ul class="goindotibutton">
<li><a class="btn-download" href="LINK-ANDA" rel="nofollow noopener" target="_blank">download</a></li>
</ul>
</div>Keterangan:
| Kode | Keterangan |
|---|---|
| #3498DB | Kode warna untuk tombol Demo |
| #EB1943 | Kode warna untuk tombol Download |
| LINK-ANDA | Isi dengan Link url yang akan dituju |
| DEMO dan DOWNLOAD | Dapat diubah sesuka hati (misalnya: Lihat, Beli dan lain-lain) |
Cukup mudah bukan Cara Mudah Membuat Tombol Demo Dan Download Sederhana Pada Postingan Blogger. Bila kamu mengalami kesulitan dalam menerapkannya pada blog kalian silahkan tinggalkan pesan di kolom komentar. Semoga informasinya bermanfaat dan sampai jumpa.