Cara Membuat Tombol Show Hide Komentar Blog

Posted by

Setelah lama tidak posting tentang Tutorial Blogging kali ini ane akan berbagi sedikit tutorial mengenai cara membuat tombol show hide comentar pada blog,walaupun artikel ini mungkin sudah banyak yang tau tapi ane share buat yang masih pemula deh..untuk tampilan nya dapat dilihat pada contoh pada gambar ini

Oke langsung aja ikuti langkah-langkah dibawah ini

1. Login ke akun blogger ente tentu nya
2. Pilih edit html pada menu template
3. centang ""Expand Template Widget".
4. Search kode </head> menggunakan ctrl+F
5. Pastekan kode di bawah ini tepat di tas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Tampilkan Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://membuatgempar.net23.net/comment.js' type='text/javascript'/>


6. Lalu lakukan search kembali untuk mencari kode ]]></b:skin>
7. Pastekan kode dibawah ini tepat di atas kode ]]></b:skin> 

a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#ffffff; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
}a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#ffffff;}a.openpanel.active em {top:6px;border color:#222222;
}div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}


8.kemudian save dan close..Lihat blog anda maka pada kolom comentar sudah menjadi show hide :D

Sekian Postingan  mengenai Cara Membuat Tombol Show Hide Komentar Blog,Semoga bermanfaat :).Terima kasih

a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#ffffff; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
}a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#ffffff;}a.openpanel.active em {top:6px;border color:#222222;
}div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}

Sumber : http://putupunyablog.blogspot.com/2012/11/cara-membuat-tombol-show-hide-komentar.html#ixzz2D6k1R5Zu


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Tampilkan Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://membuatgempar.net23.net/comment.js' type='text/javascript'/>

Sumber : http://putupunyablog.blogspot.com/2012/11/cara-membuat-tombol-show-hide-komentar.html#ixzz2D6jGECBC


Blog, Updated at: 11/24/2012 10:40:00 AM

5 komentar:

Sebagai Pengunjung yang baik berikanlah komentar anda untuk membantu meningkatkan trafic blog ini.Terima Kasih :)