19 Des 2012

Modifikasi label blogspot menjadi 2 kolom

Label atau Kategori pada blog adalah sebuah kata yang digunakan untuk mengklasifikasi artikel blog. Artikel tersebut akan ditempatkan dimana dan berdasarkan kelompok

label atau kategori yang mana. Pengertian label atau Kategori dalam hal ini hanya untuk mengelompokan artikel-artikel pada blog, sehingga memudahkan kita atau orang lain yang berkunjung pada blog.

Sebagai contoh, jika anda membuat sebuah artikel yang membahas tentang sesuatu misalnya makanan Bakso, Soto, Rames, Nasi uduk, maka label yang tepat untuk artikel tersebut adalah Masakan. Contoh yang lain misalnya artikel yang membahas tentang buku, pulpen, pensil, staplers, stempel, maka label yang tepat adalah Perlengkapan Kantor.

Saya kira dua contoh tadi sudah dapat memberi gambaran bagi anda sehingga mengerti apa yang dimaksud dengan label.

Blogspot hanya menyediakan widget label dalam 2 bentuk tampilan saja, yakni:
  1. Label dengan tampilan Daftar List vertikal
  2. Label dengan tampilan Cloud

label tampilan cloud
Label dengan tampilan Cloud

Label dengan tampilan daftar list
Label dengan tampilan List vertikal


Jika anda merasa sudah cukup puas dengan tampilan tersebut, tidak perlu repot-repot bongkar template edit html yang belum tentu berhasil. Namun bagi yang merasa tidak suka dengan tampilan tadi, anda bisa memodifikasi tampilan label menjadi bentuk yang lain.

Dalam project ini akan dibahas cara memodifikasi tampilan Label menjadi dua kolom. Langkah-langkahnya tidak sesulit yang dibayangkan. Hanya dengan menambahkan sedikit kode CSS, Label dengan tampilan dua kolom pun segera anda miliki.

Langkah yang pertama yaitu :
  1. Login blogger.com
  2. Pilih Rancangan
  3. Klik tab Tambahkan Elemen (Gadget)
  4. Pilih Label lalu Simpan, seperti yang dijelaskan pada gambar dibawah ini

langkah menambahkan widget label
Pengaturan Label tampilan Daftar List


Selanjutnya lakukan Langkah Kedua :
1. Klik tombol Rancangan dan pilih Edit HTML
2. Cari kode ]]></b:skin>
3. Jika ketemu copy paste kode dibawah ini di atas kode ]]></b:skin>

#Label1 li {
float:left;
width:
48%;
}
4. Terakhir Klik Simpan
Dan jika anda melakukannya dengan benar, maka hasilnya akan seperti contoh gambar berikut :

membuat Label list dua kolom
Label dengan tampilan dua kolom

Selamat mencoba dan semoga berhasil.

Tidak ada komentar:

Posting Komentar