Customized Wordpress Style Author Bio Box To Blogger

In this post, im gonna explain how to add customized wordpress style author  bio  box for blogger. You  can add  this  box every end of y our  blog  post. Change  the usernames according to your details,i mentioned it with  highlighting the code.Other  thing is,  for  this bio box.  you  can  use  80 x 80 pixel  image.

Wordpress Style Author Bio Box To Blogger Part 1

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    <div class='post-footer-line post-footer-line-1'>

6. Paste below code Before <div class='post-footer-line post-footer-line-1'> tag

/* Code for the author box starts here bloggertrix.com */
#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:650px; height:90px; font-family:Georgia, "Times New Roman", Times, serif; }
#author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc;margin-top: 0px; }
#author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;
box-shadow: 0 0 3px #CCC; padding:3px;}#author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }
#author-info h5 {color:#666; text-transform:none; font-size:11px; letter-spacing:0; font-family: Georgia;}
#author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}

.social-connect-widget{width:400px;}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}

.social-connect-widget img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}

#news-letter{margin-left:-35px;clear:both;padding-top:5px;width:300px;margin-top:-5px;}
.msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:15px;margin-top:5px;background: url(http://cdn1.iconfinder.com/data/icons/UII_Icons/48x48/email.png) no-repeat;}

* { margin:0; padding:0;}#author-connect{width:21%; float:right; margin-right:8%; }

</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Author Name&quot;'>
<div id="postauthor" style="margin: 100px 0 0 300px;">
<div id="author-info">
 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHJ6Gr_cduD0-b3RllsIEB9qLoy_KU-yFx9Q-PpfqBk4FABEmcKXYT5sx2JbKlDyzLJrwfPId805MqahK-llUvUexOCxA8cYVfvqtwemRVOIno5KPTkU_w2q1poF6pp8QXnjwCjP9m7M/s1600/author.jpg'  height='80' width='80' /><h6 style="font:Georgia">Article by <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h6>
<h5>AuthorName has Written Many Useful Articles.</h5>
<p>If you like This post, you can follow bloggertrix on <strong> 
<a href="http://twitter.com/bloggertrix" rel="nofollow" >Twitter  </a> </strong>. Subscribe to <strong> Bloggertrix feed via <a href="http://feeds.feedburner.com/bloggertrix" rel="nofollow" >RSS</a> or  <a href="http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix&amp;loc=en_US" rel="nofollow" > EMAIL </a>  </strong>to receive instant updates.</p></div>
    
<div id="author-connect">
    
<div class='social-connect-widget' style='margin-top:10px;margin-bottom:10px;margin-left:-15px;'>  
<a href='http://twitter.com/username'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSgqpxSZXU9-lWeC06ymK0OTguzOs4eT5IptXSruHH5-jFHM2tMUQIyKgzfJsU-YYn4yc2nOKnfkZamsyyXQ8i_AvpwTfRdEdi-oigUtKnZTsvfacs5nZsJb8Vqa3sPhyphenhyphenTzkX-bwXBd9M/s1600/twitter.png' title='Follow Us on Twitter!'/></a> 
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTw_1YE4fZJnEeUIlOSDVUCIsO5Acml2l8hjrzL4-K5p4-IX9NXGp_mORjFZQxTnAs9ht1zsbroIBYhKhW0ShcOssoySqI94SJNQMW0TJOIcO9Pg4M_dOuAr1gC9syI4TSoMZCcvHX6u4/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVHdJdZVxy7E4nEnvJnfz9jZFeRxlVM_zOY8pAPIGyLWo9vQeOg4RHt__8AnaBZ5msdX1xit4c7BMFk8k2l9z60VpGr15FU4aIjLSN5_nOY2iCDwWjYhRSGNhYlhRij97dkeJ3LRCmjBE/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEOVlkhvKMFurInAD3tpiTFnJCF2JLMaHlwE89fFwGqZNJOvZsxdUps_LGjxI69Cz89Id1zi72N-ilI7h7tJzC6LFRF06CVM01Fh1IVjs7qIg6CiKjpMiRFc2R9H2MUPPADhSgkh5Llw/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIg5-t864I5sUwEVdpJ8NMLJlg1-Yj_I4C97Qe4tmpe4PRe-LKoszbqrJpDXH64cIIhoyHBCFOKYqVTy2RSMJQTovQt0dlh5pA1DEYzXid5_cvx-gmw1DprztWqRb3iLa5Zvw4tFygaOI/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/bloggertrix'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV000rKRuUguqrCHgOqVHcq-FR0rwHPaANo0fP9HyZRHw_WEQSLTL4j0Xb5SMmohKJEHdeX27OwEC7jnp2R5kyK_bEKANjQM3_a3HmINLWejTuut1YSYcx8gVHD1zW1F9CuqvRoFcVBTA/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW9s6vjff7pWTODTLAvONrKLnpgoqh_iHAoCPBx6mj8QJe7hOInq2m0wqGLDlohGsK7e4ZZHcGuqN5jAEAd6KsvjKhD6R5ymA90On10don0Z_5tM79x4KC4Gc87-Vp3FYUDNXF-BUMow0/s1600/image.png' target='_blank'/></a>
</div>
<hr style="width:155px;" />
    <div id="news-letter">
<span class="msg-box"></span>
<b>Subscribe</b>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="ebutton3" gtbfieldid="2" maxlength="100" name="email" onfocus="this.value = '';" size="25" style="color: #333333; font-size: 11px; height: 21px; width: 130px;" type="text" valign="middle" value="Enter your email address" />
<input name="uri" type="hidden" value="bloggertrix" />
<input name="loc" type="hidden" value="en_US" />
<input class="ebutton2" id="submit" style="font-size: 11px;" type="submit" value="Send" />
</form>
</div>
</div></div>
</b:if></b:if>​

*Replace  USERNAME  With Twitter User name.
*Replace  USERNAME  With faceook User name.
*Replace  USERNAME  With stumbleupon User name.
*Replace  USERNAME  With digg User name.
*Replace  Bloggertrix  With feedburner name.

4. Save HTML/Javascript. you are done.