My Opera Sidebar Favorites

My opera sidebar favorites. Semua blogger my opera sudah pasti tau fungsinya, yaitu menampilkan foto-foto album dan blog favorit di halaman about sidebar.
Elemen ini menggunakan tag div dan diberikan sebuah id unik bernama "myfavs" sebagai id pemilih untuk menata gaya dan letak elemen tersebut. Terus, seperti apakah code CSS yang digunakan pada standar desain? Yup, tetap belajar CSS bareng shofnet.com klik

Sebenarnya pada id myfavs ini semua properti dan nilai yang terkandung dalam deklarasi mempunya kesamaan dengan id recent visitors, bahkan sama persis (standar CSS my opera) belum di rubah. Lihat code CSS di bawah ini:

#myfavs li {float:left; width:78px; height:78px; margin:0 0 3px 0; text-align:center; overflow:hidden; font-size:10px;}

List dalam id myfavs ini memuat gambar foto dan text link, jumlah list semua ada enam.

#myfavs a, #myfavs a:link, #myfavs a:visited { display:block; text-decoration:none; padding:5px; }
#myfavs a:link, #myfavs a:visited, #myfavs a:active { background:#000 url(visitors2.gif); }
#myfavs li a:hover { background-position:100% -78px;  }

Semua code diatas ini khusus memberikan gaya pada link, meliputi a, a:link, a:active a:hover dan avisited. baca disini pengetian tentang a

#myfavs .mid { margin:0 3px 3px 3px; }
#myfavs img { display:block; width:68px; height:51px; margin-bottom:3px; }
#myfavs span { width:100%;  height:14px;  line-height:14px;  overflow:hidden; }

Class mid, terapkan untuk list no urut 2 dan 5 dengan.
Img, khusus untuk gambar.
Span, untuk text dibahan gambar.

Untuk menghindari internet macet disarankan mengerjakan pengeditan CSS menggunakan desain modus offline

Contoh Penulisan CSS ID Dan Class Pada Halaman HTML

<div class="sidebox" id="myfavs">
<h2>Favorites</h2>
<div class="pad">
<ul class="nobullets">
<li><a href="/myAriewahyu/albums/show.dml?id=932496" title="photos: ska-one by myAriewahyu"><img src="http://files.myopera.com/myAriewahyu/albums/932496/thumbs/Foto075.jpg_thumb.jpg" width="68" height="51" alt="ska-one by myAriewahyu"><span class="block">ska-one</span></a></li>
<li class="mid"><a href="/m2m99/albums/show.dml?id=563817" title="photos: PhotoImpact Designs by m2m99"><img src="http://files.myopera.com/m2m99/albums/563817/thumbs/I%20Love%20You%20PhotoImpact%20Design%20by%20mrm.jpg_thumb.jpg" width="68" height="51" alt="PhotoImpact Designs by m2m99"><span class="block">PhotoImpact Designs</span></a></li></ul>
<div class="clear"></div></div></div>

CATEGORY : Myopera, Sidebar TAG : belajar, code, css, desain, myopera, standar at Wednesday, 20 October, 2010