30 October, 2009

Modif Tampilan Label Cloud Blogger

Harap coba modif label cloud ini, pasti anda tertarik!!!

Ini aku kasih caranya :

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 :


  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 }

5. Klik Tombol SIMPAN TEMPLATE
6. Selesai.


Sekarang silahkan lihat label cloud anda, jika berhasil maka tampilannya akan sedikit berbeda daripada sebelumnya.

Selamat mencoba!


sumber : http://kolom-tutorial.blogspot.com/2009/08/modif-tampilan-label-cloud-blogger.html