Cara Membuat Show Hide/Buka Tutup Daftar Komentar Pada Blogger

Oleh Rafid Aslam

23 Juli 2012

Hide-Show Comment-Cara kali ini adalah membuat hide-show komentar pada blogger, Biasanya beberapa blog ada yang memakai trik ini untuk tidak menghabiskan halaman karena komentar yang sangat banyak, kalau blog yang sepi komentar saya sarankan jangan memakai trik ini sangat percuma, saya sarankan jika anda mempunyai blog yang tidak pernah sepi komentar. Jika anda hanya ingin menyalin artikel ini tidak apa-apa asalkan harus ada sumber link hidupnya. Bicara tentang link, trik show-hide ini juga memakai link untuk membuka tutup komentar, seperti gambar yang satu ini





Gimana, Tertarik untuk mencoba trik ini. Langsung saja ikuti cara di bawah ini:

1.  pergilah ke Dashboard lalu pilih Tata Letak kemudian contreng tulisan Expand Widget Templates,dan cari kode berikut (Gunakan Ctrl+F):

</head>

2. Jika anda sudah menemukan kode tersebut letakan kode di bawah 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='http://mrpujiajadeh.comze.com/slide-blogger-comment-box.js' type='text/javascript'/>

3. Selanjutnya, cari kode berikut

]]></b:skin>

4. Jika anda sudah menemukan kode tersebut, letakan kode berikut tepat di atasnya

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;}

Jika anda ingin bertanya, isi kotak komentar yang ada di bawah postingan ini.

 

Tag : Tips Blogger

Bagikan :

Tweet