Berbagi tanpa Batas

Minggu, 11 Maret 2012

Cara Membuat Widget Label Cloud ala Wordpress untuk Blogger

with 0 Comment
MalvinShare-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
Baiklah langsung saja saya akan jelaskan tentang Cara Membuat Widget Label Cloud ala Wordpress untuk Blogger di bawah ini
Cara Membuat Widget Label Cloud ala Wordpress untuk Blogger
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

Keterangan :
1. Untuk Membuat Label Cloud ala Wordpress ini, terlebih dahulu di blog kamu harus terpasang Widget Label Default. Untuk pengaturan widget labelnya bisa dilihat pada screenshoot di bawah ini

0 komentar:

Posting Komentar

Protect by