How to customize Blogger Labels with CSS3?

In Blogger Labels are like keywords, its used to categorize the articles by assigning labels to it. By default blogger labels are not great attractive by look and design, for this reason we must customize the labels widget thorough CSS tricks and make more attractive customized cloud label for your blogs or website to give rich UI experience. After customization the Label,It will look like below.

DEMO

How to Customize Blogger Labels with CSS3?

Save your label widget settings as depicted below image and save.

1. Go to Blogger Dashboard > Template > Download a copy of your current template for backup purpose.
2. Click on Edit HTML
3. Click CTRL + F and search the code ]]></b:skin]
4. Copy paste the given below code just above ]]></b:skin]

CSS Code

/*CSS3 Customized Style Labels By http://www.guruhowtodo.com/ */
#Labelwidget {
    font-size: 0.925em;
    text-transform: uppercase
    font-style: italic;
    color: #666;
    line-height: 1.6em;
    
}
a.tag {
    
    background: #f4f4f4;
    color: #777;
    font: 10px Tahoma;
    text-transform: uppercase;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    transition: border-color .218s;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    display: inline-block;
    border: solid 1px #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin: 0 4px 4px 0;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    padding: 3px 5px;
    text-decoration: none
}
a.tag:hover {
    color: #333;
    border-color: #999;
   box-shadow: 0 1px 2px rgba(0,0,0,0.15)
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
}
a.tag:active {
    color: #000;
    border-color: #444
}
/*CSS3 Customized Style Labels By http://www.guruhowtodo.com/ */

5. Now find the below code,

<b:widget id='Label1' locked='false' find till </b:widget>

7. Replace the code from

<b:widget id='Label1' locked='false' to </b:widget> with below code

/*CSS3 Customized Style Labels By http://www.guruhowtodo.com/ */
<b:widget id="Label1" locked="false" title="Labels" type="Label">

    <b:includable id="main">
        <b:if cond="data:title">
            <h2>
                <data:title>
            </data:title></h2>
</b:if>
        <div class="Labelwidget">
<div expr:class="&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;">
<b:if cond="data:display == &quot;list&quot;">
                    </b:if>
<ul>                        <b:loop values="data:labels" var="label">
<li>                                 <b:if cond="data:blog.url == data:label.url">                                     <span expr:dir="data:blog.languageDirection">                                         <data:label .name="">                                     </data:label></span>                                     <b:else>                                     <a class="tag" expr:dir="data:blog.languageDirection" expr:href="data:label.url" href="https://www.blogger.com/null"><data:label .name=""></data:label></a>                                 </b:else></b:if>                                 <b:if cond="data:showFreqNumbers">                                     <span dir="ltr">(                                         <data:label .count="">)</data:label></span>                                 </b:if>                             </li>
</b:loop>                     </ul>
<b:else>
                    <b:loop values="data:labels" var="label">
                        <span expr:class="&quot;label-size label-size-&quot; + data:label.cssSize">
                            <b:if cond="data:blog.url == data:label.url">
                                <span expr:dir="data:blog.languageDirection">
                                    <data:label .name="">
                                </data:label></span>
                                <b:else>
                                <a class="tag" expr:dir="data:blog.languageDirection" expr:href="data:label.url" href="https://www.blogger.com/null"><data:label .name=""></data:label></a>
                            </b:else></b:if>
                            <b:if cond="data:showFreqNumbers">
                                <span class="label-count" dir="ltr">(
                                    <data:label .count="">)</data:label></span>
                            </b:if>
                        </span>
                    </b:loop>
                </b:else>
                <b:include name="quickedit">
            </b:include></div>
</div>
</b:includable>
</b:widget>
/*CSS3 Customized Style Labels By http://www.guruhowtodo.com/ */

8. Finally save all your changes and you're done.

Conclusion

So, this was all about customize Blogger Labels with CSS3. If you have any type of queries regarding this tutorial please feel free to let us know.We will try our best to resolve them. If you like this tutorial and find it useful ,then please don’t forget to share this with your friends and social media too.