Membuat Tombol Download dan Demo di Blog

Kali ini gw mau share tentang membuat tombol Download dan Demo dalam postingan blog..tombol demo biasanya buat sobat yang posting template blog untuk preview template atau yang lainnya dan tombol Demo ini juga gw pake dalam postingan gw.

Langsung aja langkah-langkahnya simpel dan ga ribet :

1. Taruh kode dibawah ini diatas 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 }

2. Save template.

3. Untuk penggunaannya dalam postingan silahkan gunakan kode dibawah ini dengan menggunakan mode HTML.

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

• Demo
• Download

Nah..Semoga aja bermanfaat ya sob..

Share is beautifulàMembuat Tombol Download dan Demo di Blog                                                                                   Kamis, 20 November 2014

Membuat Tombol Download dan Demo di Blog 2014-11-20T03:40:00-08:00 Rating: 4.5 Diposkan Oleh: Unknown