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 ...
https://tutorialcarapintar.blogspot.com/2019/02/cara-menciptakan-komentar-blog-menjadi.html
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.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
Tutorial Blogger Lainnya :