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 Komentar2 blog dengan bantuan JQuery. Bagaimana sih contoh dari Show/Hide tersebut? Saksikan Review di bawah ini. Contoh untuk Show/Hide kotak Komentar adalah . 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>• Kemudian Pastekan CSS nya Tepat diatas kode ]]></b:skin> :
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();});});
</script>
.slidingDiv {Bisa di Edit Seperlunya.
background-color:none;
padding:20px;
margin-top:10px;
}
.show_hide {
display:none;
color:#000;
}
• Kemudian cari kode yang mirip dengan kode berikut :
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>• Paste kan kode berikut dan letakan menjadi kode berikut :
<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>
<a href="javascript:void(0)" class="show_hide">Show/hide</a>Dan letakan kode diatas kedalam kode sebelumnya menjadi
<div class="slidingDiv"></div>
<a href="javascript:void(0)" class="show_hide">Show/hide</a>Kode TITIK2 merah adalah kode SKIP karna kode yang banyak itu terlalu panjang.
<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>
• Kemudian Save dan Walaaaa, Jadi!
Sekian dulu ya dari posting ini, semoga memberikan yang terbaik :) Jika ada keluhan silahkan berkomentar di bawah ini :)
Tidak ada komentar
Posting Komentar