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
