Cara Membuat Kotak Komentar Blog Show-Hide Terbaru
November 19, 2018Selamat Datang di IMAMKUNBLOG - Hai sobat blogger semuanya sudah beberapa hari ini saya tidak update di blog ini, pada hari ini saya akan membagikan tutorial "Cara Membuat Show/Hide Kotak Komentar Blogger".
 |
| Cara Membuat Kotak Komentar Blog Show-Hide Terbaru |
Jika Show Comment di kllik maka kotak komentar tersebut akan muncul dan sebaliknya, jika tidak di klik maka kotak komentar tersebut tidak akan muncul / HIDE.
Apa sih fungsinya memasang Show/hide kotak komentar diblogger? Fungsinya adalah untuk mempercepat loading suatu blog yang memiliki banyak komentar dan juga dapat mempercepat halaman-halaman atau post blogger.
Cara Membuat Show/Hide Kotak Komentar Blogger
- Sobat Login ke Blogger
- Selanjutnya, jika sudah login sialhkan sobat klik Tema/Theme
- Kemudian KLik EDIT HTML
- Selanjutnya sobat Cari kode dibawah ini
<div class='comments' id='comments'>
- Selanjutnya, Jika sudah ketemu selanjutnya sobat ganti kode yang sudah ketemu dengan kode dibawah ini
<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a> <div class='clear'/> <div class='comments hide-content' id='comments'> <a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a> <div class='clear'/>
- Selanjutnya Untuk Pemasangan Show/Hide Sobat Cari Kode ]]></b:skin>
- Jika sudah ketemu kodenya, selanjutnya sobat Coy dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>
.hide-content{display:none;margin:0;padding:0;} a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s} #comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s} a.showcontent:hover{background:#fff;color:#5593f0;} #comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}
- Langkah selanjutnya, Sobat Cari Kode </body> dan letakkan kode dibawah ini tepat diatas kode </body>
<script type='text/javascript'> //<![CDATA[// Show and Hide Commentsfunction showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};//]]></script>
- Klik Save Theme/Tamplate
- Finish deh
Happy Blogging!!
0 komentar