Hover Attribute for Comments Box on Blogger

Masih ingat tidak sobat dengan fungsi dari hover :-? Jika kita bisa kreatif dengan kode CSS, trik hover ini bisa dibikin menarik dan fungsional dalam menyembunyikan sesuatu ;)) (kayak koruptor ada sembunyi-sembunyi yak) :D Adapun hover itu jika kita menyorot satu buah link, dan ada efek yang ditimbulkan!!! That is i mean about the hover...prikitiwww inggrisan euy =)) Dan sekarang Beben si bloglang nuganteng kalem tea :P memadukannya dengan kotak komentar pada blogger.

Dengan menyisipkan sebuah link, yg dapat berupa gambar atau juga tulisan akan menghilangkan kotak komentar pada blog >:) Dengan menyorot link tersebut nanti akan timbul lagi deh itu si kotak komentarnyo B-) Kita tengok pada screenshot yg sudah Beben praktekan diblog uji coba ;)) :)) Perhatikan pada kotak komentar yah :)

1. Centang Expand Widget Templates
2. Kode CSS letakkan seperti biasa diatas kode ]]></b:skin>
ul#bbnbox{
float:left;
display:inline;
margin:0;
position:relative;
z-index:10;
}
ul#bbnbox li{
clear:both;
float:left;
display:inline;
}
ul#bbnbox li div{
position:absolute;
top:XXXpx;
padding-top:11px;
left:-5000px;
width:XXXpx;
height:XXXpx;
z-index:10;
}
ul#bbnbox li:hover div,
ul#bbnbox li.sfhover div{
left:0px;
}
ul#bbnbox li div iframe{
width:XXXpx;
height:XXXpx;
}
3. Cari kode berikut bos!
<b:includable id='comment-form' var='post'>
blah-bleh-bloh
blah-bleh-bloh
blah-bleh-bloh
</b:includable>
4. <ul id='bbnbox'><li><a href='#'><img src='HTTP://LINK-GAMBAR.JPG'/></a><div>
   blah-bleh-bloh
   blah-bleh-bloh
   blah-bleh-bloh
   </div></li></ul>
   Gambar bisa diganti dengan tulisan, be a creative :-bd Jadi secara keseluruhan kodenya nanti akan tampak seperti berikut bos.

   <b:includable id='comment-form' var='post'>
   <ul id='bbnbox'><li><a href='#'><img src='HTTP://LINK-GAMBAR.JPG'/></a><div>
   <div class='comment-form'>
   <a name='comment-form'/>
   <p><data:blogCommentMessage/></p>
   <data:blogTeamBlogMessage/>
   <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
   <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
   <data:post.friendConnectJs/>
   <data:post.cmtfpIframe/>
   <script type='text/javascript'>
   BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
   </script>
   </div>
   </div></li></ul>
   </b:includable>

5. Save.
WassaLam...:-h

85V9C7B2EVYU