Add About Author Box Below Every Post In Blogger

For a Blogger its very important to tell the his audience who is the author of the blog and About the Author is the best & most successful way to make awareness among the users who is the behind the success of this blog. Author Box under every post which shows some description and social links of the author of the article. Unfortunately blogger doest gives us this option by default . Dont worry guys I m gonna share a beautiful hack with you which will allow you to add a fully customizable About The Author Box below your every post .

About Author Box Demo

Live Demo

How To Add Beautiful About Author Box To Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

]]></b:skin>

• Now replace it with the code shown below

#authorbox {
background:#333 url(http://2.bp.blogspot.com/-L5Tvv0yJrr4/TvsFt-Mh82I/AAAAAAAACC0/9eva5jXci8U/s1600/about_author.jpg) no-repeat scroll left top;
width:auto;
overflow:hidden;
color:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin:5px auto;
padding:40px 10px 10px 20px;

}

#authorbox:hover {
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}

#authorbox h4 {
font-size:26px;
color:#fff;
clear:none;
margin:0;
padding:10px 10px 5px;
}

#authorbox .author_small {
font-style:italic;
}

#authorbox img {
-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
float:left;
border:4px solid #336699;
margin:10px;
padding:0;
}

#authorbox img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}
#authorbox p {
color:#fff;
font-size:14px;
margin:0;
padding:0 10px 10px;
}

#authorbox a {
font-weight:bold;
color:#336699;
}
]]></b:skin>

• Now Press Ctrl + F and search the code shown below

<div class='post-footer-line post-footer-line-1'>

• Now genrate the code from the generator and place it below <div class='post-footer-line post-footer-line-1'>

Widget Generator

Like it? Share it.