Undangan

Selasa, 15 September 2009

Label Cloud Widget For Blogger / Blogspot

A tag cloud or label cloud for blogger is a visual depiction of all labels used on your blog.You can see a demo of the Label cloud for blogger(blogger label cloud) here on my site. This Tag Cloud Widget was originally developed by phydeaux3. I have just simplified and made it easier to install..

First Of all Goto Your blogger Layout>Page Elements page and add a Labels Widget there..You can Do that using the Add a Page Element Option on that page.Label Cloud Widget For Blogger Or Blogspot
Choose to sort the labels Alphabetically when prompted.

After Adding the Label Widget Goto Layout>Edit Html (Do not expand the widget templates for the sake of easy explanation)
You will find some code similar to





Now Replace that with
























Now find

]]>


and replace it with

#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
]]>


Save your template and now you should get a working Label Cloud On your Blog.



Optional Parts Proceed further only if you want to customize the cloud to a better level...

Changing Cloud Colours:

you can change those colors editing the code a little bit..
you will have to expand your widget templates and modify these 2 lines of code

var maxColor =

and

var minColor =
you have to specify the RGB values there separated by commas..If you are sure of what should be the hex codes of the maximum and minimum colors,then you can use this to convert the hex value to RGB values..If you are not sure of what the hex code of the colors are then have a look at this.

Changing the Font Sizes:
You can change the font sizes by editing these 2 lines of code

var minFontSize =
and
var maxFontSize =

Comments :

3 komentar to “ ”

ini yg kumulus bukan sii kang?!??! keren nii :(

genial mengatakan...
on 

Waduh, kurang paham saya Mas!

MONOKROM mengatakan...
on 

label cloud bagus tp sayangnya g bisa d klik kanan

Rizkyzone mengatakan...
on 

Posting Komentar