Membuat Tombol Download dan Demo
 |
| Cara mendapatkaan Domain TLD Gratis 2015 |
Membuat Tombol Download dan Demo - ketemu lagi di RIZKY TEKNOLOGI, sudah lama admin tidak menulis artikel. OK langsung saja, banyak tutorial mengenai cara Membuat Tombol "Download" dan "Demo" yang beredar, tapi kali ini admin akan membagikan cara membuat tombol Download dan Demo Simple.
Biasanya tombol ini digunakan untuk berbagi template ataupun download file dan semacamnya.
berikut caranya
Tambahkan kode di bawah ini sebelum
]]></b:skin>/* -- Kang Ismet 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 } Klik SIMPAN
Untuk penggunaannya, buat kode seperti ini ketika membuat postingan (gunakan mode HTML)
<div style="text-align: center;"> <div style="text-align: center;"> <ul class="button"> <li>
<a class="demo" href="http://blog.kangismet.net" target="_blank">Demo</a></li> <li>
<a class="download" href="http://blog.kangismet.net" target="_blank">Download</a></li> </ul> </div> <div class="clear"></div>NB:
Ganti TEKS yang di blok berwarna putih dengan link demo anda
Ganti TEKS yang di blok berwarna merah dengan link download anda
Sumber:
http://blog.kangismet.net/
Sekian Terima Kasih