My Opera Blog Archive

Masih tetap semangat belajar desain CSS my opera? Baiklah, post kali ini membahas code CSS yang digunakan pada halaman “Blog Archive” di my opera. Secara ringkas, pada elemen html blog archive menggunakan tag div, dan untuk menentukan gaya elemen ini maka diberikan sebuah id pemilih bernama "arc" berfungsi untuk mengontrol keseluruhan elemen blog archive, kemudian didalam elemen ini diberikan lagi sebuah tag div dengan class pemilih bernama "month" berfungsi mengontrol tata letak hasil post pada setiap bulannya. Apa itu id dan class pemilih, lihat di css basic

Sekarang mari kita belajar code CSS untuk blog archive my opera:

.month { clear:both; }
.month a { display:block; text-decoration:none;}
.month h2 a, .month span { color:#111; }
.month h2 a:hover { color:#269; }
.month h2 { font-size:1.3em; border-bottom:1px dotted #666; line-height:2.2; }
.month span { padding-right:4px; }

Disetiap text nama bulan seperti halnya Agust, October dll berupa text link. menggunakan tag h2, dalam penataan gaya diberikan properti color dengan nilai hex #111.
Seadangkan a:hover pada text bulan diberikan properti color dengan nilai hex #269. Apa itu a:hover, lihat di my opera menu. Untuk sementara saya belum bisa meneruskan tentang CSS basic anda bisa mengunjungi www.w3schools.com untuk mendapatkan tutorial css lengkap.

.month li { font-size:1em; border-bottom:1px dotted #666; line-height:2.2; }
.month li a:hover { background:#f9f9f9; }

Di dalam class month terdapat banyak li berfungsi untuk mengatur setiap judul post dengan properti border, font-size dll. Jika anda punya hasrat ingin merubah nilai atau menambahkan properti yang berbeda, tentu anda bisa mengerjakannya dengan mudah.

Code dibawah ini tidak dituliskan dalam CSS standar, hanya sebgai tambahan jika anda ingin memberikan deklarasi yang berbeda untuk blog archive my opera anda.

#arc {}
h2#blogarchive {}

h2#blogarchive id ini untuk judul halaman bukan nama bulan.
Agar lebih mudah belajar desain css my opera, saya selalu menyertakan source halaman html. dan jika perangkat anda mendukung disarankan untuk menggunakan desain modus offline untuk menghemat waktu anda dari koneksi jaringan yang sering macet.

Contoh Penulisan CSS ID Dan Class Pada Halaman HTML

<div id="arc"> <h2 id="blogarchive">Blog Archive</h2> <div class="month"> <h2><a href="/joanz-2010/archive/monthly/?month=201010">October 2010</a></h2> <ul class="nobullets"> <li class="day23"><a href="/joanz-2010/blog/?id=19772622"><span>23rd</span> Ratapan kasih</a></li></ul> </div> <div class="month"> <h2><a href="/joanz-2010/archive/monthly/?month=201008">August 2010</a></h2> <ul class="nobullets"><li class="day31"><a href="/joanz-2010/blog/?id=16573392"><span>31st</span> sahabat>/a></li></ul> </div></div>