Add About The Author Widget For Blogger

In this post I will show you how to add About The Author widget for blogger. This widget will add a beautiful About The Author box after the each blog post. In About The Author widget you will have some information about the author. In this way your blog look like profession blog.

Just follow these simple steps to add the About The Author widget in blogger.

Don't Forget to Backup Your Blogger Template.

Step 1. First of all log in to your blogger account. click on drop-down menu and then click on Template.

Step 2.   Click on Edit HTML then mark on Expand Widget Templates.

Step 3.   Now find ]]></b:skin> ( press CTRL + F for search bar ) and just before / above ]]></b:skin> paste the following code.

.authbio{
color: #555;
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 3px solid #09f;
width: 570px;
padding: 10px 0px 30px 0px;
margin: 10px 0 10px 0;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
.authbio img {
    height: 100px;
    width: 100px; 
float:left;
border:3px solid #cccccc;
-moz-border-radius:60px;
-webkit-border-radius:60px;
-o-border-radius:60px
padding: 0px;
margin-left:5px;
margin-top:0px;
margin-bottom:25px;
margin-right:12px;
}
.authbio h3{ font-family:Verdana, Geneva, sans-serif;
background-color:#09F;
color: #FFF;
padding: 5px 0 5px 0;
margin: 10px 0px 5px 133px ;
}
.authbio a{
text-decoration:none;
font-style:oblique;

} 

Step 4.    After that find <data:post.body/> and add the following code after / below the <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authbio'>
<div style='float: left;'>
<img alt='The author of IACTips' src='https://en.gravatar.com/userimage/35450306/bd0cc97282cfd7e7c8a1f9ec27cb98fe.jpg'/></div>
<h3><strong>About The Author:</strong></h3>
Asad Ullah: I am just a simple blogger. I hope, IACTips can helps many people or bloggers to modify their blog easily. If you like this blog, you can follow my blog.
<a href='http://iactips.blogspot.com'> IAC Tips </a>
</div>
</b:if>

Now click on Save Template.  

• Change the Green colour text in code to your text.
• If you want to change image change Red colour link in code to your image link.

Drop Your Comments..........

Share it Please

Tweet

Unknown

I am a student of computer science.Owner of IAC Tips blog. I love to share my knowledge and experience with others. Follow my blog for tips tricks of internet, computer and software.