Breaking News
Loading...
Sunday, April 21, 2013

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

Faris Art 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

0 komentar:

Post a Comment

Mohon Sobat Untuk Tidak Berkata Kasar Pada Formulir Komentar, Dan Mohon Untuk Saling Menghargai .
[1] . Berkomentar boleh , tapi jangan nyepam(BOM COMMENT) ya kaaka ..
[2] . Live link tidak papa , tapi maksimal sehari 2 link jika berkomentar;)
Sekian Dari Admin Dan Terima kasih....

 
Toggle Footer
Copyright © 2012 Faris Share™ All Right Reserved
Blogger Designed by IVYthemes | MKR Site