Cara Membuat Tombol Demo/Download yang Responsive pada Blog (Blogger)

ilustrasi tulisan tombol demo/download resonsive di blogger

Gilailmu.com - Membuat kotak bertuliskan Demo ataupun Download, biasanya seseorang lakukan pada blog mereka yang berkategori Download Game, Template, dll.

Dengan bertujuan, pengunjung ataupun pembaca pada blog mereka dapat mereview langsung apayang mereka inginkan (Kecuali game).

Cara membuatnya sendiri sangat mudah. Nah, berikut ini akan Saya tunjukan kepada Anda semua cara membuat tombol demo atau download yang responsive pada blog.

Cara Membuat Tombol Demo/Download yang Responsive pada Blog


Copy script dibawah ini, kemudian Anda pastekan diatas kode </style> pada Tema ==> Edit HTML. Anda juga bisa mengganti warna background tersebut sesuai dengan keinginan.


.button{list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.post-body ul.button{list-style:none;text-align:center;margin:0 auto;padding:10px;font-size:14px;clear:both;z-index:2;width:100%;border-radius:5px;border:1px solid rgba(0,0,0,0.05)}
.button li{display:inline-block;margin:10px 5px;padding:0;list-style:none;width:47.8%}
.post-body ul.button a.demo,.post-body ul.button a.download{position:relative;display:block;background:#ec2028;max-width:100%;padding:14px;color:#fff;font-weight:700;font-size:1.1rem;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border-radius:5px;overflow:hidden;transition:all .1s}
.post-body ul.button a.demo{background:#1abc9c}
.post-body ul.button a.demo:hover{background:#16a085;color:#fff}
.post-body ul.button a.download{background:#ef4d47;}
.post-body ul.button a.download:hover{background:#d7403a;color:#fff}

Copy script dibawah ini dan pastekan pada Entri baru ==> HTML. Janga lupa untuk menggati tulisan www.gilailmu.com dengan alamat url yang dituju.


<ul class="button"><li><a class="demo" href="http://www.gilailmu.com/" title="Demo" target="_blank">DEMO</a></li>
<li><a class="download" href="http://www.gilailmu.com/" title="Download" target="_blank">DOWNLOAD</a></li>
</ul> 

Hasilnya kurang lebih akan seperti dibawah ini :

Penutup ...


Mudah bukan untuk membuatnya. Sekian artikel Saya yang berjudul Cara Membuat Tombol Demo/Download yang Responsive pada Blog ini Saya sampaikan. Kalau Anda masih bingung, Anda dapat menyampaikannya pada kolom komentar yang tersedia. Terimakasih sudah berkunjung dan sampai jumpa di informasi selanjutnya.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel