Simple Customize Label Cloud Widget in Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article About Label Cloud Widget in Blogger. Are you fed-up because of the yucky label clouds that appears at the sidebar of our Blogger Blog? Sometimes, a dirty looking Label cloud could horribly dent the complete outlook of a website. Consider a website that has a neat and stylish look but if the label clouds in unclean then, it could literally kill the complete viewpoint of a reader. Since, the default Label Widget of Blogger Platform does not have a clean and elegant look. Therefore we have customized Label Cloud in Blogger with CSS3. 



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..



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.

 1. Go to Blogger> Setting> Layouts
 2. Click add a gadget and choose Labels that can you want to show in Label Cloud Widget
 3. Inside the setting make sure to choose the cloud display. You may set other option as per your requirement. See the screenshot below as example.


Please choose to display at most 25 labels. To much labels on homepage looks not good. Showcase your best categories only.

 4. Now Save the widget and go to setting > Template
 5. Backup your Blogger Template First
 6. Click Edit HTML> Proceed and search for this Code ]]></b:skin>

Just above it paste the following CSS code

/*-----Custom Labels Cloud widget by www.GetWebInfo.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;     
}

 After first code just ad the second one.

.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;
}

 After adding second just ad this one.

.label-size a  {     
text-transform: uppercase;     
float:left;     
text-decoration: none;     
}
.label-size a:hover  {   
text-decoration: none;     
}
 8. Now Save your Blogger Template and You can All Done!!!!

Now visit your blog 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.

I Hope this article is really helpful for you if you have any issue so please comment here i will reply you as soon as possible. If you like this Article so please share it on Social Media with your Friends. Thanks for Reading!!!!!

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.


No comments:

Post a Comment