Cara Memodifikasi Bullet List Blog Dengan Css

Setelah ganti template baru, kali ini saya akan berbagi kepada kalian tutorial tentang bagaimana cara memodifikasi atau mengedit tampilan bullet list pada blog kita hanya menggunakan css supaya menjadi keren. Pertama, kita harus tahu terlebih dahulu, apa itu bullet list? Berikut ini adalah contohnya :

• Nama : Yonda Wahyu Kurniawan
• Jenis Kelamin : Laki-Laki
• Alamat : Tuban, Jawa Timur, Indonesia

Bagaimana? Sudah mengerti. Untuk membuatnya di postingan, kalian bisa mencarinya di post editor blogger. Di sebelah Link, Insert Image, dsb. Tapi tampilannya akan sedikit berbeda dengan di atas. Mengapa? Karena saya sudah memodifikasinya. Bagaimana caranya? Oke, langsung saja. Berikut ini adalah caranya :

• Pertama, buka dulu dasboard blog kalian.
• Masuk ke menu Template.
• Pilih Edit HTML.
• Cari kode ]]></b:skin>.
• Masukkan kode di bawah ini tepat di atas kode ]]></b:skin>.

.post-body ul,
.post-body ol{
margin: 1em;
padding-left: 1em;
}
.post-footer ul{
margin: 1em;
margin-top: -0.5em;
padding-left: 1em;
}
.post-body ul li,
.post-footer ul li {
list-style-image: url(http://i1143.photobucket.com/albums/n629/gerduren/uncheck-1.gif);
border-bottom: 1px solid #ccc;
padding: .2em 0 .2em .5em;
}
.post-body ul li:hover,
.post-footer ul li:hover {
cursor: pointer;
list-style-image: url(http://i1143.photobucket.com/albums/n629/gerduren/check-1.gif);
background-color: #f2f2f2;
color: #B1291F;}

•  Terakhir tinggal disimpan dan dilihat hasilnya.

Keterangan :

Kode yang berwarna ORANGE adalah kode url gambar bullet. Kalian bisa menggantinya.

Kode yang berwarna ABU-ABU adalah kode yang menandakan list memakai border di bagian bawah. Kalian bisa menghapusnya agar border ada i keempat sisinya atau menggantinya dengan -left, -right, atau -top.

Kode yang berwarna HIJAU adalah kode ukuran border. Kalian bisa menyesuaikannya.

Kode yang berwarna UNGU adalah kode jenis bordernya. Kalian bisa menggantinya.

Kode yang berwarna PINK adalah kode warna border. Kalian bisa menyesuaikannya.

Kode yang berwarna BIRU adalah kode url bullet saat list diarahi kursor (Efek hover). Kalian bisa menggantinya.

Kode yang berwarna KUNING adalah kode warna background list saat list diarahi kursor.

Kode yang berwarna CYAN adalah kode warna teks list saat list diarahi kursor.

Oke, sudah selesaikan? Mudah sekali. Dalam kode di atas, list kalian akan terlihat seperti check list yang di centang saat kita arahi kursor. Sekian artikel saya kali ini. Semoga bermanfaat. Jangan lupa tinggalkan komentar dan klik tombol like di bawah ini.

Share :

Facebook Google+ Twitter