GuruHowTodo: CSS

How to customize Blogger Labels with CSS3?

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

How to create Letterpress Text Effect using CSS

<br />
<h2 style="text-align: center;">
LETTERPRESS - AWESOME</h2>
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2AFKWbYHu-GI33yGDBI6N041cbMRsq-c9OtlxhoAkFUvqVakv-vwVjatbDOQR4cm4nfxDMCou4D3ia3Sm1cBsP51Q1tWaif0PdNuLmKL4GEQpKzx7DQnE0eyalVpbWlNXXIwDEgyu0cw/s1600/cssLetterPressEffect.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="299" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2AFKWbYHu-GI33yGDBI6N041cbMRsq-c9OtlxhoAkFUvqVakv-vwVjatbDOQR4cm4nfxDMCou4D3ia3Sm1cBsP51Q1tWaif0PdNuLmKL4GEQpKzx7DQnE0eyalVpbWlNXXIwDEgyu0cw/s1600/cssLetterPressEffect.png" width="640" /></a><br />
<br />
In recent years LETTERPRESS text effect has been more popular and trend in web designing. Mostly it's being used in headers of the pages.To achieve letterpress text effect in you need to use text-shadow:( x-offset, y-offset, blur-radius, color); on your CSS style declarations.<br />
<br />
<b>NOTE:</b> text-shadow does not work in Internet Explorer 9 or earlier,  it should be supported in IE10.<br />
<br />
<h2>
BASIC SYNTAX</h2>
<br />
Text shadow has 4 values:<br />
<br />
x-offset, y-offset, blur and color, with x-offset and y-offset required values, blur and color optional.<br />
<br />
text-shadow: [x-offset] [y-offset] [blur] [color];<br />
<br />
x-offset, y-offset and blur can be defined in px or ems.<br />
<br />
Color can be defined in hex or rgba.<br />
<br />
<br />
<h2>
POSITIONING</h2>
<br />
Positive x-offset = to the right of the text<br />
<br />
Negative x-offset = to the left of the text<br />
<br />
Positive y-offset = below the text<br />
<br />
Negative y-offset = above the text<br />
<br />
<h2>
USAGE</h2>
<br />
text-shadow: 2px 2px 8px #000 - Produces a black shadow offset 2px right, 2px below with a blur of 8px<br />
<br />
text-shadow: -1px 0 6px rgba(0, 0, 0, 0.85);<br />
<br />
Produces a dark grey shadow 1px offset to the left Sample Image letter press effect<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfKZjRlBChzmcoosF8vyn78tV6FlqaKRSGTpP5QwWeTpCDbX-iacJYBZAYNFfwus3hyx6khx0SkE5E9tcLqIlG21b6K0Xl4YhGFhTby488mjHwi8xu_UlQi8ectSTRMAID47BrvZh478I/s1600/cssLetterPressEffect1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfKZjRlBChzmcoosF8vyn78tV6FlqaKRSGTpP5QwWeTpCDbX-iacJYBZAYNFfwus3hyx6khx0SkE5E9tcLqIlG21b6K0Xl4YhGFhTby488mjHwi8xu_UlQi8ectSTRMAID47BrvZh478I/s1600/cssLetterPressEffect1.png" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfKZjRlBChzmcoosF8vyn78tV6FlqaKRSGTpP5QwWeTpCDbX-iacJYBZAYNFfwus3hyx6khx0SkE5E9tcLqIlG21b6K0Xl4YhGFhTby488mjHwi8xu_UlQi8ectSTRMAID47BrvZh478I/s1600/cssLetterPressEffect1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br />
</a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfKZjRlBChzmcoosF8vyn78tV6FlqaKRSGTpP5QwWeTpCDbX-iacJYBZAYNFfwus3hyx6khx0SkE5E9tcLqIlG21b6K0Xl4YhGFhTby488mjHwi8xu_UlQi8ectSTRMAID47BrvZh478I/s1600/cssLetterPressEffect1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br />
</a><br />
<br />
<br />
<br />
<br />
To create the above impression, please use the below html code.<br />
<br />
<pre class="html" name="code"><html>
<head>
<title>CSS Letterpress Effect </title>
  <style type="text/css">
* { margin, padding: 0; } 
body {
margin: 5px;
background: #474747;

}
h1 a {
margin: 4px;
font: 90px Helvetica, Arial, Sans-Serif; letter-spacing: -5px; 
text-align: center;
display: block; text-decoration: none;
color: #999; text-shadow: 0px 4px 9px #2a2a2a;

}
h1 a:hover {
color: #a0a0a1; text-shadow: 0px 6px 9px #2a2a2a;
}
h2 {
margin: 5px;
font: 90px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #220; text-shadow: 0px 2px 3px #554;
}
pre
{
  width: 412px;
  margin: 0 auto;
  margin-top: 10px;
  background: #222;
  /* padding: 20px; */
  padding-left: 190px;
  font-size: 15px;
  color: white;
  text-shadow: 0px 2px 3px #171717;
  /* -webkit-box-shadow: 0px 2px 3px #555; */
  -moz-box-shadow: 0px 2px 3px #555;
  /* -webkit-border-radius: 10px; */
  -moz-border-radius: 10px;
}
</style>
</head>
<body>
<h1><a href="http://www.guruhowtodo.com">Guru HowTo DO?</a></h1>
<br><hr>
<h2>CSS Letterpress Effect</h2>
<pre>
<code>
color: #221;
text-shadow: 0px 2px 3px #555;
</code>
</pre>
</body>
</html>
</pre>
<br />
<h2>
<span style="color: #38761d;">Conclusion</span></h2>
<br />
<br />
So, this was all about to create Letterpress Text Effect using CSS, text-shadows are extremely simple to implement. 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 />

How to create Letterpress Text Effect using CSS

LETTERPRESS - AWESOME In recent years LETTERPRESS text effect has been more popular and trend in web designing. Mostly it's being ...

GuruHowTodo

How to customize Blogger Labels with CSS3?

How to create Letterpress Text Effect using CSS

Popular Posts

Blog Archive