My Opera Sidebar Latest Comments

Berikut ini adalah css untuk tampilan latest comments di sidebar blog my opera anda.
Jika anda berminat untuk merubahnya silahkan anda mempelajarinya.
Ingatlah, yang saya tuliskan ini hanya sebuah arahan, jadi bagi anda yang sudah mahir css saya sarankan tutup halaman ini jangan sia-siakan waktu anda. Tapi bagi anda yang masih newbie silahkan anda teruskan.

Ini untuk elemen pic kecil yang tampil di sebelah kanan

.userpic {   border:1px solid #000;   background:#222;   }
.userpic {   width:46px;   height:36px;   margin:0 0 6px 6px;   float:right;   }
.userpic img {   display:block;   margin:3px;   }

Ini untuk list pada element latest comment anda

#newcomments li {   border-top:1px solid #333;   padding:6px 0;   }

Anda bisa menambahkan background color pada keseluruhan list dengan menambahkan css dibawah ini

#newcomments li {    background:#036;   }

List pada elemen latest comment dibagi menjadi dua. Satu list standar dan satunya lagi menggunakan class even. Jika anda ingin membuat background warna yang berbeda pada setiap list. Anda bisa menambahkannya pada class even seperti di bawah ini

#newcomments li.even {    background:#069;   }

Selain yang sudah di sebutkan diatas tentu saja anda juga bisa merubah warna text link atau text user pada setiap list, atau keseluruhan list.

Contoh Penulisan CSS ID Dan Class Pada Halaman HTML

<div class="sidebox" id="newcomments">
<h2>Latest comments</h2>
<div class="pad">
<ul class="nobullets usercom">
<li>
<div class="userpic"><a href="/user/"><img src="picture.jpg" width="40" height="30" alt="photo"></a></div>
<p><b><a href="/user/" class="username">user</a></b></p>
<p><a href="" class="usertext">comment text
</a></p></li>
<li class="even">
<div class="userpic"><a href="/user/"><img src="picture.jpg" width="40" height="30" alt="photo"></a></div>
<p><b><a href="/user/" class="username">user</a></b></p>
<p><a href="" class="usertext">comment text</a></p></li>
</ul>
<div class="clear"></div></div></div>

CATEGORY : Comments, Myopera, Sidebar TAG : belajar, code, css, desain, myopera, standar at Friday, 7 May, 2010