Monday, June 13, 2011

Membuat Efek Bubble DI kotak komentar

Setelah kemarin membahas tentang widget , kini saya kembali menulis tentang widget.


Silakan terlebih dahulu lihat efeknya DISINI

Note : efeknya ada di kolom komentar , coba kalian sorot Komentar dari mas rizky.  jika tertarik maka ikuti langkah-langkah berikut :



1 . copy paste kode dibawah ini tepat diatas kode
]]></b:skin>


/* Comment */
#bg_commentblock {color:#fff;width:390px;background:transparent;float: left;padding:10px;margin:0px}
#bg_commentblock li{list-style:none}
div .comment-body a{color:#0080ff}
div .comment-body a:hover{color:#fff}
.comment-body {background:transparent;text-shadow:2px 2px 2px #000;padding:5px 0px 0px 7px;-moz-border-radius:10px;margin:15px 0px 20px 0px;border:1px solid #aaa;color:#fff}
.comment-body:hover{background:#000; opacity:0.8; font-size:16px;box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;}
.comment-body-author {background:#666;background:-moz-linear-gradient(top,#fff,#fbefd9);padding:5px 0px 0px 7px;-moz-border-radius:10px;margin:15px 0px 20px 0px;border:1px solid #aaa;color:#fff}
.comment-list li a{color:#00a}
.sg1 {position:relative;top:-29px;left:5px;border-color: transparent transparent #aaa transparent;border-style:solid;border-width:12px;height:0;width:0;}
.sg2 {position:relative;top:0px;left:5px;border-color: transparent transparent #fff transparent;border-style:solid;border-width:12px;height:0;width:0;margin-top:-52px;}
.commentblock {text-align:left;padding:0;margin:0;}
.commentblock a{color:#666;}
.commentblock a:hover{color:#fff;}
#comment-editor{height:300px;width:618px;margin:0;padding:0;}
.commentlist {margin-top:10px}
.commentlist li {list-style:none;margin-bottom:px;line-height: 20px;padding: 0px;}
.author-name a {color:#ff5500}
.author-name a:hover {color:#fff}

3. Kode yang saya beri tanda merah adalah kode ukuran kotaknya , jadi sesuaikanlah dengan ukuran  entri blog anda .
 Cara melihat ukurannya ialah dengan mencari kode .entry { , lalu dibawah kode itu ada sebuah tulisan width dengan ukuran entri blog sobat . Ukuran tersebut anda harus kurangi 22px sehingga jika ukuran lebarnya 500px kurangilah sehingga menjadi 488px . Dibawah ini contoh gambar letak dari kode entry { 

Contoh Gambar :
cara membuat efek bublle di kolom komentar

Note : anda bisa klik gambar diatas jika kurang jelas dimana letak kode tersebut.

4. Setelah cocok dengan ukurannya , kini Cari kode <p><data:comment.body/></p> , nah jika tidak ketemu maka carilah kode yang hampir sama persis seperti dibawah ini


<dl class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
</b:if>
</dt>pada hari&#160;<dd class='comment-footer' style='display:inline; margin:0px'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd></span>
<dd class='commenttext'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:loop>
</dl> 

5. Jika sudah ketemu maka copy kode dibawah ini lalu gantikan kode diatas dengan kode dibawah ini, lalu klik simpan template.


<dl class='commentlist'><b:loop values='data:post.comments' var='comment'>
<li class='comment' id='li-comment'><div id='commentblock'><div class='comment-author vcard'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/></b:if>
<a expr:name='data:comment.anchorName'/><b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/></b:if><div class='author-name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><b:else/>
<data:comment.author/></b:if></div></div><div class='comment-meta'>            
<a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/></div><div class='comment-body'>
<div class='sg1'/><div class='sg2'/><b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span><b:else/><p><data:comment.body/>
<span class='interaction-iframe-guide'/></p></b:if></div></div></li></b:loop></dl> 

Baiklah sobat cukup sekian untuk ini , jika ada yang masih kurang paham dengan widget diatas , silakan tinggalkan pertanyaan anda di komentar atau di chatbox blog ini .

4 comments:

  1. keren mas efeknya, dah tak lihat demonya

    ReplyDelete
  2. @ rizkyone : hehehe , makasih mas

    @ Alumni : makasih atas masukkannya

    ReplyDelete
  3. wah kalau copas yang kreatif sedikit donk

    ReplyDelete


Silakan kirimkan komentar anda entah itu kritik atau saran anda dan mohon maaf jika komentar anda tidak mendapatkan tanggapan karena saya tidak selalu online 24 jam