Sebelum kita masuk ke tutorial mengenai cara membuat tombol DEMO dan DOWNLOD di Blog, apa fungsi dari tombol demo dan download dalam sebuah blog.
Tombol demo di blog di gunakan untuk melihat suatu contoh hasil tampilan pada sebuah blog yang membawa anda pergi ke alamat yang di masukan kedalam tombol demo tersebut. Misalkan anda menjual sebuah template SEO 2015 dan anda sudah memunculkan screenshot tampilan SEO tersebut, agar pengunjung yang ingin membelinya melihat secara langsung bagaimana tampilan blog yang menggunakan template SEO maka di buatlah tombol demo di bawah gmabar screenshot template.
Sedangkan fungsi dari tombol download di blog yaitu memudahkan pengunjung untuk mengunduh file yang sudah di upload di dalam blog tersebut. Jadi anda tidak perlu membuka banyak halaman lagi, cukup klik tombol download maka file yang ingin anda download akan terdownload otomatis.
Membuat Tombol Demo Dan Download
1. Silahkan masuk di blog anda.2. Pilih Template
3. Pilih Edit Html
4. Silahkan anda cari kode ini ]]></b:skin> gunakan Ctrl+F untuk mempermudah pencarian
5. Letakan kode script di bawah ini tepat di atas kode ini ]]></b:skin>
/* -- Kode Button --*/
.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 }
6. Simpan Template anda
Memasang Tombol Demo dan Download di Blog
Dan letakan kode script berikut ini di bawah potingan blog anda, ganti alamat URL bacaan gratis dengan alamat URL blog anda
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.bacaan-gratis.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.bacaan-gratis.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
Demikian tutorial blog bagi pemula mengenai cara membuat tombol Demo dan Download di blog, semoga dapat bermanfaat.
Terimah Kasih telah membaca artikel 
