Cara Membuat Style Tombol Demo dan Download
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>
Setelah penerapan diatas anda kembali ke dhasbor, anda memasukkan script dibawah ini kedalam postingan dengan mode Compose HTML.
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 }
<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!
0 Response to "Cara Membuat Style Tombol Demo dan Download "
Post a Comment