Posted By Max On Friday, June 5th, 2009 In Blogger Tricks and Hacks
|
|
| Share |
hi all, blogger blogging platform by default give you the ability to add Labels for your post, so you can add and display your blog Labels at your sidebar.
but because we all want our blogs look great for our visitors, we need to give this labels good style,
So now, we’ll learn how to add amazing tag/labels cloud widget to our sidebar instate of the normal one that presented by blogger.
We’ll do it in few steps.
1. Log into your blogger account.
2. Go to dashboard >> layout >> Edit HTML
3. Find the next code
|
|
You can find it by clicking ctrl+f in your browser.
And past the next code just after the above code.
<b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/> <div id='flashcontent'></div> <script type='text/javascript'> var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
4. Click save template and now check your Blog. And enjoy.
Hints.
- You can change it’s location at your side bar by going to dashboard >> layout
and move it up or down.
- you can change the widget width and height by editing this part in the code.
width="250" height="200"
Demo.
If you want to see demo flash animated labels cloud
click here
(new window)
The source : Thanks for Amanda.
Cisco is offering express foundation 646-363 exam for the account managers along with 646-563 exam for advanced security and 646-656 exam for wide area application services for account managers.
No related posts found
Views : 14,954 views 
Rating : 
Loading ...
Installation Error : Copy url &
Click here
Broken Link : Copy url & Click
here
- Hosted Exchange
- 1AutomationWiz Shopping Cart Software
- www.mastersitemanager.com
- LG Rumor Touch Accessories
- online booklet printing
- Download printer repair manual easily
- Need cash? Payday Loans Cash Tomorrow!
- AdvanceLoan
- wordpress themes by wpnow
- German Golf Shop worldwide shipment
- ecommerce solutions
- Chicago Yellow Pages
- Houston Yellow Pages
Did not work. Got error message h2 not properly closed?!
hi michael
we tried to add it to another template to make sure that the code is working, and its worked. you can check it out here
http://allblogtools-elisa.blogspot.com/
Please make sure that you copy all the code.
it is not working on my blog.
Great man, it’s really working in my blog. This code is perfectly working…
Thank you so much I been trying to find something like this for months and months I really hope it works
It works on my blog with errors. Please tell me is there a way to make it show special language characters of Latvian language, e.g. āēīūģķļēņčžš (hope you can see these)
ha hi my name is ahsish singh and i had builded many many blogs for my frnds and this is my own blog i found ur site very good but i wnat to ask u something dear plz reply me in mail ok how i can make my header animated plz tell me dear
and i am very glad to have ur anim taed lables and it is working u shouls mention right
wowwwwwwww………..
it seems coolllllllllllll
funny scraps
A blog for all about humor and funny scraps….
wow.. It works great with my blog.. But is this SEO friendly?
quantumq.blogspot.com
Thank you! This works beautifully. Please check it out – I modified the colors a little.
It does not work on my site. I made sure to install the latest version of flash, and all I have is a white screen. please help. thanks
hmm thanks
Thanks a lot…
heyy its not working for my blog yaar…
cant find the following code
plzzz help mee….
woww, it’s working! cool. Thank u so much for sharing this tips!!
you are welcome freya
The author of this script, amanda fazani, hasn’t answered my comment yet. The label cloud misses one label. If one has 8 labels, it would only shows 7 of it. HeHeHe!
hi iantheragingbull
actually i didn’t note this problem before.
can any one who used this hack tell me if he met the same problem.
that makes my blog look beautiful. Thank you so much.
Free International VOIP Calls WorldWide
friend doesnot working in my blog.
please help thanks
can you give me some details about your problem.
this code isnt avalble in my blog’s html
hi Ehtesham, please check on Expand Widget Templates. when editing your template.
[...] you want more advanced tag cloud, please check this tutorial to see How To Add Flash Animated Label Tags Cloud Widget For Blogger ( blogspot ) [...]
Hi i was able to save it .. but preview showed only the blank lebel.. is it because of numbers of tags, and label for each post.??
can you please explain more your problem prem.
Hello, thanx for this code, i really like it. The problem is that the links on the tags dont work. If i click o them it doesnt take me anywhere. What am i doing wrong?
Thanx for your help.
hi admin . i m using Allblogtools.com template name scarlett but first there is no code with this name”"“” what to do now ? please explain.
hi Sulltan, please contact us using our contact us page to send us the code, you can’t send the code here in comments.
but before contacting us, make sure to check on expand template widgets or try another template.
Cristina,
this is very known problem and it’s because a security of flash player and java script. i updated the code, remove it and add it again for your template, i wish it’ll work perfectly.
Thanx it works great!
When I added it to my blog the greek labels didn’t appear so it useless. Is it another way to solve this problem?
Kalliopi, it may be your browser problem, try another browser. the trick works in all our blogs perfectly.
hi Max,
now this flash gedget working in my template.
but only 2 labels show at a time.
if i refresh page its Change labels but no of labels 2 only at a same time what to do ? now
hi sultan, i’m really don’t know the reason for this issues, i’ll try to look around to find a solution, during this time, please try to change your template, and try it on another template.
sorry sam,
that was my mistake . i correct it . now its working fine . thank u for such a great trick .
can i have in black background ?
@ ajakanku
sure you can change the background color. in step 3, there is a code that you’ll past it into your template, find the following part
then change it to your favorite color value before, you can get your favorite color value from our color codes generator in tools page.
and here is a demo with another background color.
http://my1-weblog.blogspot.com/
its work, but sad cant support chinese words.
This code was better than other of the same features because the labels work (I can click on them)! Thanks so much
i wish i’ll be able to find a similar gadget for Chinese.
thanks Bailey, i’m very happy to see it running on your blog.
It is very nice man.
but now it is not work.
can u check ?
Awsm tutorial!
Thnx a ton… im using the animated cloud nw!
@ Online Entertainment, please try to add it again, i’m sure it’s working perfectly, make sure to do every thing in the right way, and leave your blog link plz.
Thanks this was totally awesome! I have a black theme and was wondering if there was a way to make the background transparent or black? Thanks again
How to do this hack on 2 sidebar templates…
Max i can’t find this scrift
hi alisa, thanks for your comment,
@ serden you can make it in the same way and then move it to your fav sidebar from page elements page.
hi zen, please explain more,
Thanks a lot for this !!!
However it is too wide and I would like to change it. I’m french and I don’t understand what you mean by “edit this part in the code “. Do you mean that it’s already in the code (where ? sorry I can’t see it !)or do you mean I have to add it (so where and how do I do ? )
Thanks a lot, I really like it !
Livy.
It’s work in my blog, after i try so many time…tq very much….
hello max, it’s not working on my blog. please help :’(
anyway, here the url :
khonsakhonsa.blogspot.com
The hack works fine. Theres a minor problem though, there are 4 tags in my blog but theres only 4 of them showing up. Any solution to this?
Sorry, typo. I mean theres only 3 of the tags showing up in the widget.
hei this doesn’t work. if there is any problem? pliss reply me in my blog ^_^
Cool…thanks for sharing
It only appears as a blank white square in my blog
Hi Max,
Thanks for this cool widget. How can I make this widget transparent? Please, please.. I really want it to be transparent. It look dodgy with my template. Reply from your is much appreciated.
@ Livy , it’s easy to control the width and height
find this part in the code and change it’s numbers,
"240", "300", "
the above numbers control the width and height in pixels.
@ sha , sronto please tell me more about your problem, where do you get the error.
@ Wan, You can’t make it transparent, but you can change the background color to make it blend with your blog template,
to do it please read my comment for @ ajakanku, or click on this link.
http://www.allblogtools.com/tricks-and-hacks/how-to-add-flash-animated-label-tags-cloud-widget-for-blogger-blogspot/comment-page-6/#comment-7162
@ Amina Wafiqah , HY and edwardng
thanks very much for your comments.
it works but i can’t find the code to fix it!
it is Great yar.* thank you.
It worked!! Thanks
i donot found
in my blog belp me
hey hi… to everyone who doesn’t found the right code <—- that one, OK here is the thing.. some template like the adapted for blogger from wordpress the xml and ccs are referents, so what you have to do is find this one or someone with other name but make it sure that is the right one (sidebar right side) so you replace de “numbers” and deleted so the code will be like the first one (on the post) you gonna save the changes and later undone, so you going to keep the widget… i hope you got it cause my English is to bad haha
Is it possible to get the HTML code for this cloud? The code given is for the XML format (the new format).
And most of them using the classic/traditional blogger.
Please help
thanks all, please read PSYCORE comment carefully.
hi Ezura, i think all of people now use the new blogger xml templates. but the classic are to old now.
Thanks alot. You help me a lot to beautify my blogs . One such blog is http://www.scientiamag.com/.
Thanks once again
coooool men !!! i love it
How to change the “tag” color, its light gray right now…but how to make it white for example?
Thanks in advance
Hi lawie, you can change it by changing “333333″ in step 3 code to your favorite color code.
thanks Max:)
Great widget!
Hi, plz help me with this error
“”The widget with id Label99 is not within a section (actual parent element is: div.) Every widget should be in a section.”"”
Thx so much.
wicked code cheers!
ive changed the colours round and it works lovely!
i was looking for a cloud that was based on just text (a long list of interests) not tags.. could i alter this at all? if so how? if someone coul oblige id be truely grateful!:) or someway of me adding my list in to the tags in someway that could overcome the 200 only tag thing on blogger?
i bow to your geekery
cheers again
jeff
http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js
the above script was not found
sorry.it is not working on my blog
Your Comment Here
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0×333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
…. *