[Blogspot] JQuery Show/Hide pada Komentar Blog

[Blogspot] JQuery Show/Hide pada Komentar Blog

Kembali lagi bersama saya di Blog ini. Disini saya akan menerangkan Bagaimana cara membuat Show/Hide pada Komentar Blog. Sebelum kita bahas bagaimana cara membuatnya, akan lebih baik mengetahui apa itu Show/Hide? Show/Hide atau Tombol Show (mengeluarkan) dan Hide (menyembunyikan) dalam Kode Script adalah Tombol dimana jika di Event-kan (di klik, mouseover, mouseout, dan lain lain) baik akan mengeluarkan maupun menyembunyikan OBJECT.

Nah, disini saya berbicara mengenai Bagaimana cara Show/Hide Object yang Objectnya itu adalah Komentar² blog dengan bantuan JQuery. Bagaimana sih contoh dari Show/Hide tersebut? Saksikan Review di bawah ini. Contoh untuk Show/Hide pada Object :

Show/hide

Lihat contohnya nih. Tombol Show/Hide bisa di gunakan untuk apa saja seperti ini. Kode tulisan ini bisa di ubah menjadi kode HTML lainnya atau javascript lainnya

Bagaimana cara membuat Show/Hide di komentar? Yuk ikuti cara berikut ini.

• Pertama tama Buka masing masing Account blog kamu!

• Pilih Layout/Design → Edit HTML

• Pastekan kode berikut tepat di bawah kode <head> :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();});});
</script>

• Kemudian Pastekan CSS nya Tepat diatas kode ]]></b:skin> :

.slidingDiv {
background-color:none;
padding:20px;
margin-top:10px;
}
.show_hide {
display:none;
color:#000;
}

Bisa di Edit Seperlunya.

• Kemudian cari kode yang mirip dengan kode berikut :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:20px;' width='16px'/>
</b:if>
<b:if cond='data:comment.favicon'>
.......
</dl>

• Paste kan kode berikut dan letakan menjadi kode berikut :

<a href="javascript:void(0)" class="show_hide">Show/hide</a>
<div class="slidingDiv"></div>

Dan letakan kode diatas kedalam kode sebelumnya menjadi

<a href="javascript:void(0)" class="show_hide">Show/hide</a><div class="slidingDiv"><dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:20px;' width='16px'/>
</b:if>
<b:if cond='data:comment.favicon'>
.......
</dl>
</div>

Kode TITIK² merah adalah kode SKIP karna kode yang banyak itu terlalu panjang.

• Kemudian Save dan Walaaaa, Jadi!
Sekian dulu ya dari posting ini, semoga memberikan yang terbaik :) Jika ada keluhan silahkan berkomentar di bawah ini :)