Customize Label Widget brings more beauty in blogger blog. It will make our blog more attractive and designable. We know that by default blogger cloud label widget looked ugly and unprofessional however, if we add some piece of code to style sheet then it could become an eye-catcher for readers & make our blog design lovely. This widget is mostly appeared at the right side of the blog which consist of several labels. Today we will present an awesome blue color cloud label widget which we have personally implemented on PBT. Since from a long time we have received budles of email from reader to share the PBT labels widget with us. So in today article we will share with you customized label widget for blogger.
Label Widget For Blogger
Well guys you all of know that every blogger use label widget in blog to navigate or jump from one category into another without search any post by Search Engine. This widget help us to show all the related posts of the same category by single button. So we could easily click on desire niche label to view all the posts of related topics. So in this way we can find multiple posts of the same topic with single label button.
- Recommended: Customize Google Plus Followers Widget for Blogger
In official term it will be defiened by Hafeez Ullah Khan like this way.
A label widget is an automated and official part of a blog which can be interlinked and hold bundles of posts with a single tab to find multiple posts easily of the same category.
How to Add Customize Label Widget in Blogger Blog
- Go to blogger dashboard:
- Go to Template>>Edit/Html:
- Now Search for ]]></b:skin> tag
- Past the below given code before ]]></b:skin> tag
.label-size{Finally Click on save button & you done almost:
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
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;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size 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 #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555
transparent transparent;}
- Recommended: Add Stylish Popular Post Widget In Blogger
Want Help ?
Buddies this was a little tutorial all about how to add customize label widget in blogger blog. If you like this widget then you must try to use it it will definitely bring dramatics change in your blog designing. If somebody want a professional label widget for blogger then i will recommended to use this widget for blogger blog. we have personally implement this widget on our blog.
Guys if you found any bugs or face any difficulty in implementation then do not hesitate to post your problem in comment section. we will back your response as soon as possible. Thanks and happy blogging !)
Hafeez Brother as usual another great post from you! Yes this is one of the best label widget for blog.
ReplyDeleteone more thing brother if you want to change the color you can change all the values of this code "0089e0" which is blue i guess and similarly if you don't want to show the numbers in label then just edit the widget and unchecked this option "Show number of posts per label"
You are right saqib ahmad bro, by following your trick we could easily customize these things inside this widget. thanks for your catchy comments.
DeleteSo Hafeez bro, finally you have shared your labels design with us.
ReplyDeleteIncredible labels design, like yours, really add more beauty and charm in our blog and attract our readers to check out more posts tagged under that label.
Really a cool design bro :)
Regards!
Your younger brother - Ankit
Thank my Dear, This is really a professional looks label widget for blogger users. it will make our blog design more attractive. we should must try to implement this on our blog.
Deletecool, bro , i am searching for this only thanks for this, really this will look so beautiful will surly add value to the blog template.. keep it up
ReplyDeleteThanks Umesh Bro for your kindly comments. This is one of the best and pro designable label widget for blogger blog. This widget is used by many blogger we should also try to check this on our blogs. Thanks once a again.
Deletehai bro..
ReplyDeletenice post
thanking you
i got it i have changed it for my blog www.alltechvillas.com
thanking you
for nice information
Nice Widget Hafeez Dude.! Bro I Want To Post A Guest Post On Your Blog Can I.....!!!!
ReplyDeleteBest Wishes:
http://bloggertechniches.blogspot.com/2013/06/how-to-use-php-on-blogger-beginners.html#
I always wanted to have my Customize Label Widget and you have explained it very wall. Thanks for such a nice post.
ReplyDeletehttp://pakistanlearningcenter.blogspot.com/
Very nice post. Thanks i will use this in my blog. And can u please email me your current blogger template. please email me at gupta.nirmal0@gmail.com.
ReplyDeleteCheck your email i will sent it soon.
DeleteI have not received your template. Please send it as soon as possible.
Deletesorry the email i gave you is wrong. Sorry for the mistake. This is the correct email gupta.nirmal10@gmail.com.
DeleteIncredible Widget this will help readers to navigate categories easily with the help of labels widget
ReplyDeleteWell lot's of Friends Searching in Google this widget and Finally they got it thanks for this post Hafeez brother My Guru
Best Of luck
Regars
R.S
yes brother agree with your point ( by default label Widget look ugly ). with this customize label we can increase our blog beauty. and Sky blue color is my favorite color. thanks for brother.
ReplyDeleteMy recent post: http://w3mix.com/ramadan-mubarak-messages/
There is problem in this given CSS, try clicking it and see the clicked label. It is just a normal word (without any CSS) left after clicking it. I think CSS is to be improved.
ReplyDeletehai bro..
ReplyDeletenice post
thanking you
i got it i have changed it for my blog www.aUINSNBLOG.BLOGSPOT.com
thanking you
for nice information
... dear hafeez these codes are not available in my blog? what should i do?
ReplyDeleteOh buddy add this code. this is not available in any template. you have to add this code by follow the above method.
Deletehafeez bhai i don't have ]]> code in my template so what to do ?? please guide me
ReplyDeleteMail me this answer on this EMAIL | Rjshehryarmarri@gmail.com
ReplyDeleteGood evening Hafeez bhai :)
ReplyDeleteI wished to apply the effect you have applied in "recommended post". when we hover it changes to arrow.
I applied this labels code in b skin. But it isn't working. Plz chk bro at : http://engineersevanigam.blogspot.in/
Great Work Bro...I added It To My Blog
ReplyDeleteRegards,
www.newblogger-tricks.com
Hi Hafeez..Fantastic tutorials..I added this code and it is not working on my blog..I couldnt figure out the error..If you could you help me out,it would be great..
ReplyDeleteIt is very good label design. I used on Electrical Objective Questions blog.
ReplyDeleteThanks admin.