My Opera Sidebar Recent Visitors

Dibawah ini adalah elemen recent visitors di sidebar blog my opera. Elemen ini menggunakan sebuah id unik “visitors” yang didalamnya memuat beberapa tag , yaitu: “li“, “a“, “img“, “span” dan sebuah class “mid“. Class mid diterapkan khusus pada list nomer urut 2 dan 5 dengan properti margin untuk menyesuaikan jarak dengan list lainnya. Lihat pada code dan juga contoh halaman html dibagian bawah code.

#visitors li { float:left; width:78px; height:78px; margin:0 0 3px 0; text-align:center; overflow:hidden; font-size:10px;  }
#visitors a, #visitors a:link, #visitors a:visited { display:block; text-decoration:none; padding:5px; }
#visitors li, #visitors a:link, #visitors a:visited, #visitors a:active { background:#000 url(visitors2.gif); }
#visitors li a:hover { background-position:100% -78px;  }
#visitors .mid { margin:0 3px 3px 3px; }
#visitors img { display:block; width:68px; height:51px; margin-bottom:3px; }
#visitors span { width:100%;  height:14px;  line-height:14px;  overflow:hidden; }

Contoh Penulisan CSS ID Dan Class Pada Halaman HTML

<div class="sidebox" id="visitors">
<h2>Recent visitors</h2>
<div class="pad">
<ul class="nobullets userlist">
<li><a href="/raendi/"><img src="34897222_s.jpg" width="68" height="51" alt="raendi"><span class="block">raendi</span></a></li>
<li class="mid"><a href="/marc-li/"><img src="46571212_s.jpg" width="68" height="51" alt="marc-li"><span class="block">marc-li</span></a></li>
<li><a href="/amitvanmali/"><img src="37836532_s.jpg" width="68" height="51" alt="amitvanmali"><span class="block">amitvanmali</span></a></li></ul>
<div class="clear"></div></div></div>

CATEGORY : Myopera, Sidebar TAG : belajar, code, css, desain, myopera, standar at Monday, 18 October, 2010