Modifikasi tampilan label cloud blogger



Halloo...ketemu lagi dalam artikel saya kali ini,dan kali ini artikel ini akan membahas tentang cara memodifikasi tampilan label cloud blogger, ich...jadul banget postingannya...haha, maaf buat para master blogger, kalau merasa ini artikel udah jadul,biarpun dah agak ketinggalan tapi nggak salahkan kalau saya posting di blog saya yang juga pemula...bener nggk shob??








ya udah ilmunya kita langsung bagikan.

caranya guampang banget...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, maka keyword tersebut
akan otomatis di cetak lebih besar daripada keyword lainnya yang jarang
di buat.




Code dasar CSS dari label cloud blogger di bawah ini:


.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.



Cukup keterangannya. kita langsung ke cara pembuatannya:

1. Login ke account blogger anda.
2. Klik Layout --> Edit HTML.
3. Cari kode
]]></b:skin>.
4. Copypaste kode di bawah ini persis diatas 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.Simpan template, selesai.





Bagi anda yang sudah kenal banget dengan code CSS tentu saja anda tinggal mengatur beberapa dari code yang saya berikan di atas, warna,bentuk hurup dsb.





Selamat mencoba.

10 komentar:

CHUGY-GOGOG mengatakan...

sory jhon br brknjung ni....hhaaaa. mantab jg ni.!!!! chugygoGoG

NENSA MOON mengatakan...

Wah...blognya penuh dgn tips n info yg menarik n tentunya sangt berguna buat para blogger.
Thx sdh berbagi ilmu disini.

Fadliansyah(fo_fot) mengatakan...

@chugy: gpp bos,,
@nensa: sama2,,makasih juga atas kunjungan dan komentnya..

J H A W mengatakan...

menarik mas tutornya.. blogwalking sekalian nambah ilmu.. tp contoh lo udh jadi kok ga ada ya..

Fadliansyah(fo_fot) mengatakan...

@jhaw: buru-buru mas pas mostingnya kemaren..jdinya begitu lah, liat categories saya begitulah hasilnya mas, makasih masukannya mas, ntr saya benahi..

rasiqzone mengatakan...

label-nya keren mas..
ditempatku ada tips label blogumus (berputar)..
keep posting..

Satrya mengatakan...

Tutorial yg menarik mas, teruskan postingannya y...

Fadliansyah(fo_fot) mengatakan...

@mas rasiq: terimakasih mas, oke saya langsung meluncur kesana..
@kang satrya: makasih kang..

NANRA mengatakan...

krenn

Miftahul Fuji Handoko mengatakan...

koq gak fungsi ya di blog saya! mohon bantuaanya sob, maklum newbe makasih?

Daftar Blog Dofollow Juli 2011

Posting Komentar

 
 
 

About Me

Foto Saya
Fadliansyah(fo_fot)
hal yg di lakukan dgn baik+niat yg baik...psti berhasil dgn baik.
Lihat profil lengkapku
Ada kesalahan di dalam gadget ini

Pengikut