Halaman

CSS : UL and LI for Previous Post

Blogspot mencantumkan konten Profile, Previous Post, Archives dan Links di bagian Sidebar, atau bagian sisi kanan / kiri dalam sebuah blog.Khusus untuk bagian Previous Post, Archives dan Links yang mengurut daftar isinya menjadi beberapa tautan yang aktif, maka kita bisa melihat daftar tersebut ditampilkan menjadi barisan yang disusun ke bawah.Hal ini berkat penggunaan kode HTML <ul> dan <li>.

UL merupakan singkatan dari Unordered List, sedangkan LI adalah List Item.Jadi keduanya akan dimunculkan dalam satu daftar rincian item yang sekategori.

Secara default maka bila kita menggunakan UL dan LI kita akan melihat daftar item dibawah nama kategori akan dimunculkan menjorok ke dalam.Pada beberapa pemilik blogspot, penampilan ini sering diakali untuk diurut secara lebih rapi.Yakni nama kategori dan list dibawahnya berada dalam kolom yang sejajar.Untuk itu, bila kita ingin merapikan bagian item ke dalam satu baris yang sama dengan nama kategorinya kita membutuhkan bantuan CSS.

Berikut ini gambar untuk memudahkan pemahaman di atas.









keterangan : previous post adalah nama kategori, sedangkan etika (akhlak)pemimpin dan list dibawahnya termasuk golongan list item

Gambar sebelah kiri ini dimaksud dengan tampilan list dengan format default.Sedangkan gambar pada sisi kanan adalah tampilan setelah menggunakan bantuan tag CSS.Untuk itu kita bisa menambahkan atribut margin di dalam kode CSS template.

#sidebar ul {
background:url("http://photos1.blogger.com/blogger/4452/1518/320/divider.gif") no-repeat center bottom;
margin:0 0 15px; /* ini berarti margin atas 0 kanan dan kiri 0 bawah 15px */
}

Dengan tag CSS diatas maka tampilan list item dibawah nama kategori dalam sidebar akan diberi rapat kanan dan kiri 0px, yang berarti akan ditampilkan sejajar dengan nama kategori.

Pengaruh penggunaan atribut CSS dalam UL dan LI ini akan semakin terlihat rapi terutama pada beberapa blog yang memiliki list yang mengandung teks/huruf yang panjang, seperti pada Previous Post dan Links.Dengan begitu pemenggalan tautan akan menjadi semakin kentara.

Tidak ada komentar:

Posting Komentar

Kamu bisa dapetin ilustrasi wajah yang sesuai dengan wajah kamu di moselo.com/Bikingemeys. Jangan lupa ada promo jika pesan dari aplikasinya langsung.