Blogger Label Widget Style: In this post you will find Top 5 Great Design Blogger Label Widget Styles And How To Add Blogger Label Widget Style To Their Own Blogger Template . If you create a free blog on Blogger and nobody installs Blogger template for your blog is done but if you want to change this post to Blogger Template Label Widget Style you need to read carefully and then understand change Blogger Label Widget style you can find it on your Blogger site . You can use your Blogger template first, otherwise your Blogger template may be damaged. Back it up.
 |
| Top 5 Great Design Blogger Label Widget Styles |
Stylish Blogger Label Style Design CSS Code
What is a blogger label widget?
Friends, Blogger Labels Widget is a widget that displays all types of labels added to your blog articles / posts in one place, so that visitors to your blog know what topics / topics are on your blog. Written in sections.
How to change blogger label widget style in Blogger template?
Before adding the Blogger Label Widget style to your Blogger site template, make sure your blog has a label / section attached, if not, you must first add a label widget to the design.
To add a label widget, follow these steps: -
- Open Blogger Dashboard
- Layout tab
- Click "Add a gadget" then select "Label" widget (select cloud / list style)
 |
If you have added a label widget to your blog, here are 5 awesome design blogger label widget styles given below to give a beautiful design, choose any one of these blogger label designs.
To add it to your Blogger template now, follow these steps -
- Blogger dashboard open
- Click on Theme and then click on Edit Html
- Copy any of the code below and paste it first.
- Save it now
Blogger Label Floating Style Design 1
 |
Guide Video: How To Add Blogger Label Widget Style
Blogger Label Floating Style Design 1 CSS / JavaScript Code
<!-- [www.akhelppoint.in] -->
<style type="text/css">
#sidebar-wrapper{margin:auto;max-width:400px;}
.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}
.widget-content.cloud-label-widget-content {display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;margin:10px 10px 5px 10px}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .Label li{position:relative;background:#FFFEFC;color:#333;padding:0px;margin:5px;text-align:left;width:97%;transition:all .8s ease-out;text-transform:none;border:1px solid #fff;box-shadow:0px 0px 1px rgba(0,0,0,0.4);}
#sidebar-wrapper .Label li:hover {color:#0074D9;transition:all 0s ease-out;}
#sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;height:98%;background:#4fafe9;transition:all .8s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;transition:all 0s ease-out}
#sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:35px;color:#787878;text-decoration:none;transition:all .8s ease-out}
#sidebar-wrapper .Label li a:before {font-family: fontawesome;content: "f07c";padding-right: 10px !important;}
#sidebar-wrapper .Label li a:hover {color:#fff;transition:all 0s ease-out}
#sidebar-wrapper .Label li span{float:right;height:98%;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#CF000F;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#961126;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;display:inline-block;color:#666;padding:5px 8px;font-weight:400;border:1px solid #ccc;transition:all .3s}
#sidebar-wrapper .label-count{backface-visibility:hidden;opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-5px;right:-10px!important;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:25px;height:22px;line-height:22px;border-radius:4px;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;right:-15px!important}
#sidebar-wrapper .label-size a:hover{color:#666;border-color:#4fafe9}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.sidebar ul {
list-style: none;
margin: 0;
padding: 5px 0;
}
</style>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://use.fontawesome.com/e3eb25f65e.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script> Blogger Label Style Design2
Blogger Label Style Design 2 CSS Code
<!-- [www.akhelppoint.in] -->
<style type="text/css">
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}.cloud-label-widget-content{text-align:left;padding:0}.label-count{white-space:nowrap;display:inline-block}#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;border-radius:99em;transition:all .3s}#sidebar-wrapper .label-size a{position:relative;overflow:hidden;background:#e74c3c;color:#fff;display:inline-block;padding:4px 8px;font-weight:500;border-radius:3px}#sidebar-wrapper .label-count{display:inline-block;background:#f39c12;color:#fff;padding:2px 4px;border-radius:5px;font-size:11px;text-align:center;float:right;opacity:0;visibility:hidden;transition:all .3s}#Label1 ul li:hover .label-count{opacity:1;visibility:visible}#sidebar-wrapper .label-size a:hover{background:#f36253;color:#fff;box-shadow:0 2px 0.8rem -0.8rem rgba(0,0,0,0.8),0 0 0 1px rgba(0,0,0,0.05);transition-delay:0s;}.list-label-widget-content ul{column-count:2;column-gap:8px}.list-label-widget-content ul li{list-style:none;padding-bottom:5px;margin:0;padding-top:5px;border:0;font-weight:500}.list-label-widget-content ul li::before{content:"f292";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:6px;color:#f39c12}.list-label-widget-content ul li:hover::before{content:"f0a4";color:#222;margin-right:6px}.list-label-widget-content ul li a{color:#222}.list-label-widget-content ul li a:hover{color:#222}.Night .list-label-widget-content ul li a:hover{color:#fff}
</style> Blogger Label Cloud Style Design 3
 |
Blogger Label Cloud Style Design 3 CSS Code
<!-- [www.akhelppoint.in] -->
<style type="text/css">
.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
}</style>
Blogger Label Cloud Style Design 4
 |
Blogger Label Cloud Style Design 3 CSS Code
<!-- [www.akhelppoint.in] -->
<style type="text/css">
.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
}
</style>
Blogger Label Cloud Style Design 5
 |
Blogger Label Cloud Style Design 5 CSS Code
<!-- [www.akhelppoint.in] -->
<style type="text/css">
.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
}
</style>