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 buat blog itu- Cara Membuat Show-Hide Kotak Komentar Blogger

 Fungsinya untuk mengurangi beban halaman posting yang dibuka alias mempercepat loading bl Cara buat blog itu- 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 instruksi 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 instruksi 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 instruksi Javascript Show-Hide Kotak Komentar Blogger di atas instruksi </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 instruksi ]]></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 menyerupai 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 instruksi tersebut dan ganti dengan instruksi 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.carabuatblogitu.com).*


Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours