Cara Membuat Tombol Demo dan Download

Setelah sebelumnya Mas Adhie telah membagikan tutorial pembuatan animasi loading blog dengan menggunakan CSS dan Jquery. Kali ini Mas Adhie akan membahas tentang bagaimana cara membuat tombol demo dan download untuk postingan Blogger.

Tombol ini bisa dibilang cukup berguna jika Anda sering membagikan template yang tentunya lebih afdol jika memberikan live demo dari template tersebut. Untuk penampakan tombol demo dan download bisa dilihat pada gambar dibawah ini.

Untuk membuat tombol tersebut, yang kita butuhkan hanya menambahkan kode CSS pada template, kemudian menambahkan beberapa tag untuk menampilkan tombol demo dan download pada postingan sobat semua.

Untuk lebih jelasnya silahkan melihat tutorial singkat tentang cara menambahkan tombol demo dan download untuk Blogger di bawah ini :

1. Pertama, login ke akun Blogger Anda

2. Kemudian pilih Template > Edit HTML

3. Cari kode ]]></b:skin> kemudian masukkan kode CSS berikut ini diatas kode tersebut

/* Buttons Download
---------------------------------------------*/
ul.postbuttons{
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding-left:0px;
padding-top:20px;
padding-bottom:20px}
ul.postbuttons li{
background:none 0 0 repeat scroll transparent;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 5px 0 0;
padding:0}
a.livedemo{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIcAGsun-LxxqgukfIg1sOzH7M5yzi_usdpjygoTcw1kLEamNtmmalBHls9cxPmNNtJcIEEVZERxu_RC7CRt3WZ7NmOqKAb90Kww2-J_QiKkzEdN6xYnz3yr6KTS33u0PUxS-a0xwgZKY/s1600/demodownload.gif) left bottom no-repeat scroll transparent;
display:block;
height:25px;
text-indent:-9999px;
width:250px}
a.download{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIcAGsun-LxxqgukfIg1sOzH7M5yzi_usdpjygoTcw1kLEamNtmmalBHls9cxPmNNtJcIEEVZERxu_RC7CRt3WZ7NmOqKAb90Kww2-J_QiKkzEdN6xYnz3yr6KTS33u0PUxS-a0xwgZKY/s1600/demodownload.gif) right bottom no-repeat scroll transparent;
display:block;
height:25px;
text-indent:-9999px;
width:250px}

4. Simpan template Anda.

5. Buat postingan baru, kemudian ubah menjadi mode HTML

6. Masukkan kode berikut ini ke dalam postingan tersebut :

<ul class="postbuttons">
<li><a class="livedemo" href="masukkan link demo" rel="nofollow" target="_blank">Demo</a> </li>
<li><a class="download" href="masukkan link download" rel="nofollow" target="_blank">Download</a>&nbsp;</li>
</ul>

7. Publikasikan postingan Anda dan lihat hasilnya.