Add an Awesome About Author Info Widget Below Your Posts | Blogger

Hai friends ! This is a post to describe how to Add the Author information widget below every post on blogger. Well this is an Awesome Widget Created by using Css.This helps readers to know about the Author and about his bio in short.

Why because The Author is Heart And Soul of a blog.It is the Author Who creates many posts and Attracts the Users.And shares A lot of knowledge with others worldwide.we know it's natural that people are keen to know about the person who is behind the blog who writes the Posts.Some times the blog visitors want toContact with the author and discuss about the things that he blogs. At such times, the "About The Author" widget is very useful for both the Author and also for the readers.


In this post I will explain how to add About the author widget to a Blogger/Blogspot blog.It is Very simple to add and takes just a few minutes.so proceed to the below steps now.Before Proceeding Once check the Below ScreenShot !


So this is how the Widget look like :.

How to Add this widget to Blogger blog :.


Adding this Widget Involves two Steps:.

• By Adding Css code.
• Adding Html Code.

Adding Css Now :.


First Login to your Blogger < Navigate to Design < Edit Html .


Backup your Template ! Don't forget to Backup template.bcoz in case if something goes wrong then You can be Able to get it back.


Now Find for  ]]></b:skin> and add the Below code Just Above  ]]></b:skin> .

#authorbox {<br /> background:#333 url(http://2.bp.blogspot.com/-L5Tvv0yJrr4/TvsFt-Mh82I/AAAAAAAACC0/9eva5jXci8U/s1600/about_author.jpg) no-repeat scroll left top;<br /> width:auto;<br /> overflow:hidden;<br /> color:#fff;<br /> -moz-border-radius:15px;<br /> -webkit-border-radius:15px;<br /> border-radius:15px;<br /> margin:5px auto;<br /> padding:40px 10px 10px 20px;<br /> font-family:verdana;<br /> }<br /> #authorbox:hover {<br /> -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);<br /> -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);<br /> box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);<br /> }<br /> #authorbox h4 {<br /> font-size:16px;<br /> color:#fff;<br /> clear:none;<br /> margin:0;<br /> padding:10px 10px 5px;<br /> }<br /> #authorbox .author_small {<br /> font-style:italic;<br /> }<br /> #authorbox img {<br /> -webkit-transition: -webkit-transform .15s linear;<br /> -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);<br /> -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);<br /> padding: 5px 5px 5px 5px;<br /> -webkit-transform: rotate(1deg);<br /> -moz-transform: rotate(1deg);<br /> float:left;<br /> border:4px solid #ff4408;<br /> margin:10px;<br /> padding:0;<br /> }<br /> #authorbox img:hover {<br /> -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);<br /> -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);<br /> -webkit-transform: rotate(+9deg);<br /> -moz-transform: rotate(-1deg);<br /> }<br /> #authorbox p {<br /> color:#ffffff;<br /> margin:0;<br /> padding:0 10px 10px;<br /> }<br /> #authorbox a {<br /> color:#ff4408;<br /> text-decoration:none;<br /> }

2) Now Adding Some html to the Widget :.


Again now go back to the template Edit html
Check the Expand widget template option.


Now Find  the below Code .<data:post.body/>


<data:post.body/> Now paste the below code just below it




<div id="authorbox"> <img alt="" src="http://images.orkut.com/orkut/photos/PQAAABKia-gtW6ZivwVo50Ma9a_7GMZT64-_do3aOCYcXWTzrho3UdL9oNv23npxdj5LrUHwrNgxZ-yI0g5qZqMLZUAAm1T1UAhVFgLVnhEuQBWILclY5YeJsE4N.jpg" height="100" width="100"> <h4><a href="http://technouniversityworld.blogspot.in/" title="Posts by Saikiransama" rel="author">Posts by Saikiran Reddy Sama</a></h4> <p> Saikiransama A Young And Passionate Blogger , admin of This blog. Basically I am Engineering student but still blogging is my passion Iam a Free Lancer.My Areas of interest Are Blogging,Social networking,Hacking,virus writing,Friendship..etc. I enjoy blogging because its not only provides a good service to the people who read the blog, but one can also gain knowledge through the blog. Follow Me on Twitter saikiransama </p> <p>Follow Me On <a href="http://www.twitter.com/saikiransama">Twitter</a> Or <a href="http://www.facebook.com/saikiransama">Facebook</a></p></div>

<div id="authorbox"><img alt="" src="http://images.orkut.com/orkut/photos/PQAAABKia-gtW6ZivwVo50Ma9a_7GMZT64-_do3aOCYcXWTzrho3UdL9oNv23npxdj5LrUHwrNgxZ-yI0g5qZqMLZUAAm1T1UAhVFgLVnhEuQBWILclY5YeJsE4N.jpg" height="100" width="100"> <h4><a href="http://technouniversityworld.blogspot.in/" title="Posts by Saikiransama" rel="author">Posts by Saikiran Reddy Sama</a></h4><p>Saikiransama A Young And Passionate Blogger , admin of This blog. Basically I am Engineering student but still blogging is my passion Iam a Free Lancer.My Areas of interest Are Blogging,Social networking,Hacking,virus writing,Friendship..etc. I enjoy blogging because its not only provides a good service to the people who read the blog, but one can also gain knowledge through the blog. Follow Me on Twitter saikiransama </p><p>Follow Me On <a href="http://www.twitter.com/saikiransama">Twitter</a> Or <a href="http://www.facebook.com/saikiransama">Facebook</a></p></div>

You can change all the part of the code in Color , bold according to your needs. Now click on Save Template and check any post in your blog. Remember that this widget will appear only on Post Pages and not on the Home Page.


If you like this Post.then Just take Few Seconds to Share it