How To Add Author info Widget in Blogger

How To Add Author info Widget in Blogger

1.Log in to your dashboard-->Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this: ]]></b:skin> Tag.

4.Copy below code and put it before ]]></b:skin>

.author_info {
float: left;
width: 533px;                 /* Set Width of Widget As you want */
padding: 10px;
border: 1px solid #a1cb26;    /* Border of Widget */
margin-bottom: 15px;
margin-top: 15px;
background: #F0FDC6;          /* Background Color of Widget*/
}
.author_info h3 {
font-size:17px;
color:#001530;                /* Text color of "This Post is Written" by */
margin-bottom: 5px;
}
.author_photo {
float: left;
margin: 0 10px 0 5px;
}
.author_photo img {
border: 3px solid #ccc;       /* Border color of Image*/
 height: 100px; width:100px;  /*Height and Width of Avatar of Author */
}

5.Now Scroll down to where you see this: <data:post.body/>

6.Add Following code after <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpjXujFQbR1tSalJQUxCsubU3XO1wRnH4NEWbVtJUyzca5hvOQIhrewvO3zUVRY2RIe5LGdYO5sy1LGdonnur93rzQ_DZK7o45xiEm7RBS_tUe47TQ46TkH88UFfpo2jbfIfsS7DWiaCo/'/></div>
<h3>This post is written by:<a href='http://www.bloggertricksandtoolz.com'>Sameera</a> </h3>

<p>I am Sameera and write trick and tips on blogger, wordpress and different hacks. <a href='http://www.bloggertricksandtoolz.com/about'>Click Here</a> to Know more about Author.</p><p>If you like This post, you can follow bloggertricksandtoolz.com on <a href='http://twitter.com/bloggertoolz'><b>Twitter</b></a> or Be fan on <a href='http://www.facebook.com/pages/Blogger-Tricks-And-Toolz/142779799101916' target='_blank'><b>Facebook</b></a>.</p>
</div>

</b:if>

Note: Change Read color to with your content and change green color to your prefered Text.

7. Click Save Template and you are almost done.

Cheers