Get Latest Tips and Templates For Blogger,Wordpress

Latest

Wednesday 7 November 2018

How To Add Animated Revolving Labels Gadget In Blogger

Every blog and website have some categories which helps users to find what they are looking for. For example if you are looking for cloths in a website you will definitely click on fashion label, dressing label or on other similar label. Similarly in good blogs every post is categorized to help visitors navigate easily. You might have seen a number of stylish categories such as cloud labels, responsive labels etc but I am sure that you haven't seen such impressive categories before, which are show in above image. And I am sure that after looking at them you are also wanting to add this impressive gadget in your blog.


How To Add Animated Revolving Labels Gadget In Blogger


If yes then just follow below steps are you are done, but let me tell you something first before we start that this gadget can't be add as we add normal widgets because it is a modified gadget. So don't think that its a third party gadget and will affect my blog. Let's begin!

Step 1: Go to Blogger > Template and click on Edit HTML.




Step 3: Click anywhere in your Template code and search below code by pressing Ctrl+F on your keyboard

<b:section-contents id='sidebar-right-1'>

OR


<b:section-contents id='sidebar-right-1'/>




Step 4: Just below it paste the following 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='https://googledrive.com/host/0B-3SIKm-BBF_TXNsNDFrTkVrc0k' type='text/javascript'/><div id='flashcontent'><a href='http://101helper.blogspot.com/'/></div><script type='text/javascript'>var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "300", "300", "7", "#eeeeee");//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>

Step 5: Click on save template and you are done.

Customization:
  • To Change Background Color And width/Height:

SWFObject("https://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "300", "300", "7", "#eeeeee");


The default width and height is 300px, you can change it by changing "300" in above piece of code.



  • To Change The Text Color:

so.addVariable("tcolor", "0x333333");

To change the text color replace 333333 with desired color code.You can use our Color Picker tool for free.


  • To Change The Speed Of Spin:
so.addVariable("tspeed", "100");

To adjust speed of spin replace 100 with desired speed.

Sharing is Caring! Share if you like :)

No comments:

Post a Comment