Add “Author Bio” Box below Each Post To Your Blog

Today I am giving you a beautiful widget .An author box is a small box, appearing at the bottom of every  post, that contains information about the author. An author box can include information such as the author’s name, a short bio data about the author and a small thumbnail picture of the author. You can add an author box to the post footer in your Blogger blog by editing the blog’s template HTML code.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

CSS CODE

/* Author Box */ .author-box { background: #fff; margin: 10px 0 40px 0; padding: 10px; border: 1px solid #E6E6E6; overflow: auto; -moz-box-shadow: 0 0 5px 5px #888; -webkit-box-shadow: 0 0 5px 5px#888; box-shadow: 0 0 5px 5px #888; } .author-box p { margin: 0; padding: 0; } .author-box img { background: #FFFFFF; float: left; margin: 0 10px 0 0; padding: 2px; border: 1px solid #E6E6E6; }

7. After that search these code.

 <div class='post-footer-line post-footer-line-3'><span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> </div>

8. Paste the below code before

 <b:if cond='data:blog.pageType == "item"'>
<p style="display:none;">Author Box by <a href="http://www.blogetrick">BlogETrick</a></p>
<div class="author-box">
  <p><img alt="" class="avatar avatar-70 photo" height="70" src="http://lh4.googleusercontent.com/-14HFkZL_hHM/AAAAAAAAAAI/AAAAAAAAAHw/v-xgPuYBKok/s512-c/photo.jpg" width="70"/><b>About the Author</b>
    <div style="text-align: justify; font-family: verdana; color: #000;">I am<b> <a href="https://plus.google.com/103580587001840213936" rel="author"> Rishi Vivek</a></b> From India and i am the founder of the blog "<a href="http://blogetrick.blogspot.com">Blog E Trick"</a>.I Very Much interest in blogging by  reading articles online. Mine thirst for learning latest web technologies like HTML, CSS and JavaScript equipped me with an art of web designing. I am now a good designer…’</div></p>

  </div>
        </b:if>   

Replace The Link : In Red Color  and Also Your Image Link

9. Save your template. you done it.
go back to your home page and refresh it and see the difference..Hope you liked this article. Thanks for reading.

CSS gradient buttons

R

ecently I talked about CSS cross-browser gradients and last week I wrote again about CSS3 gradients. So what I’m going to do today? I will show you how to put the CSS gradient feature in practical use.
In this article you will see how you can create a set of gradient buttons just with CSS (no images).

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/*----------------------------*/              
 .button        {           
 margin: 10px;          
 text-decoration: none; 
 font: bold 1.5em 'Trebuchet MS',Arial, Helvetica;

 /*Change the em value to scale the button*/        
 display: inline-block;           
 text-align: center;          
 color: #fff;                      
 border: 1px solid #9c9c9c;

 /* Fallback style */       
 border: 1px solid rgba(0, 0, 0, 0.3);   
 text-shadow: 0 1px 0 rgba(0,0,0,0.4);       
 box-shadow: 0 0 .05em rgba(0,0,0,0.4);         
 -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);   
 -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);                 
 }             
 .button, .button span       
 {           
 -moz-border-radius: .3em;      
 border-radius: .3em;     
 }              
 .button span      
 {           
 border-top: 1px solid #fff;
 /* Fallback style */          
 border-top: 1px solid rgba(255, 255, 255, 0.5);        
 display: block;            padding: 0.5em 2.5em;        
 /* The background pattern */                      
 background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),     
 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),                           
 -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),                            
 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));          
 background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),                     
 -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),                            
 -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),                           
 -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);         

 /* Pattern settings */                     
 -moz-background-size: 3px 3px;      
 -webkit-background-size: 3px 3px;    
 background-size: 3px 3px;               
 }       

 .button:hover    
 {          
 box-shadow: 0 0 .1em rgba(0,0,0,0.4);    
 -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4); 
 -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);    
 }              

 .button:active      
 {          
 /* When pressed, move it down 1px */   
 position: relative;        
 top: 1px;     
 }
              
 /*----------------------------*/    
 .button-khaki     
 {          
 background: #A2B598;      
 background: -webkit-gradient(linear, left top, left bottom, from(#BDD1B4), to(#A2B598) );       
 background:-moz-linear-gradient(-90deg, #BDD1B4, #A2B598);         
 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BDD1B4', EndColorStr='#A2B598');             
 }               
 .button-khaki:hover   
 {                  
 background: #BDD1B4;  
 background: -webkit-gradient(linear, left top, left bottom, from(#A2B598), to(#BDD1B4) );   
 background: -moz-linear-gradient(-90deg, #A2B598, #BDD1B4);          
 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#A2B598', EndColorStr='#BDD1B4');    
 }             
 .button-khaki:active      
 {          
 background: #A2B598;   
 }    

 /*----------------------------*/         
 .button-blue      
 {          
 background: #4477a1; 
 background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );  
 background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);         
 filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');      
 }              
 .button-blue:hover     
 {           
 background: #81a8cb; 
 background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );      
 background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);      
 filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');     
 }               
 .button-blue:active     
 {         
 background: #4477a1;  
 }
              
 /*----------------------------*/   
 .button-brown    
 {        
 background: #8f3714;       
 background: -webkit-gradient(linear, left top, left bottom, from(#bf6f50), to(#8f3714) );      
 background: -moz-linear-gradient(-90deg, #bf6f50, #8f3714);          
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#bf6f50', EndColorStr='#8f3714');    
 }              
 .button-brown:hover 
 {           
 background: #bf6f50;         
 background: -webkit-gradient(linear, left top, left bottom, from(#8f3714), to(#bf6f50) );       
 background: -moz-linear-gradient(-90deg, #8f3714, #bf6f50);         
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#8f3714', EndColorStr='#bf6f50');      
 }       
 .button-brown:active 
 {       
 background: #8f3714;      
 }
            
 /*----------------------------*/      
 .button-green 
 {         
 background: #428739;      
 background: -webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739) );  
 background: -moz-linear-gradient(-90deg, #c8dd95, #428739);         
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c8dd95', EndColorStr='#428739');   
 }             
 .button-green:hover     
 {          
 background: #c8dd95;        
 background: -webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95) );  
 background: -moz-linear-gradient(-90deg, #428739, #c8dd95);     
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#428739', EndColorStr='#c8dd95');    
 }               
 .button-green:active     
 {          
 background: #428739;      
 }
             
 /*----------------------------*/        
 .button-red      
 {          
 background: #D82741;   
 background: -webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741) );        
 background: -moz-linear-gradient(-90deg, #E84B6E, #D82741);         
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E84B6E', EndColorStr='#D82741');   
 }      
 .button-red:hover   
 {          
 background: #E84B6E;       
 background: -webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E) ); 
 background: -moz-linear-gradient(-90deg, #D82741, #E84B6E);        
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D82741', EndColorStr='#E84B6E');  
 }              
 .button-red:active    
 {          
 background: #D82741;     
 }
    
 /*----------------------------*/       
 .button-purple      
 {        
 background: #6F50E7;      
 background: -webkit-gradient(linear, left top, left bottom, from(#B8A9F3), to(#6F50E7) );    
 background: -moz-linear-gradient(-90deg, #B8A9F3, #6F50E7);        
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B8A9F3', EndColorStr='#6F50E7'); 
 }        
 .button-purple:hover   
 {         
 background: #B8A9F3;       
 background: -webkit-gradient(linear, left top, left bottom, from(#6F50E7), to(#B8A9F3) );    
 background: -moz-linear-gradient(-90deg, #6F50E7, #B8A9F3);        
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#6F50E7', EndColorStr='#B8A9F3');   
 }               
 .button-purple:active     
 {          
 background: #6F50E7;    
 }
     
 /*----------------------------*/        
 .button-black  
 {         
 background: #141414;     
 background: -webkit-gradient(linear, left top, left bottom, from(#656565), to(#141414) );  
 background: -moz-linear-gradient(-90deg, #656565, #141414);        
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#656565', EndColorStr='#141414');  
 }             
 .button-black:hover    
 {         
 background: #656565;       
 background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#656565) );    
 background: -moz-linear-gradient(-90deg, #141414, #656565);      
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#141414', EndColorStr='#656565');    
 }               
 .button-black:active   
 {         
 background: #141414;       
 }    
      
 /*----------------------------*/       
 .button-orange    
 {        
 background: #f09c15;   
 background: -webkit-gradient(linear, left top, left bottom, from(#f8c939), to(#f09c15) ); 
 background: -moz-linear-gradient(-90deg, #f8c939, #f09c15);    
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f8c939', EndColorStr='#f09c15');  
 }            
 .button-orange:hover    
 {            background: #f8c939;
 background: -webkit-gradient(linear, left top, left bottom, from(#f09c15), to(#f8c939) );         
 background: -moz-linear-gradient(-90deg, #f09c15, #f8c939);       
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f09c15', EndColorStr='#f8c939');     
 }               
 .button-orange:active       
 {         
 background: #f09c15;   
 }   
       
 /*----------------------------*/       
 .button-silver     
 {        
 background: #c5c5c5;      
 background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#c5c5c5) ); 
 background: -moz-linear-gradient(-90deg, #eaeaea, #c5c5c5);    
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#eaeaea', EndColorStr='#c5c5c5');     
 }              
 .button-silver:hover      
 {           
 background: #eaeaea;     
 background: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5), to(#eaeaea) );         
 background: -moz-linear-gradient(-90deg, #c5c5c5, #eaeaea);          
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c5c5c5', EndColorStr='#eaeaea');     
 }             
 .button-silver:active    
 {        
 background: #c5c5c5;    
 }         

 7. HTML structure

Let’s see how the HTML looks for the blue button for example:

<a class="button button-khaki" href="#">
<span>Button</span>
</a>
<a class="button button-blue" href="#">
<span>Button</span>
</a>
<a class="button button-brown" href="#">
<span>Button</span>
</a>
<br>
<a class="button button-red" href="#">
<span>Button</span>
</a>
<a class="button button-purple" href="#">
<span>Button</span>
</a>
<a class="button button-green" href="#">
<span>Button</span>
</a>
<br>
<a class="button button-black" href="#">
<span>Button</span>
</a>
<a class="button button-orange" href="#">
<span>Button</span>
</a>
<a class="button button-silver" href="#">
<span>Button</span>
</a>

 Replace # with your link

  8.Now save post your Document.

    You are done... 

Cool CSS3 navigation menu

W

e all try to be very creative when it comes to designing a website navigation. It’s a sure thing: a good looking navigation menu can really enhance your website.
I wrote before about how to create different menus and today you’ll learn how to create another stylish CSS3 navigation menu.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

nav  {
 display: block;
 width: 100%;
 overflow: hidden;
}

nav ul {
 margin: 80px 0 20px 0;
 padding: .7em;
 float: left;
 list-style: none;
 background: #444;
 background: rgba(0,0,0,.2);
 -moz-border-radius: .5em;
 -webkit-border-radius: .5em;
 border-radius: .5em;    
 -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
 box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; 
}

nav li {
 float:left;
}

nav a {
 float:left;
 padding: .8em 1.5em;
 text-decoration: none;
 color: #555;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
 letter-spacing: 1px;
 text-transform: uppercase;
 border-width: 1px;
 border-style: solid;
 border-color: #fff #ccc #999 #eee;
 background: #c1c1c1;
 background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
 background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));
 background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
 background: -o-linear-gradient(#f5f5f5, #c1c1c1);
 background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
 background: linear-gradient(#f5f5f5, #c1c1c1);            
 }
 
nav a:hover, nav a:focus {
 outline: 0;
 color: #fff;
 text-shadow: 0 1px 0 rgba(0,0,0,.2);
 background: #fac754;
 background: -moz-linear-gradient(#fac754, #f8ac00);
 background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));
 background: -webkit-linear-gradient(#fac754, #f8ac00);
 background: -o-linear-gradient(#fac754, #f8ac00);
 background: -ms-linear-gradient(#fac754, #f8ac00);
 background: linear-gradient(#fac754, #f8ac00);
}

nav a:active {
 -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
 -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
 box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
 
nav li:first-child a {
 border-left: 0;
 -moz-border-radius: 4px 0 0 4px;
 -webkit-border-radius: 4px 0 0 4px;
 border-radius: 4px 0 0 4px;            
}

nav li:last-child a {
 border-right: 0;
 -moz-border-radius: 0 4px 4px 0;
 -webkit-border-radius: 0 4px 4px 0;
 border-radius: 0 4px 4px 0;            
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Categories</a></li>
        <li><a href="#">About</a></li>    
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Replace # with your link

10. Now save your HTML/Javascript'.

    You are done... 
 

Black and Blue simple Menu Bar

M

enu bar is very important in blogger.Because it helps to navigate your blog or website easily.It mean they can find easily  what  they  looking  for.  In  this  tutorial im gonna explain  how  to  add    Css3    menu  bar  for  blogger. Its  include nice  hover  style.Im  using Css3 and HTML, Just
check out demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */
#cssmenu, #cssmenu > ul{
background:#24459A;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
}
#cssmenu > ul{
background:black;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li{
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li{
float: left;
position: relative;
}
#cssmenu > ul > li > a{
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .70);
line-height: 18px;
}
#cssmenu > ul > li:hover > a{
background:#24459A;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, .64);
}
#cssmenu > ul > li > a > span{
line-height: 18px;
}
#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
background: #24459A;
}
/* Childs */
#cssmenu > ul ul{
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background:black;
margin: 0;
padding: 0;
z-index: -1;
-webkit-transition: all .35s .2s ease-in-out;
-moz-transition: all .35s .2s ease-in-out;
-ms-transition: all .35s .2s ease-in-out;
transition: all .35s .2s ease-in-out;
}
#cssmenu > ul li:hover ul{
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top:64px;
left: 0;
}
#cssmenu > ul ul:before{
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a{
padding: 18px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
#cssmenu > ul ul li a:hover{
background:#24459A;
}
#cssmenu > ul ul li a:active{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMc7q1yrRGnmXr1FRNeocKeW8CS-ckHlnAgCTFDfs-lu2DUX2S588iWmnXRffyachPJJVeF2OxUQbVxMNWaphT78pKOyuw9H9n05efB812PSagTXl1ziEnQpmuA64ly60m-lmWBCVFzUE/s1600/menu-bg.png) repeat;
}menu > ul > li > ul > li > ul{
left: 202px;
top: 1px;
width: 200px;
}
#cssmenu > ul > li > ul > li > ul > li{
float: none;
} 

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

        <div id="cssmenu">
<ul>
<li class="active "><a href="/"><span>Home</span></a></li>
<li class="has-sub "><a href="#"><span>Templates</span></a>
<ul>
<li><a href="#"><span>Blogger</span></a></li>
<li><a href="#"><span>WordPress</span></a></li>
</ul>
</li>
<li><a href="#"><span>Write For Us</span></a></li>
<li><a href="#"><span>Videos</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy</span></a></li>
<li><a rel="author" href="#"><span>About</span></a></li>
</ul>
</div>

Replace the # With your Link

10. Now save your HTML/Javascript'.

    You are done...

Twitter Style Hover Button Recreated in Pure CSS

 How to add this button to your blog post

 

At first we have to add the skin of these both buttons. that's adding CSS part into your blogger template. Lets see how to do it.

• Go to Blogger Dashboard > Template
• Backup your Template before making any changes to your blog
• Click on Edit HTML
• Tick Expand Widget Templates
• Press Ctrl + F and search the code shown below ▼

]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

.btn {
position: relative;
display: inline-block;
overflow: visible;
padding: 5px 10px;
font-size: 18px;
font-weight: bold;
line-height: 18px;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
background-color: #CCC;
background-repeat: no-repeat;
border: 1px solid #CCC;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.5);
box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
text-decoration: none !important;
margin-top:15px;
margin-left:5px;
}

.tgtwit-btn {
color: white !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
background-color: #019AD2;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear,left top,left bottom,from(#33BCEF),to(#019AD2));
background-image: -moz-linear-gradient(#33BCEF,#019AD2);
background-image: -ms-linear-gradient(#33BCEF,#019AD2);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#33BCEF),color-stop(100%,#019AD2));
background-image: -webkit-linear-gradient(#33BCEF,#019AD2);
background-image: -o-linear-gradient(#33BCEF,#019AD2);
background-image: linear-gradient(#33BCEF,#019AD2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bcef',endColorstr='#019ad2',GradientType=0);
border-color: #057ED0 !important;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.tgtwit-btn:hover {
color: white !important;
background-color: #0271BF;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear,left top,left bottom,from(#2DADDC),to(#0271BF));
background-image: -moz-linear-gradient(#2DADDC,#0271BF);
background-image: -ms-linear-gradient(#2DADDC,#0271BF);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#2DADDC),color-stop(100%,#0271BF));
background-image: -webkit-linear-gradient(#2DADDC,#0271BF);
background-image: -o-linear-gradient(#2DADDC,#0271BF);
background-image: linear-gradient(#2DADDC,#0271BF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2daddc',endColorstr='#0271bf',GradientType=0);
border-color: #096EB3 !important;
}

Save your Template and we have successfully added the skin of Twitter style hover button. Use the following HTML code snippet to add this button to your website/blog post.

<a class="btn tgtwit-btn" href="Your Link URL">Button Text</a>

CSS3 Hover Animation Effect for Your Blog Post Title

How to add this animation to blog post title

As I mentioned above you can easily add this trick into your blogger blog by applaying simple CSS3 code into your template and you don't wanna add separate html code for this animation effect. Please follow the below steps.

 

1. Go to Blogger Dashboard > Template
2. Backup your Template before making any changes to your blog
3. Click on Edit HTML
4. Tick Expand Widget Templates
5. Press Ctrl + F and search the code shown below 

 ]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

.post h2 {
margin:.1em 0 0;
padding:0 0 4px;
font-size:1.0em;
font-weight:normal;
line-height:2.5em;
color:#444;
font-family: Oswald, Serif;
}
.post h2 a, .post h2 a:visited, .post h2 strong {
display:block;
text-decoration:none;
color:#444;
font-size:2.0em;
font-weight:normal;
font-family: Oswald, Serif;
}
.post h2 strong, .post h2 a:hover {
color:#0274be;
background: url("http://iconkits.com/images/vip/aerozone_arrow_small_preview.png") no-repeat 4px center transparent;
padding: 3px 10px 3px 50px;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
} 

Amazing CSS Image Circle Hover Effect For Blogger

In this post, im going to explain how to add
amazing circle image hover effect with CSS.
Im using CSS and HTML for this. Atctually
this is very   interesting,  It   make your blog
attractive, You can link it with special post.
I include demo For this. you can check it from
below link. Check my earlier post here

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* SCRIPT CODE */
.ch-item {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    cursor: default;
    -webkit-perspective: 900px;
    -moz-perspective: 900px;
    -o-perspective: 900px;
    -ms-perspective: 900px;
    perspective: 900px;}
.ch-info{
    position: absolute;
    width: 150px;
    height: 150px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.ch-info > div {
    display: block;
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-position: center center;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}
.ch-info .ch-info-front {
    box-shadow: inset 0 0 0 6px rgba(0,0,0,0.3);
}
.ch-info .ch-info-back {
    -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #000;
    opacity: 0;
}
.ch-img-1 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo5G78Dw6lUM0ZPYjgH316-69kDGC78FGNoCYrO5MUp1EiYJ-QGc2FL83gzqGVkZ61jDqvWC4cGYohUfc4TS4LIGf06qrxtqO6ZdPvUxM-DcvVrNcphZMgJJwJzt483zH4koBq0SKvPBg/s1600/chip_cake.jpg);
}
.ch-img-2 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhNPaqsnXbPAWUVBHKqUb4HEGJZAQUYzOCKif-U1jHfUEUXn7eXpPi2pRxIxW4JmGomTspbUeceWB1n_Jf2pP0FZce2xSv64z_VX0XTig9lOkjNyz_rOzX1gxqaylWUpqZL4PY0QnOrcs/s1600/Blogger.png);
}
.ch-img-3 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcI6ozTFxB9tXRo8AQFxBb2SmqYJH8svR6YPl-BRuAo3C58WCuuzCdd6btThtAzPq6Y3_r0fZim5CDoy4fD0Ve4Y6cGa3ejAYXPQ6XqAnUPYxgNiMapj1U1LpA5f4kTVAlN-pM5jL6YpQ/s1600/photo-7.png);
}
.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    margin: -10px 15px;
    padding: 60px 0 0 0;
    height: 110px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);}
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: -95px; 30px;
    font-size: 12px;}
.ch-info p a {
    display: block;
    color: #fff;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;}
.ch-info p a:hover {
    color: #fff222;
    color: rgba(255,242,34, 0.8);}
.ch-item:hover .ch-info-front {
    -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;}
.ch-item:hover .ch-info-back {
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;}
.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;}
.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;}
.ch-grid:after {
    clear: both;}
.ch-grid li {
    width: 150px;
    height: 150px;
    display: inline-block;
    margin: 4px;
}

*You can change image as your like img using 180x180 pixel

7. Go to blogger  and click drop-down like  1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<section class="main">
           
     <ul class="ch-grid">
       <li>
         <div class="ch-item">               
             <div class="ch-info">
                 <div class="ch-info-front ch-img-1"></div>
                    <div class="ch-info-back">
                                    <h3>Cake</h3>
                                    <p>by Blogtasz<a href="#">View on Dribbble</a></p>
                                </div>   
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="ch-item">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-2"></div>
                                <div class="ch-info-back">
                                    <h3>Blog</h3>
                                    <p>by Blogtasz <a href="#">View on Dribbble</a></p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="ch-item">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-3"></div>
                                <div class="ch-info-back">
                                    <h3>Nature</h3>
                                    <p>by Blogtasz <a href="#">View on Dribbble</a></p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
               
            </section>

 *You can change the header according to image, and URL also.

10. Now save your template. You are done.