Cara Mudah Membuat Tampilan Label Model Cloud

Belum lama ini blogger mengeluarkan fitur baru untuk tampilan label / kategori, yaitu support untuk label model cloud. Walaupun aq sedikit ketinggalan, tetapi tetep pengen nulis postingan ini He3 ... Karena emang blogku ini spesialisasi bagi para pemula seperti saya sob, jadi buat para master blog harap memaklumi. Yup, Kali ini aku akan menulis bagaimana cara memodifikasi tampilan label cloud blogger yang masih standar, modifikasinya cuma ringan kok, hanya mengubah tampilanya saja yang semula cuma satu warna menjadi banyak warna serta mengubah ukuran dari huruf2-nya. Dengan mengubahnya tampilanya akan terlihat semakin menarik, coba aja lihat di blogku ini sob ... Gmn menarik bukan ?

Caranya cukup mudah yaitu dengan menambahkan beberapa kode CSS sesuai dengan keinginan anda. Pada dasarnya label cloud yaitu menampilkan label dengan tampilan huruf dengan ukuran yang berbeda, jika suatu label semakin banyak di buat, maka keyword tersebut akan otomatis di cetak lebih besar daripada keyword lainnya yang jarang di buat.

Kode dasar CSS dari label cloud blogger adalah sebagai berikut :

.label-size-1 a { }
.label-size-2 a { }
.label-size-3 a { }
.label-size-4 a { }
.label-size-5 a { }

Terlihat bahwa ada 5 tingkatan huruf yang bisa anda atur, .label-size-1 a adalah terkecil dan .label-size-5 a yang terbesar. Dengan mengetahui kode dasar tersebut tentu saja anda bisa menambahkan beberapa pengaturan terhadap label cloud anda, namun tentu saja anda harus sedikit familiar dengan kode CSS.

G usah banyak cingcong, langsung aja cara buatnya :
1. Login ke account blogger anda.
2. Klik Layout --> Edit HTML.
3. Cari kode ]]></b:skin>.
4. Copypaste kode di bawah ini persis diatas kode ]]></b:skin>.

.label-size-1 a {
font-size: 12px;
text-decoration: none;
}
.label-size-2 a {
font-size: 14px;
text-decoration: none;
color:#cd9f01;
}
.label-size-3 a {
font-size: 15px;font-family: Arial, Tahoma, Verdana;text-decoration: none;
}
.label-size-4 a {
font-size: 18px;
font-weight:bold;
text-decoration: none;
color:#ea5a04;
}
.label-size-5 a {
font-size: 24px;
text-decoration: none;
}


.label-size-1 a:hover,
.label-size-2 a:hover,
.label-size-3 a:hover,
.label-size-4 a:hover,
.label-size-5 a:hover { text-decoration:underline }

5. Klik Tombol SIMPAN TEMPLATE dan selesai.

Bagi yang sudah familiar dengan CSS tentu saja anda tinggal menambahkan berbagai pengaturan terhadap kode tersebut. Mudah bukan untuk membuatnya ... Sekarang Anda tinggal melihat Tampilan Label baru Anda, akan tampak berbeda dan semakin menarik. Terima kasih Kang atas info-nya.

Semoga membantu dan Happy Blogging ...

Artikel Terkait: