Membuat Tombol Download dan Demo

- Saturday, April 02, 2016
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
advertise here
 

Start typing and press Enter to search