Cara Membuat Tombol DOWNLOAD dan DEMO Keren di Blog

Cara membuat tombol DOWNLOAD dan DEMO di Blog. Tutorial berikut ini tentang Cara membuat tombol DOWNLOAD dan DEMO Keren 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.

Sebelumnya seocips.com telah membagikan beberapa template blogger seo friendly. dan mungkin saja akan saya gunakan juga tombol download dan demo seperti dibawah ini. Sobat juga dapat melihat tombol demo dan download lainnya dengan efek slide di artikel seocips yang berjudul : membuat demo dan download Button dengan efek slide.
Ok berikut ini adalah cara membuatnya :

Membuat Tombol Download dan DEMO

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

2. Save template.

Memasang tombol di blog

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://blog.spezer.net" target="_blank">Demo</a></li>
<li><a class="download" href="http://blog.spezer.net" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Ganti link dengan link Demo dan link berwarba biru diatas dengan link Dowload.
Cara diatas adalah tombol halaman demo yang biasa saja tapi bagi anda yang ingin membuat halaman demo menggunakan halaman statis atau menggunakan toolbar seperti di BTemplates, ZoomTemplates, ThemeForest, adalah seperti berikut ini :

Halaman Download Demo Dengan Toolbar

1. Dibuat di halaman statis
2. Tidak perlu membuat blog baru.
3. Menggunkan tag kondisional pengingkaran, sehingga loading lebih cepat.
4. Penambahan link Download otomatis.



Bagaimana cara membuatnya? Baca caranya di CARA MEMBUAT HALAMAN DEMO.
Sekian mengenai Cara membuat tombol DOWNLOAD dan DEMO Keren di Blog Blogger semoga bermanfaat.