Add Author Information Below Every Blog Post In Blogger

Adding Author information below post is very important if you want to verify your authorship in Google.I made this gadget it is awesome because it is having Hover effect and also active effect.In normal position color of this box will be yellow but when you mouse over it then it changes it color to green and when you click on box it will change it color to Red.

Now lets see how to add this widget to blogger blogs.

Step 1

• Go to Blogger Dashboard > Design > Edit HTML
• Search  ]]></b:skin> (How To Search)
• Add below code just above  ]]></b:skin> and save template.

.author_info {
 float: left;
 width: 520px;
 padding: 10px;
 border: 1px solid #000000;
 margin-bottom: 15px;
 margin-top: 15px;
 background: #FFFF7F;
        font-family:verdana;
}
.author_info:hover {
 border: 1px solid #2EFE2E;
 background: #E0F8E0;
}
.author_info:active {
 border: 1px solid #FF3300;
 background: #FECCBF;
}
.author_info h3 {
 margin-bottom: 10px;
        font-family:consolas;
}
.author_photo {
 float: right;
 margin: 15 0 0 10px;
}
.author_photo img {
 border: 1px solid #666;
}

Step 2

• Go to Blogger Dashboard > Design > Edit HTML
• Search <div class='post-footer-line post-footer-line-1'/>  (How To Search)
• Add below code just above   <div class='post-footer-line post-footer-line-1'/>  and save template.

&lt;b:if cond=&#39;data:blog.pageType == &amp;quot;item&amp;quot;&#39;&gt;
&lt;div class=&#39;author_info&#39;&gt;
&lt;div class=&#39;author_photo&#39;&gt;
&lt;img alt=&#39;author&#39; src=&#39;YOUR IMAGE URL&#39;/ height=&quot;120&quot; width=&quot;120&quot;&gt;&lt;/div&gt;
                    &lt;h3&gt;About Author:&lt;/h3&gt;              
                                        &lt;p&gt;&lt;a href=&#39;http://lordhtml.blogspot.com&#39; title=&#39;Posts by Aumkar Thakur&#39;&gt;Aumkar Thakur&lt;/a&gt; He is WebDesigner who know lot of SEO tricks You Can See his Blog  &lt;a href=&#39;http://lordhtml.blogspot.com&#39;&gt; Lord HTML&lt;/a&gt;&lt;/p&gt;
                    &lt;p&gt;Aumkar Thakur is a professional blogger and web developer. Follow him on &lt;a href=&#39;http://twitter.com/technologyblg&#39;&gt;Twitter&lt;/a&gt; or &lt;a href=&#39;http://www.facebook.com/&#39;&gt;Facebook.&lt;/a&gt;&lt;br style=&#39;clear:both;&#39;/&gt;&lt;/p&gt;
                   &lt;/div&gt;
&lt;/b:if&gt;

 I highlighted the keyword you need to change little hard but you can do it.