Add WordPress Style Author Bio Box-2 In Blogger Blog

Last time I shared "Add WordPress Style Author Bio Box-1 For Blogger Blog". So, I am here for another different style WordPress author bio box. After adding this widget your blog will get WordPress like look. In this tutorial, I'm going to share how to add customized WordPress style author bio box to your blogger blog.

You can add this author box below every blog post. This author box also contains Twitter, Facebook, StumbleUpon, Google Plus, Pinterest and RSS. You can use 80 x 80 pixel image as a author profile picture. Let's start the tutorial:


Live Demo You May Like To Read:

• Make Floating Social Bar For Blogger Blog
• CSS3 Zoom Out Social Sharing Widget For Blogger Blog

How to Add WordPress Style Author Bio Box In Blogger Blog

• Go to Blogger Dashboard > Template 
• Click EDIT HTML Button > Proceed > Tick The 'Expand Widget Templates' Box.
• Press (Ctrl+F) & Find Below Code

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

• Paste Below Code Before <div class='post-footer-line post-footer-line-1'>

<style>#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/AVvXsEg9-GQ0CNIb1CM9wFMpTkkbzHzVXcM7gyqeIFf-SW-9GW4-3Gh20qfOGeerimKpn4Awp9UhZnovQ97T1eUXxp6TTQ_-APNUnZ8mHmrUOmWKgORVjnaOwHmS71EMeR7DB-HnRcmZ9EiE1BD5/s1600/gravatar.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 Blogs Daddy on <strong> 

<a href="http://twitter.com/Blogs Daddy" target='_blank' rel="nofollow" >Twitter  </a> </strong>. Subscribe to <strong> Blogs Daddy feed via <a href="http://feeds.feedburner.com/BlogsDaddy" target='_blank' rel="nofollow" >RSS</a> or  <a href="http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy&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/BlogsDaddy' target='_blank'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXXyX-JZBWxPIT7TffGWO_iCAmiTRrMtk4ySGenm8_yVr6nZ_KZcBdrCDouR3WJgacXCi09Vvu3hSHEKPNdCA7awdNlSeaOd14LDf7ncI7LV4R8AVrKl_zdl0Q_OpE441NhMlBdt8NoGI/s1600/twitter.png' title='Follow Us on Twitter!'/></a> 

<a href='http://www.facebook.com/BlogsDaddy' target='_blank'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnIUkVyxQhMt4X8Sm9xSg-kMr1njwUDE67r_2EmU0F4a-4iWMm1ilFEHrEsxtEjFM6ECe8rvqUSM9pWR_l444Otlj9RYgfF6Gms-qVm5FlBrSCiqXSjCYzalBFNteMcnnJ57DMDuCMt3o/s1600/facebook.png' title='Be Our Fan'/></a>

<a href='http://www.stumbleupon.com/stumbler/gaganmasoun' target='_blank'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirRuJTCaVSmztL_qqf2JZC4nSmqHP2FGJKeNCZeHPUdTHHq4DRxMTsexpqh234tTtO4_qmZMHGJ771S5xehlkMI2KKWhKXvubEDymPOkL1wyt1x6IXUuyzUCQ5af6SXwxXjqCb98nQ9Yc/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/u/0/117100549673033253859' target='_blank'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL2d6GW2uiRIDUDoDK9SuEzKsIZgCjBdtXTdksexOSqJUs8hD-ovPQ11IeJPQZMWJSZB0wVrR6hroTI-g7rgQwXoL0M-mxsLJcY28BxBdoeUcj6zBKaWnL3tW6RfnCVrTZwEeZDRTfw10/s1600/google.png' title='Follow Us'/></a>

<a href='http://pinterest.com/gaganmasoun' target='_blank'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmpZ3uoilYfVT14upembVC4aaspY0JIA3I8bZppPl-zb03w7QBvK7LxK0iwzh623LTsD6UdtlWnLH7QdJoOgGv8ikYNHU2ohWqKrrDG3dYsP4dv6cCYLvXIMLlmwCKfIMtszN3CLUdOuD/s24/BlogsDaddy-Pinterest-Button.png' title='Follow Us'/></a>

<a href='http://feeds.feedburner.com/BlogsDaddy' target='_blank'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYQ9HwslpXuQ_fGp3l1OeQtV4XMCr0xwi3nAJ6aRkXplOgDKitMNEWIUaJPe-FY7JCne1kT68SO45N_oJHtO7dNEwY20xFBS3jnWni-t-3nR0nbf6X8T0rIUilbL6b3LlC17U0yKS9gRE/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.blogdaddy.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj89kBdLa3oPefsHQXbUJQFUZEP3xPKEFCYEWht0heAuFzw207LpmBckEQRfcNWz_7ZnB-ojGu9m8Ht44mrZwFiP_4Eyhl-64itxwBuXqhE6UJ4Hzt50n8xNu4xHakrG-_Uawq_Lwqw_yY/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=BlogsDaddy', '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="BlogsDaddy" />

<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>​

Remember Notes : The social and feed links are highlighted in yellow, you need to change these with your own links. You can replace pink color highlighted link with your own author pic and you can change author name by changing "Author Name" in red color.

• Save Your Template and It's All Done.

If you need any help regarding this tutorial then please ask via comments or E-mail me. Stay blessed and Happy Blogging.

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.