Blogger Author Box For Blog Author [Simple Css]

 

Blogger doesn’t has any Author Box. But you can add it using CSS. It’s very simple to add. And you may’ve seen tutorials on how to add an author box in blogger but this tutorial also shows you how to add it on multiple authors! This author boxes are strongly recommended for blogs having multiple authors.

Author Box For Blogger :

Add the Below Css Code Just Beofre This Code ]]></b:skin>

a.linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=40);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

.socialize{background:url(http://downloads.ibloggrmaster.org/images/34023454.png)no-repeat;width:515px;height:55px;padding-top:7px;padding-bottom:5px;padding-left:80px;}
.authorbox{width:555px;height:175px;background:url(http://downloads.ibloggrmaster.org/images/ff.png)no-repeat;font-family:Arial Rounded MT Bold,verdana;font-size:13px;h3-font-size:15px;color:#121212;}

.left {
float:left;
height:100px;
margin-bottom:-5px;
margin-left:15px;
margin-right:25px;
margin-top:-10px;
padding-top:-55px;
width:200px;
}
.right {
float:right;
margin-top:-50px;
width:430px;
}

HTML For Author Box :

Add Below HTML code After This Code <div class=’post-footer-line post-footer-line-1′>

<a class=”linkopacity” title=”Tweet it on Twitter” target=”_new”><img title=”Tweet this Article and show your followers your Super Cool” src=”http://downloads.ibloggrmaster.org/images/twitter-logo-square.png” border=”0″ alt=”Twitter” /></a>
<a class=”linkopacity” rel=”external nofollow” target=”_blank”><img title=”Post this Article to Facebook and share with your friends” src=”http://downloads.ibloggrmaster.org/images/facebook-logo-square.png” border=”0″ alt=”Facebook” /></a>
<a class=”linkopacity” rel=”external nofollow” target=”_blank”><img title=”Post this Article to Technorati and spread the Word!” src=”http://downloads.ibloggrmaster.org/images/technorati-logo.png” border=”0″ alt=”technorati” /></a>
<a class=”linkopacity” rel=”external nofollow” target=”_blank”><img title=”Save to Delicious Bookmarks” src=”http://downloads.ibloggrmaster.org/images/delicious-3.png ” border=”0″ alt=”Delicious” /></a>
<a class=”linkopacity” rel=”external nofollow” target=”_blank”><img title=”Bump This Post” src=”http://downloads.ibloggrmaster.org/images/designbump-logo-square.png ” border=”0″ alt=”DesignBump” /></a>
<a class=”linkopacity” href=”mailto:rizwan@ibloggrmaster.org” target=”_blank”><img src=”http://downloads.ibloggrmaster.org/images/mail-square.png” border=”0″ alt=”EMail” /></a></div>

<div style=”clear: both;”>
<div class=”authorbox”>
<div class=”left”>
<h5>Author</h5>

<h3>Raja Rizwan Khan</h3>

<a href=”http://www.ibloggrmaster.org”><img style=”border: 0pt none; padding: 8px; background-color: #c3c3c3; width: 70px; height: 70px;” src=”http://downloads.ibloggrmaster.org/images/photo.jpg” alt=”" /></a></div>

<div class=”right”>
Write here About You
<a href=”http://twitter.com/rizztaxtic” target=”_blank”><img style=”float: right; margin-top: -30px; padding-right: 50px; padding-bottom: 25px;” src=”http://downloads.ibloggrmaster.org/images/Bird-Alt-64.png” border=”0″ alt=”Black_Twitter_Bird” />
<h4>Follow Me on Twitter !</h4>

</a></div>
</div>

<div style=”clear: both;”>
<!– Author Box –></div>
</div>

 I hope You Will Like This Author Box :) if You Facing Any Problem Then Comment Below , I will Help You Out