Add CSS Custom Label widget in Blogger Template?

Add CSS Custom Label widget in Blogger Template?

Comments: 34
data:blog.title
label

Label widget is very useful for easy navigation. We all knows Blogger default label widget is not eye-catching, for this reason I have created some unique cloud label widget with is very attractive and obviously your Blog visitors will love it. I have used pure CSS code so it won't hamper the loading time of your Blog. On the other hand, its stylish look can grab the attention of visitors. For adding this widget please follow the simple steps from below-


Recommended:

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 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 any code from below and Paste the code above/before </b:skin> 

Design 1


label widget

/* cloud label by www.bloggerspice.com*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#0dd7b4;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#333333;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}

Design 2


CSS label

/* cloud label by www.bloggerspice.com */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border-radius:30px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border-radius:30px;
background:#333333;
}
.label-count {
white-space:nowrap;
border-radius:30px;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}


Design 3


stylish label

/* cloud label by www.bloggerspice.com */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border:5px dashed #000000;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border:5px dashed #FA0830;
background:#000000;
}
.label-count {
white-space:nowrap;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}


Design 4


inset label

/* cloud label by www.bloggerspice.com */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border: 8px inset #0572F8;
background:#0572F8;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#000000;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}

Design 5


bullet label

/* cloud label by www.bloggerspice.com */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#08A2FA;
border-radius: 30px;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#000000;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}

Step 7 Finally hit the Save template button.

Customization

  • To change the label color just change color code only from code block. You can avail the different color from our .
Check your Blog now to see the beautiful CSS label widget. I hope this new CSS custom Label will love everybody. And this will slightly help to bring some variation on your Blogger template. For more exciting staff keep in touch. 

Speak Your Mind

Abdissa Michael says: 8/25/2015

Thank you very much for sharing!!

Rick says: 9/21/2015

DESIGN 6 :

.list-label-widget-content li{ width:100%; padding:0 !important; font-size:16px; }
.list-label-widget-content li a{ width:75%; max-width:300px; display:inline-block; padding:10px; text-decoration:none; background:#eee; }
.list-label-widget-content li a:hover{ background:#f6f6f6; }
.list-label-widget-content li span{ display:inline-block; padding:10px; background:#eee; }

R.O says: 12/02/2015

doesn't work!

Mohammad Fazle Rabbi says: 12/02/2015

Hi RO..I have tested this widget in several template.. it will work 100%. I think your Blogger template containing some other CSS code for label. So 2 code is conflicting. So remove previous code add any code from above.

Mohammad Fazle Rabbi says: 12/02/2015

Hi Rick Thanks for your shared code..

Mohammad Fazle Rabbi says: 12/02/2015

Welcome Michael for your feedback.

साहिल कुमार says: 3/03/2016

It is a effective to better design to your blog.

Mohammad Fazle Rabbi says: 3/03/2016

Thanks साहिल कुमार, I am very glade to hear that you like this post. :up

ranji kan says: 5/13/2016

Hi, if i want to use this template in MVC cshtml file label control how can i implement

Mohammad Fazle Rabbi says: 5/13/2016

Hi Ranji kan.. this widget only designed for Blogger Platform. I don't think so it will work on other platform. However frankly speaking that, I don't have experience with MVC cshtml. :t

Sayyad Graphics says: 6/29/2016

I found some useful information in your blog. it was awesome to read. Hope it would be useful for others.
thanks for sharing this great content
Top 45 Blogger Trick

Mohammad Fazle Rabbi says: 6/29/2016

Thanks Sayyad...for your kind words. |o|

Sayyad Graphics says: 8/18/2016

welcome Mohammad Fazle Rabbi

Naa Song says: 9/11/2016
This comment has been removed by the author.
Anonymous 12/02/2016

This web site is so good web site for blogger tips.
You can know about sim offers of you sim card. Visit http://www.sim-offers.tk

franklin says: 1/16/2017

Thanks for the Widget, i realy liked one.

Mohammad Fazle Rabbi says: 1/16/2017

Thanks Franklin for dropping your comment. Its really inspiring.. :up

tecmobs says: 3/21/2017

Thanks for the label

Sumit Kumar Gogawat says: 7/14/2017

Thanks Rabbi for this great tutorial. I was tried on my blogger post but not match with my blogger theme color. So i removed it. I noticed you that some images of this post not loading properly. Request you to please update the images.

Also one more help needed. in my webmaster there is in mobile section robots block my all labels pages and showing error like below

search/label/Excel%20Tips?m=0

My all labels are in this blocked section. I noticed that my site url for mobile is ?m=1 but it is automatically converted to 0. Please reply and help

Rabbi Khan says: 7/16/2017

Hi Sumit :)
All images are loading properly here. Maybe your internet connection become slower while loading this page or any blocker extension blocking the images for being display.

Thanks for writing in the issue. As far as my knowledge, if you use blogger (whether you use Responsive template or not), you will be getting ?m=1 at end of each URL. It is due to Blogger detects that Blog is running on Mobile & not Desktop etc.

In mobile browser ?m=0 vs ?m=1 is not an big issue. Left it on the hand of Googlebot. It will automatically solve the issue.

Hope it Helps. Thanks. :up

apental says: 7/17/2017

i have implemented the custom css on my site but its not working on mobile phones.

download free apks says: 8/21/2017

This is an awesome article a debt of gratitude is in order for sharing this enlightening data. I will visit your site consistently for some most recent post.

Rabbi Khan says: 8/27/2017

Thanks for your feedback :up

Rabbi Khan says: 8/27/2017

maybe the script is conflicting with your mobile device script. :(

apksfile says: 11/21/2017

Everything is very open with a precise description of the challenges. It was really informative. Your website is extremely helpful. Thank you for sharing!

apkpot says: 11/21/2017

thanks admin for nice sharing.

apkshouse says: 11/21/2017

wonderful work keep it up.

Rabbi Khan says: 11/22/2017

Thank you. :)

Rabbi Khan says: 11/22/2017

Welcome :up

Rabbi Khan says: 11/22/2017

Thanks for your nice comment. :)

viper4android says: 2/07/2018

Very Nice post.Awesome keep sharing.
viper4android fx

Rabbi Khan says: 3/26/2018

Thanks :up

Blogger says: 4/05/2018

Thanks for the post. Gr8 help !!
http://www.coinvalues.in

Blogger Spice says: ADMIN 4/05/2018

Welcome bro :up

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *