Add CSS Custom Label widget in Blogger Template?

Add CSS Custom Label widget in Blogger Template?

Comments: 24
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

Thank you very much for sharing!!

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; }

doesn't work!

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.

Hi Rick Thanks for your shared code..

Welcome Michael for your feedback.

It is a effective to better design to your blog.

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

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

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

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

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

This comment has been removed by the author.

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

Thanks for the Widget, i realy liked one.

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

Thanks for the label

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

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

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

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.

Thanks for your feedback :up

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

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 *