Memodifikasi DOWNLOAD dan DEMO di Blog

Tutorial berikut ini tentang Memodifikasi DOWNLOAD dan DEMO di Blog. Biasanya membuat tombol download dan demo ini adalah ketika memposting artikel yang membutuhkan demo, misalnya ketika memposting mengenai template blog ataupun widget blog dan lain sebagainya.

 dan mungkin saja akan saya gunakan di postingan dengan tombol download dan demo seperti dibawah ini.  agar terlihat lebih menarik dan indah

LIVE DEMO


MENAMBAHKAN KODE CSS

Ok berikut ini adalah cara membuatnya :

1. Masuk ke blog sobat>> Pilih Opsi  Template>> Edit HTML

2. Taruh kode dibawah ini diatas kode  ]]></b:skin>

.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 }

3. Simpan template.

4. Untuk penggunaannya dalam postingan silahkan gunakan kode dibawah ini dengan menggunakan mode         HTML.

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

Sekian Pembelajaran tentang CSS

Semoga bermanfaat, Terima Kasih