Senin, 12 Juli 2010

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
  2. Kode CSS letakkan seperti biasa diatas kode ]]></b:skin>
  3. 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;
    }
  4. Cari kode berikut bos!
  5. <b:includable id='comment-form' var='post'>
    blah-bleh-bloh
    blah-bleh-bloh
    blah-bleh-bloh
    </b:includable>
  6. <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>
  7. Save.
  8. WassaLam...:-h
85V9C7B2EVYU

Tidak ada komentar:

Posting Komentar