Membuat tombol Demo dan Download ala Kang Ismet
Thursday, November 13, 2014
Banyak sekali tutorial yang membahas Membuat tombol demo dan download akan tetapi Pada kesempatan kali ini saya akan membagikan yang versi Kang Ismet
Cara Membuat Tombol demo dan download ala kang ismet
1. Login dan masuk ke dashboard sobat
2. Masuk ke Template >> Edit HTML
3. Letakkan kode dibawah ini di atas ]]></b:skin>
4. Jika ingin menerapkan Taruh kode dibawah ini saat membuat postingan(gunakan mode HTML)/* -- Button --*/
.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 }
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://triznowibowo.blogspot.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://triznowibowo.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
Keterangan
Ganti http://triznowibowo.blogspot.com dengan url tujuan
code by : http://blog.kangismet.net/2013/04/membuat-tombol-demo-dan-download.html