Cara Membuat Show Hide Pada Komentar

Pada kesempatan kali ini saya akan membahas cara membuat Show Hide pada Komentar blog, kebanyakan pasti hanya menggunakan scroll saja pada komentarnya, saya pun dulunya juga pernah menggunakan scroll pada komentar blog saya, setelah berkunjung kebeberapa blog saya menemukan blog Hompimpa Alaihum Gambreng yang komentarnya menggunakan slide panel, show hide komentar akhirnya saya pun juga membuatnya pada komentar blog saya.

Jika sobat tertarik berikut ini adalah langkah-langkah pembuatannya :

1. Login ke account blogger sobat.

2. Kemudian klik Tab Rancangan.

3. Lalu klik Edit HTML. jangan lupa centang expand widget template.

4. Cari kode </head> , dan Salin script dibawah ini tepat diatas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('.btn-slide').click(function(){
$('#panel').slideToggle('slow');
});
});
</script>

5. Kemudian salin kembali Script dibawah ini, dan letakkan di atas kode </style> atau ]]></b:skin>.

#panel{
background:#212121;
max-height:300px;
padding:10px;
color:#ddd;
overflow:auto;
display:none;
}
.slide{
margin:0;
padding:0;
border-top:2px solid #6f6f6f;
}
.btn-slide {
cursor:pointer;
cursor:hand;
text-align:center;
padding:10px;
margin:0 auto;
display:block;
font:bold 120%/100% &quot;Helvetica Neue&quot;Arial, Helvetica, sans-serif;
color:#b3b3a9;
background-color:#212121;
}

6. Sekarang sobat cari kode <dl id='comments-block'>, dan taruh kode ini <div id='panel'>, tepat diatasnya.

7. Karena kita menggunakan perintah <div> jangan lupa untuk menutup dengan kode </div>. Silahkan sobat letakkan kode </div> setelah kode </dl>, akan tetapi sobat juga harus menambahkan script dibawah ini :

</div>
<div class='slide'><span class='btn-slide'><img src='https://lh5.googleusercontent.com/-UChDdIt-q0c/TkHT8M9zE-I/AAAAAAAAAuI/YLNXG5eMIVc/I/Show%252520Comment.png' title='Tampilkan Komentar'/></span></div>

tepat dibawah kode </div> atau untuk lebih jelasnya bisa sobat lihat pada contoh di bawah ini.

<div id='panel'>

   <dl id='comments-block'>

        <b:loop values='data:post.comments' var='comment'>

          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

            <a expr:name='data:comment.anchorName'/>

            <b:if cond='data:comment.authorUrl'>

              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

            <b:else/>

              <data:comment.author/>

            </b:if>

            <data:commentPostedByMsg/>

          </dt>

          <dd class='comment-body'>

            <b:if cond='data:comment.isDeleted'>

              <span class='deleted-comment'><data:comment.body/></span>

            <b:else/>

              <p><data:comment.body/></p>

            </b:if>

          </dd>

          <dd class='comment-footer'>

            <span class='comment-timestamp'>

              <a expr:href='data:comment.url' title='comment permalink'>

                <data:comment.timestamp/>

              </a>

              <b:include data='comment' name='commentDeleteIcon'/>

            </span>

          </dd>

        </b:loop>

      </dl>
</div>
<div class='slide'><span class='btn-slide'><img src='https://lh5.googleusercontent.com/-UChDdIt-q0c/TkHT8M9zE-I/AAAAAAAAAuI/YLNXG5eMIVc/I/Show%252520Comment.png' title='Tampilkan Komentar'/></span></div>

8. Simpan template dan lihat hasilnya, sobat perhatikan kode penutup dibawah ini :

</div>
<div class='slide'><span class='btn-slide'><img src='https://lh5.googleusercontent.com/-UChDdIt-q0c/TkHT8M9zE-I/AAAAAAAAAuI/YLNXG5eMIVc/I/Show%252520Comment.png' title='Tampilkan Komentar'/></span></div>

Yang berwarna hijau bisa sobat ganti dengan URL Images sobat sendiri, baik itu logo gambar, maupun logo tulisan. Mungkin hanya ini yang bisa saya bagikan, ya...,mudah-mudahan aja ini bisa bermanfaat buat sobat semuanya, Terima kasih.

Posted in: Komputer, Tips and Trik