Cara Membuat Widget Label Cloud ala Wordpress untuk Blogger

Demo Image - Before

Jika sebelumnya saya memposting tentang Cara Membuat Widget MintShare Sosial Share Button Layout  Versi 1, 2, 3, 4, dan 5. Saya akan memposting lagi tentang Widget Label Cloud ala Wordpress.

Demo Image - After

Bagi para blogger yang menginginkan blognya terlihat profesional, ada baiknya mengubah tampilan Widget Label Defaultnya menjadi Widget Label Cloud ala Wordpress, disamping tampilannya cantik dan terlihat Profesional, Widget Label Cloud memiliki kelebihan, yaitu tidak menggunakan kode-kode javascript dan Jquery yang membuat loading blog kita lambat, namun menggunakan kode-kode CSS yang loadingnya ringan. Pada kasus kali ini, kita hanya sedikit mengutak-atik kode widget label default pada template blog kita dan sedikit menambahkan kode-kode CSS yang ringan.

Baiklah langsung saja saya akan jelaskan tentang Cara Membuat Widget Label Cloud ala Wordpress untuk Blogger di bawah ini:

 

»Cara Pemasangan« 

 

Sebelum memasang Widget ini, anda harus terlebih dahulu memasang WIdget Label Default dahulu. Sesuaikan dengan gambar berikut :

 

 

 

• Login account blogger kamu
• Pilih template
• Klik edit HTML
• Centang Expand Template WidgetCarilah kode
• Carilah kode ]]></b:skin>
• Setelah ketemu, pastekan kode CSS di bawah ini tepat diatas kode ]]></b:skin> 

/* -- Labels -- */

.label-size {line-height: 1.2;float: left;font:normal normal 13px Cuprum;}

.label-size a {-khtml-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;background: #aaa;border: none;border-radius: 3px;color: #fff;text-shadow:0 -1px 1px rgba(0,0,0,0.25);float: left;margin: 0 4px 4px 0;padding: 5px 6px;}

.label-size a:hover {background: #ffcb0f;}-

.label-size span {float: right;font-size: 9px;margin: 0 0 4px;}

• Save Template