Add Professional Author Bio Box In Every Posts For Blogger Prajjwal Rajput Sunday, July 13, 2014 1 Comment

Hello Bloggers today I'm back with a awesome beautiful posts for your blogger blog. But we had previously discussed the How To Invite Multiple Authors in Blogger Blogs I hope that posts are very helpful for you and your blogger because this posts are using I thing all bloggers and webmasters to daily publishing new post on their blog and sites this post are very helpful which is going to help you definitely. So lets walk to our today's post that is how to add professional looking author bio box in every post bottom in blogger blogs. This widget is also called as About Author Widget. because this contain lots of feature are represent to blog's author which is easily read your own information by your blog visitors. I think you can see this widget   approximately all websites and blogs. This about author box contains lots of features such as author profile pictures, author bio or introduction, hover effect on author image and social medias buttons with thumbnails. You can see it's live so click below Live Demo button.

LIVE DEMO

I hope you can see it's demo and you're like this widget? I know you are like this widget and now your wish to add this in your blogger blog. Before begin the tutorial I would like to explain its feature and I can explain that how it work and how it made.

How It Work?
This Author box widget work only CSS and HTML language which make it's more beautiful, elegant and attractive this widget approx all browser supported Internet explorer to Maxthon web browser so you no need to add additional codes to working in all browsers this widget is hover effect function is include because  it is specially made for attraction and this function has build with CSS hover effect means when your mouse going to your image then your image is automatically animated through the CSS.

How It Made?
This widget is made from HTML and CSS languages which makes it more beautiful, faster and attractive. This widget specially made for blogger platform base blogs because in currently days blogger platform has used by million of bloggers.This author bio box are originally designed and developed by Prajjwal Rajput so all credits goes to them. now let's jump to start this tutorial to install this in your blogger blog.

How To Install This In Blogger Blogs?
My Advise : I think you can make your blogger template backup and save in your hard disk before install this widget in your blog. Just follow below steps.

• Go To Blogger Dashboard>>Template>>Edit HTML
• Find this below code using (Ctrl+F)

]]></b:skin>

• Then Paste the following below code above it.

.NBT-aboutauthor{
float:left;
width:500px;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:url('http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png');
color:#444444;
-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 10px  rgba(0, 0, 0, .3);
}
.NBT-aboutauthor h2
{
color:#1399E6;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;margin-bottom:-6px;
}
.NBT-aboutpic{
float:right;
margin:0 0 0 10px;
}
.NBT-aboutpic img{
border:1px solid #999999;
-webkit-transition:-webkit-transform .15s linear;
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;transition: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);
box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px 5px 5px 5px;-webkit-transform:rotate(+5deg);
-moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg);
-o-transform:rotate(+5deg);transform:rotate(+5deg);float:left;
}
.NBT-aboutpic img:hover{
background:#FFFFFF;
-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 10px  rgba(0, 0, 0, .3);
-webkit-transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-ms-transform:rotate(-1deg);
-o-transform:rotate(-1deg);
transform:rotate(-1deg);
}
.NBT-aboutsoc img
{
height:35px;
margin-bottom:-13px;
}
.NBT-aboutsoc  p
{
font:16px georgia;
color:#ffffff;
background:#1399E6;
display:inline;
border-radius:5px;
padding:5px;
margin-right:30px;
}

• Now find the below code

<data:post.body/>

• I you can see <data:post.body/> more than one 
• then you can stop at second one
• Then paste the below code above it

<b:if cond='data:blog.pageType == "item"'>
<div class='NBT-aboutauthor'>
<div class='NBT-aboutpic'>
<img alt='Author image' height='150' src='profile picture address' width='150'/>
</div>
<h2 >About the Author :</h2>
<p>Add Your Bio Here </p>
<div class='NBT-aboutsoc'>
<p> Connect with him on : </p><a href='Facebook address'><img src='https://lh5.googleusercontent.com/-h5NAlLQWiM8/U8JWT0HroFI/AAAAAAAAAhE/vtZ504Brf94/h120/facebook.png' title='Facebook'/></a>    <a href='Twitter address'> <img src='https://lh3.googleusercontent.com/--N6LpzPfuzk/U8JWTzzRDFI/AAAAAAAAAhA/5tX4HzVO8UE/h120/twitter.png' title='Twitter'/></a> <a href='Google plus address' > <img src='https://lh3.googleusercontent.com/-eh1fKbbGL_Q/U8JWTlTCWMI/AAAAAAAAAg8/Zj3n_WKvTaw/h120/Logo_googleplus_64x64.png' title='Google plus'/></a></div>
</div>
</b:if>

• Replace Author image with your author image
• Replace Add Your Bio Here with your short bio or introduction\
• Replace Facebook address with your Facebook Page Address and so on.
• Finally Save Template
• That's all.

Final Words

I hope this tutorial are really helped you if you're facing problem or getting error during this process so leave comments for solutions and don't forget to like our Facebook Page and also share this article with your friends on social networking sites.

Happy Blogging!

Tweet

Tags: Blogging Tips / Posts / Tutorials