CARA MEMBUAT SHOW HIDE KOMENTAR BLOG

CARA MEMBUAT SHOW HIDE KOMENTAR BLOG - Bagaimana cara membuat show hide pada komentar blog sehingga komentar blog tampilannya tidak terlalu panjang karena jumlah komentar yang sudah terlalu banyak sampai ratusan. Pada dasarnya script ini menggunakan kode jquery pada aplikasinya.

Show hide JQuery

Fungsi dari show hide komentar blog ini adalah mempercantik dan memperamping bagian blogpost agar tidak terlalu panjang dan juga loading dari blog tersebut bisa lebih cepat dimuat.
CARA MEMBUAT SHOW HIDE KOMENTAR BLOG
1. Log in ke blogger > Template > Edit HTML > Proceed
2. Masukan kode berikut ini sebelum </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 = "Show Comments",
closePanelText = "Hide Comments",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;

jQuery(function() {
    jQuery(panelSelector).hide()
        .addClass('kerenPanel')
            .before('<a class="openpanel" href="#">' + openPanelText + '<em></em></a>')
                .after('<div class="paneline"></div>');
    jQuery('a.openpanel').toggle(function() {
        jQuery(this).addClass('active').html(closePanelText + '<em></em>');
        jQuery('div.kerenPanel').slideDown(slideDownPanelSpeed);
        return false;
    }, function() {
        jQuery(this).removeClass('active').html(openPanelText + '<em></em>');
        jQuery('div.kerenPanel').slideUp(slideUpPanelSpeed);
        return false;
    });
});

//]]>
</script>

3. Masukan kode css pada template blog

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.kerenPanel {padding:10px 20px 20px;margin:0px 0px !important;}

4. Setelah itu pilih Save Template
Demikian CARA MEMBUAT SHOW HIDE KOMENTAR BLOG semoga bisa bermanfaat untuk mempercantik tampilan blog kamu. Salam Blogger !

Ditulis Oleh : Achmadi Iman Faris ~ Faris Share

Sobat sedang membaca artikel tentang CARA MEMBUAT SHOW HIDE KOMENTAR BLOG. Oleh Admin, Sobat diperbolehkan mengcopy paste artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://infoterupdatedanterbaru.blogspot.com/2013/04/cara-membuat-show-hide-komentar-blog.html" target="_blank">CARA MEMBUAT SHOW HIDE KOMENTAR BLOG</a>