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=""comment-author " + 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

BackLink please. Thanks! ^^

URL

Code For Forum

HTML Code

<a href='https://edho-xp.blogspot.com/2012/04/cara-membuat-show-hide-kotak-komentar.html' target='_blank'>Cara Membuat Show Hide Kotak Komentar</a>

About EDHO-XP Author

Nama gue Edo Cosma. Nama asli gue Ahmad Dhoifullah . Gue orang nya sedikit pendiam dan pemalu. Apa lagi gue masih menduduki kelas 8 / 2 SMP tepatnya di sekolah SMPN 3 BATANGHARI sekolang yang berada di kotaku. Ini blog hanya percobaan dan iseng aja kok sob. Salam kenal yah sob !

Selengkapnya Tentang Admin EDHO-XP »