Jumat, 21 Maret 2014

Cara Membuat Widget Label Cloud ala Wordpress

Berbeda dari postingan sebelumnya, tentang Cara Membuat Tool Kode Warna Versi 1.00 di Blog, kali ini saya akan bahas mengenai Cara Membuat Widget Label Cloud ala Wordpress untuk Blogger.

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.
Tampilan sebelum dilakukan pengeditan
Tampilan sesudah dilakukan pengeditan
Ini Caranya:
1. Login account blogger kamu
2. Pilih template
3. Klik edit HTML
4. Centang Expand Template Widget
5. Carilah kode di bawah ini (tekan CTRL+F untuk mempercepat pencarian)
]]></b:skin>
6. Setelah ketemu, pastekan kode CSS di bawah ini tepat diatas kode yang di cari tadi ]]></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;}
7. Klik simpan
8. Selesai