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/AVvXsEjh9KJXDUz1weVoTZcMy7yeVC8mbXHSyuRKjOwDliSF7_25YdWww3KDsm2MZO07ur_tYYy1Wi3brAxTGaOe_VRPkvBg7j5x3Q9ZEhXVQ29v7FsTw7PwxQL5Xap6hCvp-k3NL64K212aIQw/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/AVvXsEjh9KJXDUz1weVoTZcMy7yeVC8mbXHSyuRKjOwDliSF7_25YdWww3KDsm2MZO07ur_tYYy1Wi3brAxTGaOe_VRPkvBg7j5x3Q9ZEhXVQ29v7FsTw7PwxQL5Xap6hCvp-k3NL64K212aIQw/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> </li>
</ul>
7. Publikasikan postingan Anda dan lihat hasilnya.
2 comments:
makasih ....
gan . berguna banget nih ..
izin sedot gan ..
http://masjawika.blogspot.com/
Wah sip neh tombol demonya keren
Post a Comment