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
0 Komentar untuk "Cara Membuat Show-Hide Kotak Komentar Blogger"

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *