Advertisment

June 06, 2016

10 Beautifull Label Widget For Blogger Template


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-

  • 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).

Add CSS Coustom Label Widget In Blogger Template

  • 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> 
/* cloud label by www.sayyadgraphic1.blogspot.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}



/* cloud label by www.sayyadgraphic1.blogspot.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}



/* cloud label by www.sayyadgraphic1.blogspot.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}


/* cloud label by www.sayyadgraphic1.blogspot.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
}



/* 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  Color Picker. 

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.

No comments:
Write comments

Thank you for getting in touch!
We appreciate you contacting us about [Contact Reason]. We try to respond as soon as possible, so one of our Customer Service colleagues will get back to you within a few hours.
Have a great day ahead!

About Owner

Sayyad Miskeen is a web developer, SEO Consultant , Graphics Expert and Online Mentor who has been working since 2013 and is managing several successful websites on the internet for last 5 years. Sayyad Miskeen can help you in Web development, Make Money, SEO , Graphics and Online Marketing related issues, if you want to know more about him then click here

About My Father


My father name is Muhammad Miskeen. He is born on 1957.He is a senior Teacher at BISE Rawalpindi.he is Joined his Duty as a art & Drawing Teacher in G.H.S.S Ausia Rawalpindi (12-08-1976) 
Qualifaction: 
carer O'level in G.H.S.S
Intermediate And Graduation in Art & Drawing + Statistics + Economics {1974 - A.I.O.U}

Featured post

Use Telenor Free Internet Trick 2016

How to Use Telenor Free Internet Trick 2016 Telenor Free 2G/3G Internet Trick j Hi ! Everyone ....! My name is Sayyad Miskeen ...

Alexa Rank

© 2014-17 Sayyad Graphics. Designed by Sayyad Miskeen & Distributed by Sayyadgraphics.com