My Opera Sidebar Shoutbox

Anda ingin merubah tampilan shoutbox di sidebar blog anda. Dibawah ini adalah css yang perlu anda edit. Silahkan anda utak-atik sesuai selera anda, anda bisa mencocokkan dengan html yang sudah tertera dibawahnya. Jika anda masih bingung anda bisa tanyakan melalui kotak komentar yang sudah tersedia.

#shout {   width:170px;   }
#shoutbox form {   padding-bottom:10px;   }
#side #shoutbox .none {   padding:0 0 5px 5px;   }
#submitshout {   width:56px;   margin-left:4px;   }
#shoutbox li {   padding:0 0 11px 0;   margin-bottom:10px;   }
#shoutbox p {   padding-top:4px;   }
#shoutbox .userpic {   margin-bottom:-3px;   }
#shoutbox blockquote {   clear:both;   margin:0;   padding:0;   font-style:normal;   }
#shoutbox blockquote p {   padding:18px 10px 0 10px;  }
#shoutbox li {   background:#222 url(sprites3.png) -240px bottom no-repeat;   color:#999;   }
#shoutbox .shout {   background:#161616;   }
#shoutbox blockquote {   background:transparent url(sprites3.png) -240px -108px no-repeat;   color:#fff;   }
#shoutbox blockquote p {   background:transparent url(sprites3.png) 0 18px no-repeat;   }

Dibawah ini adalah source html elemen shoutbox

<div class="sidebox" id="shoutbox">
<h2>Shoutbox>/h2>
<div class="pad">
<form id="shout-form" action="/joanz-2010/blog/shout.pl" method="post" name="shout-form">
<div><input type="text" name="shout" value="" id="shout" maxlength="255"><input type="submit" value="chat" id="submitshout"></div></form>
<ul id="shout-list" class="nobullets usercom"><li><div class="shout"><div class="userpic"><img src="http://static.myopera.com/upic/pool1/0x/kkh/bUuUMKeSIMRx8kFutIYlIU/14620371_t.jpg" width="40" height="30" alt="photo"></div>
<p><b><a href="/joanz-2010/" class="username">joansaputri</a></b><br>2010-03-27 22:33:26</p>
<blockquote><p>blibet iku opo?</p></blockquote>
</div></li></ul></div></div>

CATEGORY : Myopera, Sidebar TAG : belajar, code, css, desain, myopera, standar at Tuesday, 27 April, 2010