My Opera Sidebar Friends List

Mungkin anda punya minat untuk merubah tampilan friends list di sidebar blog anda. Untuk anda yang sidebar blog nya masih standar, saya sarankan, jangan..! Alasannya, anda akan sedikit kesulitan membuat background bingkai foto yg lebih bagus dari aslinya. Tapi jika anda ingin punya gaya yang berbeda tidak ada salahnya anda pelajari kode css dibawah ini

.nobullets { margin-left:0;   list-style-position:outside;    list-style:none; }

Class nobullets ini tidak di khususkan untuk id friendz, ada banyak id lain yang tata letaknya ditentukan menggunakan class ini.

#friendz li { float:left;   width:118px;   height:108px;   margin:0 0 4px 4px; }
#friendz .first {   margin-left:0;   }
#friendz a:link, #friendz a:visited, #friendz a:active { display:block;   padding:6px 7px; }

#friendz li, #friendz a:link, #friendz a:visited, #friendz a:active { background:#000 url(/community/graphics/main/sprites3.png) -244px 0 no-repeat; }

Image background di tarik ke kiri 244px, klik disini untuk melihat gambarnya.

#friendz li a:hover {  background-position:-362px 0; }
#friendz img { display:block;   width:104px;   height:78px;   margin-bottom:3px; }
#friendz a { text-decoration:none;   display:block; }
#friendz span { width:100%;   height:13px;   line-height:13px;   overflow:hidden; }

Lihat script html berikut, anda bisa mencocokkannya dengan css diatas.

<ul class="userlist nobullets">
<li class="first"><a href="/user/"><img src="user_m.jpg" width="104" height="78" alt="user photo" title=""><span class="block">user1</span></a></li>
<li><a href="/user/"><img src="user_m.jpg" width="104" height="78" alt="user photo" title=""><span class="block">user2</span></a></li>
<li class="first"><a href="/user/"><img src="user_m.jpg" width="104" height="78" alt="user photo" title=""><span class="block">user3</span></a></li>
<li><a href="/user/"><img src="user_m.jpg" width="104" height="78" alt="user photo" title=""><span class="block">user4</span></a></li>
<li class="first"><a href=/user/"><img src="user_m.jpg" width="104" height="78" alt="user photo" title=""><span class="block">user5</span></a></li>
<li><a href="/user/"><img src="user_m.jpg" width="104" height="78" alt="user photo" title=""><span class="block">user6</span></a></li></ul>

CATEGORY : Myopera, Sidebar TAG : belajar, code, css, desain, myopera, standar at Friday, 9 April, 2010