Helper Blogger: CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body entry-content">
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpOJyi_lGJS0P2NJ_4YB_7Q5n9SImU_Sa6UHz8K_ITwy0cQRh0WIudOP5qtgpyn3-OJzkDECulzWBqwpRXhapCBoAb1zWNyu69bVOLDP97ljoY_W1m_8-m5JqrlHlMlCUv0soGJNq0T4k/s1600/customize-blogger-labels-with-css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpOJyi_lGJS0P2NJ_4YB_7Q5n9SImU_Sa6UHz8K_ITwy0cQRh0WIudOP5qtgpyn3-OJzkDECulzWBqwpRXhapCBoAb1zWNyu69bVOLDP97ljoY_W1m_8-m5JqrlHlMlCUv0soGJNq0T4k/s1600/customize-blogger-labels-with-css.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
Previously I shared <a href="http://www.helperblogger.com/2012/07/add-css3-bricksbox-style-labels-to.html" target="_blank">bricks/box style labels for blogger</a> and many of you found it great so that today I am sharing another <span style="background-color: white;">beautiful CSS3 labels style for blogger.This label hack can be easily applied to your labels by just adding some CSS code in to your blog.This labels and created by <a href="http://www.stylifyyourblog.com/" rel="nofollow" target="_blank">Stylifyyourblog</a> and I have reshared them on Helper Blogger,Now lets see how to apply this label hack.</span></div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
</div>
<h3>
How To Apply This Label Hack?</h3>
<div>
<b>Important -  Before applying this label hack set your label style to Cloud.</b></div>
<div>
<b><br />
</b></div>
<div>
You can also apply this hack by using below one click installer.</div>
</div>
<br />
<br />
<br />
<center>
<form action="http://www.blogger.com/add-widget" method="POST" target="_blank">
<input name="widget.title" type="hidden" value="" /><input name="widget.content" type="hidden" value="<style type="text/css">
/*<![CDATA[*/
.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}

#Label1 {
    height: 210px;
}

.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}
/*]]>*/
</style>
<a href="http://www.helperblogger.com/" >Blogger Widgets</a>" /><input name="infoUrl" type="hidden" value="http://www.helperblogger.com/" /><input name="logoUrl" type="hidden" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy43Pa14LRxNWxwKmHhHSA7KiT1EkqjTIBctLKdhLB78vwO-EHowXwGJhpbw15arkSn37FtqPzPaLO4jz07zcCkeYxvEczrcH8PsAPRqtOqGo0c_i9Irh6Qvobx08xIyiV_CjajeqJ8Vs/s320/helper-blogger-logo.png" /></form>
</center>
<br />
<br />
<div style="text-align: center;">
<span style="font-size: large;"><b>OR</b></span></div>
</div>
<br />
apply this hack manually by adding below CSS code just above/before <code>]]></b:skin></code> tag in your template,<br />
<br />
<pre class="brush:css;">.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

#Label1 {
    height: 210px;
}

Customize Blogger Labels With CSS3

Previously I shared bricks/box style labels for blogger and many of you found it great so that today I am sharing another beaut...

