Add Bullet style Label Widget in your Blogger Template
Add Bullet style Label Widget in your Blogger Template
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.
Recommended: Add CSS Custom Label widget in Blogger Template?
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).
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.
Post a Comment