Cara Membuat Show-Hide Comment Pada Blog

Cara Membuat Show-Hide Comment Pada Blog - Ya, kali ini saya akan berbagi Cara Membuat Show-Hide Comment Pada Blog , bagaimana cara kerjanya? cara kerjanya itu misalkan di Blog kita tidak muncul comment tetapi ada teks bacaan seperti Buka Komentar / Tutup Komentar, sebenarnya teks itu bisa diganti dengan teks yang anda mau, nah setelah anda klik Buka Komentar, maka komentar pun akan muncul kebawah dengan perlahan.

Contoh :

Langsung aja saya beritahu caranya :

Pertama" Login di www.blogger.com

Kemudian Kamu buka Template > Edit HTML dan Centang "Expand Template Widget"

kalau sudah, kamu letakkan code dibawah ini tepat diatas kode ]]></b:skin>

a.openpanel{display:block;width:auto;height:auto;text-align:center;font-weight:bold;font-size:15px;line-height:30px;background:#660000;border:3px solid #990000;border-top:0px;-webkit-transition:all .15s ease-in-out;-webkit-transform-origin:50% 1px;position:relative}
a.openpanel.active{background-color:#660000}
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 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;}

Jika sudah, kemudian kamu masukan lagi code dibawah ini tepat diatas 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='https://lioneldandy.googlecode.com/files/show-hide-comment.js' type='text/javascript'/>

Setelah itu Save Template.
Selesai.

Pengertian :

kode pertama yaitu CSS, jika ingin mengubah tampilannya bisa anda ganti sendiri cssnya.
Sekian dari saya, semoga artikel ini bisa bermanfaat untuk anda.
Terimakasih.

Tweet

Postingan terkait:

Ditulis Dandi Saseno — Saturday, 26 January 2013 — 39 Comments — tutorial blog