Cara membuat tombol Demo dan Download tampilan sederhana di Blog

HaiSob apa kabar? semoga semua dalam keadaan baik. Berikut ini saya akan bagikan tutorial cara membuat tombol download dan demo dengan tampilan yang sederhana saja. Biasanya membuat tombol download dan demo ini adalah ketika memposting artikel yang membutuhkan demo, misalnya ketika memposting mengenai template blog ataupun widget blog dan lain sebagainya.

Untuk kamu yang suka tampilan sederhana dan tidak ribet cara membuatnya kamu dapat mencoba tutorial ini untuk tampilannya kamu dapat melihat gambar di atas. Untuk tutorial berikut ini untuk kamu pengguna blog di Blogger.

Cara memasang CSS Tombol Download dan DEMO Sederhana ini di Blogger

Cara membuat tombol Demo dan Download tampilan sederhana di Blog

Demo dan Download


1. Di Blog Bloger 😩
2. Pilih menu Template ➔ Edit HTML
Cara membuat tombol Demo dan Download tampilan sederhana di Blog
Template - Edit HTML

2. Letakan kode dibawah ini diatas kode ]]></b:skin> atau dibawah <style>
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
3. Save template.

Cara menerapkannya pada postingan blog


4. Untuk penggunaannya dalam postingan silahkan gunakan kode dibawah ini dengan menggunakan mode HTML (sebelahnya Compose):
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.haisob.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.haisob.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
5. Ganti link dengan link Demo (kuning) dan link Dowload (hijau) dengan link blog yang kamu siapkan.
6. Selesai

Sekian mengenai cara membuat tombol download dan demo sederhana di Blog, semoga bermanfaat.