Senin, 13 Juni 2011
Setelah kemarin membahas tentang widget , kini saya kembali menulis tentang widget.
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 :
5. Jika sudah ketemu maka copy kode dibawah ini lalu gantikan kode diatas dengan kode dibawah ini, lalu klik simpan template.
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 .
widget kali ini yaitu menimbulkan sebuah efek pada kotak komentar .
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>
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 :
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='"comment-author " + 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 <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 .
0 komentar:
Posting Komentar