Cara Membuat Show Hide Kotak Komentar

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 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% "Helvetica Neue"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 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" href="http://www.blogger.com/blogger.g?blogID=1310061262030190307">
            <b:if cond="data:comment.authorUrl">
              </b:if></a><a expr:href="data:comment.authorUrl" href="http://www.blogger.com/blogger.g?blogID=1310061262030190307" rel="nofollow"><data:comment.author></data:comment.author></a>
            <b:else>
              <data:comment.author>
         
            <data:commentpostedbymsg>
          </data:commentpostedbymsg></data:comment.author></b:else></dt>
<dd class="comment-body"><b:if cond="data:comment.isDeleted">
              <span class="deleted-comment"><data:comment.body></data:comment.body></span>
            <b:else>
              </b:else></b:if><br />
<data:comment.body></data:comment.body></dd>
          <dd class="comment-footer"><span class="comment-timestamp">
              <a expr:href="data:comment.url" href="http://www.blogger.com/blogger.g?blogID=1310061262030190307" title="comment permalink">
                <data:comment.timestamp>
              </data:comment.timestamp></a>
              <b:include data="comment" name="commentDeleteIcon">
            </b:include></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.

Sumber

Related Posts: