
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.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}2. Save template.
.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 }
Memasang tombol di blog
Untuk penggunaannya dalam postingan silahkan gunakan kode dibawah ini dengan menggunakan mode HTML.<div style="text-align: center;">Ganti link dengan link Demo dan link berwarba biru diatas dengan link Dowload.
<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>
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 statis2. 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.
0 Komentar untuk "Cara Membuat Tombol DOWNLOAD dan DEMO Keren di Blog"