--> Customize Labels Cloud in Blogger | Experience Lab - Online business creation and development guide for bloggers and startups

Customize Labels Cloud in Blogger

Back in the year 2008 when Blogger.com was moving through several update phases, third party developers would often take the golden opport...



Back in the year 2008 when Blogger.com was moving through several update phases, third party developers would often take the golden opportunity of creating widgets for BlogSpot blogs but as soon as Google rolled out massive changes to their online services, several official widgets popped out which load fast and perform well because the scripts are served by Blogger servers. Page List and label cloud/list enabled designers to create dynamic menus. Since the stylesheet was made accessible. therefore we all got a chance to play with these widgets and transform them completely in look and appearance. We shared tutorials first time on how to create dynamic menus with page list and an automatic menu with label list and today we would share a simple stylesheet that will transform the labels cloud into organized small blocks that rotate on mouse over. I must ensure you that the styles are perfectly compatible in all major browsers including IE8+.





DEMO: Look at the label cloud on the sidebar of this blog




This is how labels look in cloud display:



labels widget blogger



This is how it will look after you apply the new style.



label cloud widget


How it works?



Each label link is nested inside a span tag followed by a class named label-size. If the font-size is not specified the widget changes font-size of each label according to its post-count. Therefore showing big and small clouds. Introducing custom styles would over-ride the exiting styles thus changing the entire look. 


Turn Random Cloud display into Blocks


The code below can be customized in several ways to create exciting label designs. You can also add background images to them.

Follow these easy steps:


  1. Go to Blogger > Settings> Layouts

  2. Click add a gadget and choose Labels                     

  3. Inside the settings make sure to choose the cloud display. You may set other options as per your requirement. See the screenshot below as example 


labels settings



Please choose to display at most 25 labels. Too much labels on homepage look awkward. Showcase your best categories only.


       4.    Now save the widget and go to settings > Template

       5.     Backup your template

       6.     Click Edit html > Proceed  and search for this


]]></b:skin>


        7.   Just above it paste the following CSS code:


/*-----Custom Labels Cloud widget by www.MyBloggerTricks.com----*/

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}


.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;

-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg); 
-o-transform: rotate(7deg); 
-webkit-transform: rotate(7deg); 
-ms-transform: rotate(7deg); 
transform: rotate(7deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1; 
}


.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}

.label-size a:hover  {
text-decoration: none;
}


          8.  Save your template

         9.    All done!

Visit your blogs and see the labels completely transformed to small neatly crafted rectangular boxes. If in case you want the label boxes to be of random sizes depending on the post-count then simply delete font-size:10px; from the above code.


Need help?


I am sure the installation of this tweak wont trouble you a lot, if in case you needed help in changing the font colors on active, hover and visited modes then let me know. By default the visited link will turn black, unlinked and would also not rotate. Click any of your label links and see that page to check this effect.

I will be posting normal tutorials on plugins and widgets and I have got some new SEO tweaks for blogger blogs that would further improve your SERP ranking. I am sure you would love to try them out. Peace and blessings pals :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Customize Labels Cloud in Blogger
Customize Labels Cloud in Blogger
http://lh6.ggpht.com/-jdFJbHQ8hDs/UBgl7I-N_AI/AAAAAAAAHLo/edeUI6kxbPY/image10.png?imgmax=800
http://lh6.ggpht.com/-jdFJbHQ8hDs/UBgl7I-N_AI/AAAAAAAAHLo/edeUI6kxbPY/s72-c/image10.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2012/07/customize-labels-cloud-in-blogger.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/07/customize-labels-cloud-in-blogger.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy