Seri Tutorial "Kang Rohman"

Modif Tampilan Label Cloud Blogger
Posted: 27 Aug 2009 04:39 PM PDT
Modif Tampilan Label Cloud Blogger - Kemarin kang Rohman telah menginformasikan tentang fitur baru yang di buat oleh blogger yaitu label cloud, ternyata ada yang berpendapat bahwa tampilan label cloud tersebut dirasa kurang menarik untuk dilihat. Jika sekiranya demikian, sebenarnya anda bisa melakukan modifikasi terhadap tampilan label cloud tersebut, mungkin saja anda ingin mengubah warna huruf nya, besar huruf nya, jenis huruf nya, atau yang lainnya, 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 ( contoh key word Blogspot Tutorial ), 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. Contoh kode CSS untuk mengatur tampilan label cloud :
.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 } Bagi yang sudah familiar dengan CSS tentu saja anda tinggal menambahkan berbagai pengaturan terhadap kode tersebut.

Berikut contoh cara memasukkan kode CSS tersebut ke dalam template anda :

Silahkan login ke blogger dengan ID anda.
Klik Tata Letak.
Klik tab Edit HTML.
Copy lalu paste kode berikut persis di atas kode ]]>

.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 }
Klik Tombol SIMPAN TEMPLATE
Selesai.
Sekarang silahkan lihat label cloud anda, jika berhasil maka tampilannya akan sedikit berbeda daripada sebelumnya.
Selamat mencoba!