Merubah Tampilan Tag Cloud Dengan CSS

Setelah sekian lama tidak pernah menulis soal trik blogger karena kesibukan di dunia offline, akhirnya diriku berkontribusi juga, meski dengan materi seadanya.

Untuk itu, diperlukan pengaturan tertentu, sehingga kita dapat mengatur posisi label tag cloud, apakah rata kiri, rata kanan atau mungkin center.

Kali ini, saya akan mencoba berbagi mengenai salah satu widget yang bisa dikatakan cukup digemari oleh para bloggers. Anda tentu sudah mengenal "Tag Cloud" bukan?. Salah widget bawaan blogger yang belum lama ini diluncurkan. Tag cloud ini dilounching bertepatan dengan ulang tahun blogger beberapa waktu yang lalu.

Tag cloud blogger memiliki sedikit keunggulan, terutama pada pengaturan jumlah label atau kategori content yang bisa kita tentukan sendiri. Paling tidak, fasilitas widget tag cloud ini mampu menjawab kebutuhan dan keinginan para pengguna blogger. Seperti yang kita ketahui, bahwa sebelumnya, widget tag cloud hanya dimiliki oleh blog dengan platform wordpress.

Jika kita perhatikan, setelah memasang widget tag cloud secara default (dasar) di blog, terlihat ada yang sedikit janggal. Yakni posisi label yang rata kiri dan kanan. sehingga terlihat jelas ada yang kosong di antara satu label dengan label yang lainnya, yang cukup membuat tag cloud ini tak sedap dipandang mata. Untuk itu, diperlukan pengaturan tertentu, sehingga kita dapat mengatur posisi label apakah rata kiri, rata kanan atau mungkin center. Disamping itu, tentu saja pengaturan jenis huruf, besar huruf dan warna, juga merupakan elemen penting yang tidak boleh terlupakan. Nah, untuk merubah tampilan tag cloud ini, silahkan ikuti tutorial di bawah ini.

Langkah pertama, seperti biasa Anda harus terlebih dahulu login di account blogger Anda. Masuk kehalaman edit HTML. Untuk merubah tampilan tag cloud ini, Anda tidak pernah mencentang expand widget. Setelah itu, masukkan CSS Code di bawah ini, tepat di atas kode ]]></b:skin> :

/* Tag Cloud or Label Cloud
----------------------------------------------- */
.cloud-label-widget-content {text-align: left; font-size: 18px; letter-spacing:-.1px}
.label-size-1 a, .label-size-2 a, .label-size-3 a, .label-size-4 a, .label-size-5 a {color: #000000; border-bottom: 1px dotted #555 }
.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 {color: #D74C07; text-decoration:none }

Catatan penggunaan CSS code tag cloud :

• Warna merah yang bertuliskan text-align, adalah kode penempatan posisi atau margin label. And tinggal menyesuaikannya, apakah menggunakan left, right atau center. Sesuaikan dengan selera Anda.
• Warna biru adalah besar huruf dasar dari tag cloud. Silahkan disesuaikan dengan besaran huruf yang Anda inginkan.
• Warna hijau adalah warna label tag cloud, dan
• Warna kuning adalah warna hover tag cloud, yakni warna yang akan terlihat ketika mouse kita arahkan.

Langkah terakhir, silahkan simpan atau save template Anda, dan lihat hasilnya.