Monday, November 2, 2015
How to Customize Labels Cloud in Blogger
Customized Labels Cloud For Blogger
Here's how to Customize Labels Cloud in Blogger using CSS3. Labels widget/gadget In blogger makes it easier to categorize your blog's post, giving your visitors a better way to go through related post on your blog. Using a labels cloud widget/gadget on a website can help in reducing your site's bounce rate since readers will have a better view of which post relates to which. The default blogger labels widgget one not really have that clean and elegant look. Looking for something cool? try this Customized Labels Cloud Widget for Blogger. To edit yours, follow the guidelines below
Also Read: How to Add Floating Share Button to Blogger
Popular Post Widget With Hover Effect For Blogger
How to Add IP Widget to Blogger Blogs
How to Customize Labels Cloud in Blogger
- From your Blogger dashboard
- Goto 'Layout'.
- Click on 'add a gadget' .
- Select 'Labels' from the pop-up options.
- Tick the option 'cloud' display.
- Save the gadget.
Also Read: Facebook Invite Friends Button With Timer For Blogger
Facebook Invite Friends Button With Timer For Blogger
Static Facebook Popup Like Box For Blogger
- Next, goto your blogger template, backup the template.
- Click on 'Edit html'.
- Click inside your template, using ctrl+f keys search for ]]></b:skin>
- Copy any of the codes below for your preferred style and paste 'above' ]]></b:skin>
Style 1
.Label li {
background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
border: 1px solid;
border-radius: 6px 6px 6px 6px;
float: left;
font-size: 116%;
list-style: none outside none;
margin: 2px;
padding: 4px;
transition: all 0.3s ease 0s;
}
.Label li:hover {
transform: rotate(351deg) scale(1.7);
}
.Label a {
color: #fff;
text-decoration: none;
}
Style 2
.Label a:hover
{
text-shadow:5px 5px 5px #dcdcdc;
background:orange;
border:1px solid orange;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}
.Label li {
border: 1px solid;
border-radius: 6px 6px 6px 6px;
color: #000000 !important;
float: left;
font-size: 116%;
list-style: none outside none;
margin: 2px;
padding: 4px;
transition: all 0.3s ease 0s;
}
.Label a {
color: #000;
text-decoration: none;
}
.Label li:hover {
transform: rotate(5deg);
}
Style 3
.Label a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #7FBF4D;
background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
border-bottom-right-radius: 30px;
border-color: #63A62F #63A62F #5B992B;
border-image: none;
border-style: solid;
border-top-left-radius: 30px;
border-width: 1px;
box-shadow: 0px 1px 0px 0px #96CA6D inset;
color: #FFFFFF;
float: left;
font: 14px verdana;
height: 18px;
margin-bottom: 9px;
margin-left: 10px;
padding: 10px;
position: relative;
text-decoration: none;
transition: all 0.5s ease-in-out 0s;
}
.Label a:hover {
background: none repeat scroll 0% 0% orange;
border-radius: 0px 30px 0px 30px;
border: 1px solid orange;
text-shadow: 5px 5px 5px #DCDCDC;
}
.Label {
margin: 0px;
padding: 0px;
position: relative;
}
.Label li:hover {
transform: rotate(5deg);
}
.Label li {
float: left;
font-size: 116%;
list-style: none outside none;
transition: all 0.3s ease 0s;
}
- Save your template.
