show hide komentar blog |
manfaat merubah Kotak komentar blog menjadi show hide tidak terlalu banyak , karena hanya membuat kotak komentar menjadi singkat dan terlihat ramping . bukan hanya itu menjadikan kotak komentar menjadi show hide ini Valid HTML5 .
Memasang Kotak komentar Show hide pada blogspot
- .border{ border:1px solid greenuntuk memasangnya silahkan Login pada blogger .
- setelah itu sil masuk ke Taorderb Temorderplate pada menu samping kiri dan edit HTML dan cari </head>
- Masukan kode CSS di bawah ini tepat di atas kode </head>
<style type='text/css'>
a.openpanel{width:100%;color:rgb(141,142,144);display:block;font-size:120%;overflow:hidden;padding:0;text-align:center;position:relative;text-decoration:none;box-sizing:border-box;background-color:white;border:2px solid rgb(141,142,144);box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);border-radius:3px}
a.openpanel span.title{padding:15px 10px;display:block}
a.openpanel span.mas{position:absolute;top:0;right:0;bottom:0;padding:0 25px;background:transparent;border-left:2px solid rgb(141,142,144);box-sizing:border-box}
a.openpanel span.mas span{background-color:#ed1e1e;width:30px;height:30px;position:absolute;right:10px;top:12px;border-radius:50%;box-shadow:0 2px 5px 0 rgba(0,0,0,0.26)}
a.openpanel span.mas.tamvanx span{background:#0091ea}
</style>
- setelah itu cari kode </Body> dan masukan kode javascript di bawah ini tepat di atas kode </body> tersebut .
<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="#" title="Comments"><span class="title">' + openPanelText + '</span><span class="mas tamvan"><span></span></span></a>')
.after('<div class="paneline"></div>');
jQuery('a.openpanel').toggle(function() {
jQuery(this).addClass('active').html('<span class="title">' + closePanelText + '</span><span class="mas tamvanx"><span></span></span>');
jQuery('.kerenPanel').slideDown(slideDownPanelSpeed);
return false;
}, function() {
jQuery(this).removeClass('active').html('<span class="title">' + openPanelText + '</span><span class="mas tamvan"><span></span></span>');
jQuery('.kerenPanel').slideUp(slideUpPanelSpeed);
return false;
});
});
//]]>
</script>
setelah itu Save template dan lihat hasilnya .
Catatan :
Jika template sobat masih belum memasang agar font awesomenya muncul silahkan pasang kode di bawah ini tepat di atas kode </head >
jika sudah maka untuk memasang script di atas tidak di perlukan. semoga
Catatan :
Jika template sobat masih belum memasang agar font awesomenya muncul silahkan pasang kode di bawah ini tepat di atas kode </head >
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
jika sudah maka untuk memasang script di atas tidak di perlukan. semoga
2 komentar