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

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).

Baca :  

• Cara Membuat Tabel yang Responsive pada Blog (Blogger)
• Cara Membuat Menu Navigasi Sitemap, About, Contact, Privacy Policy, Disclaimer pada Blog 100% Mudah. 

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.mastopal.com dengan alamat url yang dituju.



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

Hasilnya kurang lebih akan seperti dibawah ini :

• DEMO
• DOWNLOAD

Baca : Cara Membuat Subscribe Box yang Keren dan Menarik Terbaru 2017

Akhir Kata....

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.