Nice Author Box Widgets For Blogger

Tweet

Save on Delicious

I have seen many time that many Wordpress popular blog have a beautiful section to know every that who is the author of this post or blog. I have also seen that some blog have a particular page or text box in footer to show something about the blogger. I think a Author box in post footer make your blog more professional. You may be thinking of that why i dont adding a author box in post footer actually i am thinking about it maybe some days later i will also add a author box in this blog. Any way I strongly believed that  a nice author box under the post footer make your blog more professional and also you add a twitter or facebook link that would be helpfully for increasing follower and fan. So let see how to add a Nice and Beautiful Author Box Widget Under your blog post footer like many popular wordpress blog.   

This is a screen shot of this widget :

About the author widget for blogger

How to Add About The Author Widget In Blogger? See bellow


1.Open your Blogger Dashboard and then go Design and then Edit HTML
2. Find the bellow code. For faster search use Ctrl + F

]]></b:skin>

3. Add the bellow code just before it .

.authbio{

color: #666;
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 1px solid #ccc;
width: 540px;
padding: 15px;
margin-bottom:25px;
}
.authbio a{
text-decoration:underline;
}
img.alignleft {
float:left;
background-color: #c4e3e0;
border:1px solid #c4e3e0;
padding: 5px;
margin-left:2px;
margin-top:0px;
margin-bottom:25px;
margin-right:12px;
}

4. Now search for the following text
                               <data:post.body/>

5. Now add the following code after it 

<div class="authbio">
<div style="float: left;">
<img alt="" src="http://i.imgur.com/VHDtW.jpg" />
</div>
<h1>
About The Author</h1>
Add Your Personal Information here. You can also add some link of you like facebook, twitter or linkdin profile anything you want </div>

** Replace the red color link with your image link.
Save it and See how it look like. I hope you will understand how to add this. If any problem let me know by comment i will try to assist you .

Get Free Updates: Note : You will find a confirmation link in your inbox or junk folder