+ Read more »

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5D0Ke1_zfuZF0Ia-_PEXYhLWGIkTh-tNB4bt5DdGrjxaWvjvVFhEchx5tQljg2oJ1aRRExuPyXw84AxunAWcubvoRRROvlkX9JgKcldFfwCpsWAf8ZCkCGXGwoRoX26RMuM0XKp-Y0yA/s1600/add-bricks-style-labels-to-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5D0Ke1_zfuZF0Ia-_PEXYhLWGIkTh-tNB4bt5DdGrjxaWvjvVFhEchx5tQljg2oJ1aRRExuPyXw84AxunAWcubvoRRROvlkX9JgKcldFfwCpsWAf8ZCkCGXGwoRoX26RMuM0XKp-Y0yA/s1600/add-bricks-style-labels-to-blogger.jpg" /></a></div>
</div>
<br />
In this tutorial we will see how to customize blogger labels with CSS3 and make them bricks or box style.We will apply this hack with using of pure CSS3 and will replace some existing code with new code in your template.These css3 bricks/box labels really attract readers.I am also using these bricks/box style label on this blog,you can see demo at right sidebar of this blog.Now lets see how to apply this hack.</div>
<br />
<h3 style="color: red;">
How To Customize Blogger Labels With CSS3?</h3>
First we have to edit some settings of our label widget.Save your label widget settings as I have set in below image.<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0G3uCcwMu01mVzi5fAlhosy0O_-0ejteWKLdT8aGqojOhBrurDQl_aRUjgAUKitzwAf117oKCOWy_EwyELQge2X6E-C8qjtqG9Kv1a4I-PCBQeU3E153aVZR17Oax31L_vXh3m_HSMzs/s1600/blogger-label-widget.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0G3uCcwMu01mVzi5fAlhosy0O_-0ejteWKLdT8aGqojOhBrurDQl_aRUjgAUKitzwAf117oKCOWy_EwyELQge2X6E-C8qjtqG9Kv1a4I-PCBQeU3E153aVZR17Oax31L_vXh3m_HSMzs/s1600/blogger-label-widget.jpg" /></a></div>
<br />
<br />
<ol style="text-align: left;">
<li>Now go to <b>Blogger Dashboard > Template</b></li>
<li><b>Download a copy of your template</b></li>
<li>Click on <b>Edit HTML</b></li>
<li>Hit <b>Proceed</b> button</li>
<li><b>Check Expand Widget Templates checkbox</b></li>
<li>Find below code in your template</li>
</ol>
<br />
<pre class="brush:html;">]]></b:skin></pre>
<br />
add below CSS code just above it,<br />
<br />
<pre class="brush:css;">/*CSS3 Bricks Style Labels By http://www.helperblogger.com/ */
#textwidget {
    color: #666;
    font-size: 0.925em;
    font-style: italic;
    line-height: 1.6em
}

a.tag {
    color: #777;
    font: 9px verdana;
    text-transform: uppercase;
    transition: border-color .218s;
    background: #f4f4f4;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    display: inline-block;
    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));
    border: solid 1px #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin: 0 4px 4px 0;
    padding: 3px 5px;
    text-decoration: none
}

a.tag:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}

a.tag:active {
    color: #000;
    border-color: #444
}

.slides {
    font-size: 85%;
    line-height: 130%;
    overflow: hidden;
    padding: 0;
    margin: 30px 0 10px;
    border-bottom: 1px solid #000
}
/*CSS3 Bricks Style Labels By http://www.helperblogger.com/ */

</pre>
<br />
Now find below code,<br />
<br />
<pre class="brush:html;"><b:widget id='Label1' locked='false'</pre>
<br />
<b>find it until</b><br />
<br />
<pre class="brush:html;"></b:widget></pre>
<br />
replace code from <code style="color: blue;"><b:widget id='Label1' locked='false'.........</code> <br />
to <br />
<code style="color: blue;"></b:widget></code> with below code,<br />
<br />
<pre class="brush:html;"><b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
    <b:includable id='main'>
        <b:if cond='data:title'>
            <h2>
                <data:title/>

</h2>
        </b:if>
        <div class='textwidget'>
            <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
                <b:if cond='data:display == &quot;list&quot;'>

</span>
                                    <b:else/>
                                    <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                                </b:if>
                                <b:if cond='data:showFreqNumbers'>

<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/>
                                </span>
                                <b:else/>
                                <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                            </b:if>

<b:if cond='data:showFreqNumbers'>
                                <span class='label-count' dir='ltr'>(
                                    <data:label.count/>)</span>
                            </b:if>
                        </span>
                    </b:loop>

</b:if>
                <b:include name='quickedit' />
            </div>
        </div>
    </b:includable>
</b:widget></pre>
</div>
<br />

Now take a preview and save your template.<br />
<br />
Hope you have liked it :)<br />
</div>

Add CSS3 Bricks/Box Style Labels To Blogger

In this tutorial we will see how to customize blogger labels with CSS3 and make them bricks or box style.We will apply this hack wi...

+ Read more »