Monday, August 22, 2016

Add A Customize Labels Cloud Widget in Blogger

Greetings to everyone. I hope everyone is doing well. Today, the blog will show you how to use Cloud labels? Yesterday, I have published a post how to make list label widget. Mainly The default design of the Labels Cloud widget is simple and not that much attention-grabbing. Therefore, to make it look clean and stylish, we've to customize it. As Blogger is a flexible platform and you can easily customize any element of your blog using CSS. So, we'll also customize the Labels Cloud using CSS3. Recently, one of our visitors asked us that How to Customize Labels Cloud Widget in Blogger. In this article, we'll show you that How to Customize Labels Cloud Widget in Blogger.
  • Read More:

 How to make two columns section categories or label in blogger?

  • How works it?

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 


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
7.   Inside the template code area and by using Ctrl+F search for the ]]></b:skin> tag. Now copy the  below code and paste it just above/before it (]]></b:skin> Tag)
  /*-----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.  Hit the Save Template button and you're done. Congratulations: You've successfully customized your Labels Cloud widget.
  • Note:

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.
Previous Post
Next Post

0 comments: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

Post a Comment

 
Copyright © Poisa Click Registered Surf. Modified: PC Team, Server Hosted: GSE