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 :Blogger – Modifikasi Tampilan Label Cloud
1 2 3 4 5 | .label-size-1 a { } .label-size-2 a { } .label-size-3 a { } .label-size-4 a { } .label-size-5 a { } |
.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 }
Berikut contoh cara memasukkan kode CSS tersebut ke dalam template anda :
1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Copy lalu paste kode berikut persis di atas 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 }
6. Selesai.
Sekarang silahkan lihat label cloud anda, jika berhasil maka tampilannya akan sedikit berbeda daripada sebelumnya.
SeLamat Mencoba…
Terima kasih sudah singgah di blog ID CREATIVE «« jangan lupa tinggalkan komentarnya "thanks.