Add Bullet style Label Widget in your Blogger Template

Add Bullet style Label Widget in your Blogger Template

0
data:blog.title
custom label widget

Label widget is very important because it can make your blogger template navigation friendly. Most of the Blogger default template hasn't any Main navigation or menu. So alternatively if we use Label widget the it will work like main navigation. However Blogger default label widget is not pretty cool. So by customizing it we can make beautiful. Though there are many custom label widget I have already shared. But this widget is little different. It looks like bullet that easily attract people to click on it. I hope you would love it.


Please visit the below tutorial for adding this beautiful widget.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 
Go to your Layout tab.

Step 3 
Click on "Add a Widget" then select "Label" Widget (Select List Style not cloud style).

blogger label widget

Step 4 Click on -> Template -> Edit HTML

Step 5
 Now Find this code ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 6
 Copy the script from below and Paste the code above/before </b:skin> 

.Label {
font-family:Oswald,open sans, sans-serif,arial;
font-weight:400;
margin:0;
line-height:1.7em;
list-style-type:none;
list-style:none
padding:10px;
}
.Label li {
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.Label li a {
color:#fff;
}
.Label li a:hover {
color:#fff!important;
}
.Label li a:before {
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.Label li a {
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
font-weight:bold;
font-family:sans-serif;
margin-bottom:8px!important;
margin-left:20px!important;
background:#494949;
color:#fff!important;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
padding:0 10px 0 12px !important;
}
.Label li a:before {
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #494949 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.Label li a:after {
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #999;
-webkit-box-shadow:-1px -1px 2px #999;
box-shadow:-1px -1px 2px #999;
}
.Label li a:hover {
background:#555;
}
.Label li a:hover:before {
border-color:transparent #555 transparent transparent;
}

Step 7 Finally hit the Save template button.

Now check your Blogger template to see the bullet style label. If you have any query regarding this then you may leave a comment below. Thank you.
Add Bullet style Label Widget in your Blogger Template
4 Stars stars - "Add Bullet style Label Widget in your Blogger Template" Label widget is very important because it can make your blogger template navigation friendly....

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *