HOW TO ADD BEAUTIFUL ABOUT AUTHOR BOX BELOW EVERY POST IN BLOGGER

HOW TO ADD BEAUTIFUL ABOUT AUTHOR BOX BELOW EVERY POST IN BLOGGER

This tutorial will show you How To Add Beautiful About Author Box Below Every Post In Blogger. You Can Add Simple And Beautiful Author Box Below Every Post In Blogger By Adding Some CSS And HTML Code. About Author Box Is Used To Show Information About Author.

ABOUT AUTHOR BOX DEMO

Live Demo

HOW TO ADD BEAUTIFUL ABOUT AUTHOR BOX TO BLOGGER

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now  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 shown below and place it below <div class='post-footer-line post-footer-line-1'>

• Now save your template