Senin, 24 Mei 2010

Modifikasi Tampilan Label Cloud

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 :
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 { }
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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.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 ]]>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.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… :biggrin:


Artikel Terkait :

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)