Posted by Aak
Aak-share.com Updated at: 8:13:00 PM

Cara Membuat Style Tombol Demo dan Download

No comments:
Cara Membuat Style Tombol Demo dan Download - Tombol Demo dan Download biasanya digunakan untuk demontrasi sebuah template atau hanya sekedar link download dari pokok ulasan pada postingan. Pada postingan sebelumnya saya telah mengulas tombol Download namun pada postingan sebelumnya penerapannya hanya melalui HTML.

Pada penerapan tombol Demo dan Download sedikit berbeda, berikut penerapan Membuat Style Tombol Demo dan Download:

Live Demo


Cara Membuat Style Tombol Demo dan Download 

Silahkan anda masuk keEditor Template, kemudian anda tambahkan kode berikut diatas ]]></b:skin>

/* AakButton */ .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 }


Setelah penerapan diatas anda kembali ke dhasbor, anda memasukkan script dibawah ini kedalam postingan dengan mode Compose HTML.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://aak-share.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://aak-share.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>

Anda bisa memasukkan script diatas pada setiap kali ingin menampilkan tombol Demo dan Download pada postingan,
Demikian Cara Membuat Style Tombol Demo dan Download, semoga bermanfaat!
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments