Cara Membuat Tombol Demo Dan Download Postingan blog

Selamat malam sob udah lama gak buka blog,hehehe :D

Untuk kali ini saya akan posting tentang cara membuat tombol demo dan download dalam postingan blog. Tombol menu ini biasa nya digunakan kalo mau ngeshare template  ataupun yang lainnya.

Contoh nya sebagai gambar berikut. :D

Langsung ke TKP gan :D:D:D:

1. Langkah awal buka blog
2. Pilih Tempate - Edit HTML
3. Copy kode dibawah ini dan letakan tepat di atas kode ]]></b:skin>

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

4. Simpan sob :)
5. Untuk penggunaannya gunakan kode HTML dibawah ini saat memposting.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="Link Demo" target="_blank">Demo</a></li>
<li><a class="download" href="Link Download" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

NB : Ganti Link Demo dan Link Download dengan Link Demo dan Link Download sobat

6. Selesai deh
7. Selamat mencoba, semoga bermanfaat :)

Share on Google Plus

About Dadan Pauzan

Kami merupakan salah satu komunitas yang hobi menulis artikel di blog, main game, ngoding, edit musik dan membuat video.