Cara Membuat Dan Menampilkan Widget Label Cloud Cantik Pada Blogger

Selamat siang sob,,
Semoga dalam keadaan berbahagia...

Pada kesempatan kali ini saya akan share post tentang Cara Membuat Dan Menampilkan Widget Label Cloud Cantik Pada Blogger,yang mana barangkali sobat semua ingin mencobanya dan menjadikan tampilan labels di blog yang akan dibuat atau malah yang sudah dibuat.Agar pengunjung blog yang sedang singgah dan bertamu merasa betah karena tampilan labels nya enak dilihat.Hehe

Tanpa panjang lebar,,silahkan ikuti cara-cara nya :

1. Masuk akun Blogger sobat.
2. Sobat harus pasang Labels terlebih dahulu. >>pilih tata letak >> Tambahkan Gedget >> Labels.
* Lihat screenshot ini !!

  

3. Pilih Tamplate >> Edit HTML

4. Cari kode " ]]></b:skin> ",untuk mempercepat gunakan dengan Ctrl+F pada Keyboard sobat.

5. Jika sudah ketemu,Copy dan Paste kan kode dibawah ini,dan letakan di atas kode "]]></b;skin>".

/*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/ .label-size{ margin:0; padding:0; position:relative; } .label-size a , .label-size span{ float:left; height:24px; line-height:24px; position:relative;font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; } .label-size a:before , .label-size span::before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent;border-style:solid; border-width:12px 12px 12px 0; } .label-size a:after , .label-size span::after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px;height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover , .label-size span::hover { background:#555;} .label-size a:hover:before , .label-size span::hover::before{border-color:transparent #555 transparent transparent;}

6. Simpan Tamplate.

Demikian lah postingan tentang Cara Membuat Dan Menampilkan Widget Label Cloud Cantik Pada Blogger,semoga dapat bermanfaat.

Salam Zae

Bagikan ke :