My Opera Sidebar Links

My opera sidebar links, elemen ini berada di area sidebar blog my opera, sangat simple hanya menggunakan satu class khusus bernama "sidelinx" dan tag list dan paragraf. Ya, hanya itu.. saya pikir tidaklah terlalu sulit untuk mengerti, meskipun, kita adalah newbie yang baru seminggu belajar CSS my opera.
Semangatkan tekad anda betapa mudahnya belajar CSS my opera.
Pada class sidelix, standar CSS dari my opera community tidak terapkan warna khusus baik untuk background ataupun warna text, semua sudah disesuaikan di global CSS sidebar akan tetapi agar para newbie bisa belajar dengan mudah saya sengaja menambahkan warna background dan warna text, dengan itu saya berharap para newbie bisa merubah warna sebelum melangkah ke tingkat selanjutnya.

#side .sidelinx li { padding:3px 0; border-bottom:1px solid #222; background:#131313; }
#side .sidelinx a:link { color:#f90; }
#side .sidelinx a:hover { font-weight:bold; }
#side .sidelinx a:visited { color:#ddd; }
#side .sidelinx p { color:#eee; }

Pengertian code css diatas adalah:

slidelinx li : dalam area list mencakup nama dan deskripsi link, style deklarasi memuat properti padding, border dan background.
slidelinx a:link : adalah nama link/text link, masih utuh belum ada mouse belum juga di klik, style deklarasi memuat properti color
slidelinx a:hover : adalah nama link/text link, posisi mouse berada diatas link, style deklarasi memuat properti font-weight
slidelinx a:visited : adalah nama link/text link, link sudah di klik, style deklarasi memuat properti color
slidelinx p : adalah text deskripsi, style deklarasi memuat properti color

Bukankah code CSS diatas sangat simple? Meskipun anda adalah newbie yang baru pertama kali belajar CSS bahkan belum mengerti sama sekali anda tidak perlu khawatir, tinggal copy semua CSS, lalu anda pergi ke Account -> Design -> klik customize your design, kemudian paste di kotak area yang berlabel CSS code. Setelah itu tandai colom Use my custom style sheet together with the current blog design, terakhir klik Save. Selesai.. tampilan sidebar links sudah berubah.. Oop! warna kurang sesuai dengan blog my opera anda, hilang selera, tidak masalah,anda tinggal menganti code warnanya:
Contoh:
untuk warna background: #side .sidelinx li {padding:3px 0; border-bottom:1px solid #222; background:#131313;}
Untuk warna text link: #side .sidelinx a:link {color:#f90;}
Warna bisa anda ganti dengan color name tanpa menggunakan "#" contoh {color:blue;}
{background:white;}

Contoh Penulisan CSS ID Dan Class Pada Halaman HTML

<div class="sidebox sidelinx">
<h2>My link</h2>
<div class="pad">
<ul>
<li>
<a href="http://www.shofnet.com" target="_blank">link1</a><p>Ini adalah blog front page</p></li>
<li>
<a href="http://www.shofnet.com/slideshow/" target="_blank">link2&</a><p>Ini adalah slide show</p></li>
</ul>
</div></div>

CATEGORY : Myopera, Sidebar TAG : belajar, code, css, desain, myopera, standar at Monday, 1 November, 2010