Cara Membuat Show-Hide Kotak Komentar Blogger

BERIKUT ini cara menciptakan 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 bl Cara Membuat Show-Hide Kotak Komentar Blogger

 Fungsinya untuk mengurangi beban halaman posting yang dibuka alias mempercepat loading bl Cara Membuat Show-Hide Kotak Komentar Blogger

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

Cara Membuat Show-Hide Kotak Komentar Blogger

1. Tema > klik Edit HTML
2. Ganti aba-aba 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 aba-aba 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 aba-aba Javascript Show-Hide Kotak Komentar Blogger di atas aba-aba </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 aba-aba ]]></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 ibarat 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 aba-aba tersebut dan ganti dengan aba-aba 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 menciptakan Show-Hide Kotak Komentar Blogger. Good Luck & Happy Blogging! (www.idtutorial.com).*


Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours