Cara Membuat Show-Hide Kotak Komentar Blogger

Cara Membuat Show-Hide Kotak Komentar Blogger

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.

Cara Membuat Show-Hide Kotak Komentar Blogger

Cara Membuat Show-Hide Kotak Komentar Blogger

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).*


Thanks for reading Cara Membuat Show-Hide Kotak Komentar Blogger | Labels: Blogging, Desain Blog edit this post
0 Komentar untuk "Cara Membuat Show-Hide Kotak Komentar Blogger"

1. Komentar spam, link aktif, dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat/bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *