Cara Membuat Show-Hide Kotak Komentar Blogger

Baca Juga

Cara Membuat Show-Hide Kotak Komentar Blogger

BERIKUT ini cara membuat tombol show-hide kotak komentar blog. Jika tombol Show Comment diklik, maka kotak komentar akan muncul. Jika tidak diklik, kolom komentar tidak tampil.

Fungsinya untuk mengurangi beban halaman posting yang dibuka alias mempercepat loading blog, jika postingan sudah banyak komentar.

Cara Membuat Show-Hide Kotak Komentar Blogger

1. Tema > klik Edit HTML

2. Ganti kode berikut ini (ada dua, ganti dua-duanya):

<div class='comments' id='comments'>

dengan kode:

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

3. Copas kode CSS Show-Hide Kotak Komentar Blogger berikut ini di atas ]]></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;}

4. Copas kode Javascript Show-Hide Kotak Komentar Blogger di atas kode </body>

<script type='text/javascript'> //<![CDATA[
// Show and Hide Comments
function 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>

Cara Kedua: Tanpa JavaScript

1. Simpan Kode CSS Hide Comment berikut ini di atas kode ]]></b:skin>

.buka-komen, .tutup-komen {font-family: inherit;background-color: #ababab;color: #fff;font-size: 16px;line-height: 1.3em;padding: 10px;text-align: center;font-weight: 700;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;-webkit-transition: all 218ms;-moz-transition: all 218ms;-o-transition: all 218ms;transition: all 218ms;-webkit-user-select: none;-moz-user-select: none;margin: 15px;cursor: pointer;border-radius: 20px;width: auto;}
.buka-komen{display:block;margin-bottom:20px}
#comments-box{display:none}

2. Temukan & Ganti Kode berikut ini --biasanya ada di bawah kode <b:include data='post' name='post'/>

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>

Atau seperti ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

3. Hapus kode tersebut dan ganti dengan kode berikut ini:

<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<div aria-label='Show Comment' class='buka-komen' id='buka-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>Show Comments</div>
<div aria-label='Hide Comment' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'>Hide Comment</div>
</b:if>
<div id='comments-box'>
        <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
          </div>

4. Save! Simpan template.

Demikian cara membuat Show-Hide Kotak Komentar Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*

Sumber