Cara Membuat Tombol Demo dan Download Dengan Css

Asallmualaikum wr. wb. Kali ini Blog KitaBisa121 akan membagikan Tutorial Blog Cara Membuat Tombol Demo dan Download Dengan Css.

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/AVvXsEg4L_7Qy4ah3NsiKuPln916rBrz1LNJKWcM4c9xQFMFBH48GLp-pYJG1D3Gpwot6Jk9OE70b-YATatiN1MZ1F3FMk21GQmHViENqHStgnxpFRpdw5bhvAcalpdxvW6DJC1IvQm4LbcjccA/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/AVvXsEg4L_7Qy4ah3NsiKuPln916rBrz1LNJKWcM4c9xQFMFBH48GLp-pYJG1D3Gpwot6Jk9OE70b-YATatiN1MZ1F3FMk21GQmHViENqHStgnxpFRpdw5bhvAcalpdxvW6DJC1IvQm4LbcjccA/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.