Cara Menciptakan Komentar Blog Menjadi Show Hide

Cara Membuat Show Hide Pada Komentar Blog

Menjadikan Komentar Blog Show Hide Valid HTML5

Cara Merubah komentar blog menjadi singkat dengan tombol show hide. Manfaat merubah komentar blog menjadi show hide ini tidak terlalu banyak, hanya menciptakan blog menjadi singkan kalau ada banyak komen pada blognya, mungkin dapat juga menciptakan loading blog jadi lebih cepat sebab tidak terlalu banyak meload image di komentar blog.

Cara Membuat Komentar Blog Menjadi Show Hide

• Login ke Blogger.com

• Masuk ke tab Template Edit HTML Cari Kode </head>

• Masukan CSS di bawah ini, sempurna di atasnya.

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

• Selanjutnya, cari arahan </body> kemudian masukan javascript dibawah ini sempurna diatasnya.

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

Kalau sudah tinggal save dan lihat hasilnya.

Kalo Showhidenya Ga tampil, Kalian pasang script ini di atas arahan </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

Jangan lupa mampir ke tutorial lainnya di blog aku ya.

Tutorial Blogger Lainnya :

• Membuat Responsive Menu Navigation Bar Scrolling

• Encrypt Tool Online Untuk Menyembunyikan Script

• Simple Menu Navigation Bar Responsive

Cukup sekian dan terimakasih, biar artikel perihal cara menciptakan komentar blog menjadi show hide ini bermanfaat.