GuruHowTodo: HowTo

<br />
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.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaCepFp6z0r-SiRIR_qPGGx35yqVXEAocQ7umIoaFM7HWfLbQPNgktwpolW8gCMCOEOrjEQ12wqzxIKH5JZOBB-Bo3AQG00E3ns2_4-0e0Ga6ISOExsQ4kIA7e9Kb3bVXIftF_j3PmK_U/s1600/Labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaCepFp6z0r-SiRIR_qPGGx35yqVXEAocQ7umIoaFM7HWfLbQPNgktwpolW8gCMCOEOrjEQ12wqzxIKH5JZOBB-Bo3AQG00E3ns2_4-0e0Ga6ISOExsQ4kIA7e9Kb3bVXIftF_j3PmK_U/s1600/Labels.png" width="400" /></a></div>
<br />
<br />
<h2 style="text-align: center;">
<a href="http://guruhowto007.blogspot.in/" style="font-weight: normal;" target="_blank">DEMO</a></h2>
<br />
<h2>
<span style="font-weight: normal;">
How to Customize Blogger Labels with CSS3?</span></h2>
<br />
Save your label widget settings as depicted below image and save.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWH_IS6Rc0dkQ3h8UAn-HlGZacnRFgS7AEWZKlGZFf2kh9gOCafqS5VjUKyqV1WIWCh3GdUJtcnqqPvDYwIW2FQ7dyLEzRwDJFkX6B2MzOOh1pX1XKkcHJwod_iUasQWcRlqXxezunDnk/s1600/configurelabels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="440" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWH_IS6Rc0dkQ3h8UAn-HlGZacnRFgS7AEWZKlGZFf2kh9gOCafqS5VjUKyqV1WIWCh3GdUJtcnqqPvDYwIW2FQ7dyLEzRwDJFkX6B2MzOOh1pX1XKkcHJwod_iUasQWcRlqXxezunDnk/s1600/configurelabels.png" width="640" /></a></div>
<br />
1. Go to Blogger Dashboard > Template > Download a copy of your current template for backup purpose.<br />
2. Click on Edit HTML<br />
3. Click CTRL + F and search the code ]]></b:skin]<br />
4. Copy paste the given below code just above ]]></b:skin]<br />
<h2>
<span style="font-weight: normal;">
CSS Code</span></h2>
<br />
<pre class="css" name="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/ */
</pre>
<br />
<br />
<div>
5. Now find the below code,<br />
<br />
<blockquote class="tr_bq">
<b:widget id='Label1' locked='false'  find till </b:widget></blockquote>
</div>
<div>
<br />
7. Replace the code from<br />
<br />
<blockquote class="tr_bq">
<b:widget id='Label1' locked='false' to </b:widget> with below code </blockquote>
<br />
<pre class="css" name="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/ */
</pre>
<br />
8. Finally save all your changes and you're done.<br />
<br />
<br />
<h2>
<span style="color: #38761d; font-weight: normal;">Conclusion</span></h2>
<br />
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.<br />
<br />
<br />
<br /></div>

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

GuruHowTodo

How to customize Blogger Labels with CSS3?

Popular Posts

Blog Archive