Author Bio Box Below Every Post For Blogger.Com Blogs ~ Blogging Crave

Today I’m going to share a Author Box which will fit on your blog’s below every post and this widget is only for Blogger.com users and this widget is very useful because every visitor read your article then he like it so he want to know who you are so he/she will know very easily. So I would like to start the post and give you the amazing widget for your amazing blogger blog.

Features Of this Widget

Compatible with 3 social networks
Responsive design
Easy to implement
Customizable
Author Photo
Small Bio
Especially built with CSS3 and HTML5

Tutorial on How you can add this Widget

So friends, much awaited movement has become arrived means going to give you the widget coding and tutorial that how you can add this widget in your blog..!!
Note : This widget has two steps so follow all the steps clearly.

Step 1

Go To Blogger
Template > Edit HTML
Ctrl + F
Now find ]]></b:skin>
add this coding above it

/* Author Box By BestBTricks ----------------------------------------------- */
#adminprofiler{float:left;border-top:1px solid #ccc;margin-top:30px;border:1px solid #ccc;padding-top:10px;padding-right:10px;background:#fdfdfd!important;margin-bottom:30px;text-align:justify}
.Authoravata img{float:left;width:100px;border:2px solid #ccc!important;background:#f8f8f8!important;margin:10px;padding:15px!important}
.Authordesp{padding-bottom:20px;font-size:13px}
.authornames h5{text-transform:uppercase;font-weight:700;margin:0;padding:18px 20px 15px 10px}

Step 2

Now find <div class=’post-footer-line post-footer-line-1′/>
add this code to below this

<b:if cond='data:blog.pageType == "item"'>
<div id='adminprofiler'>
<div class='Authoravata'>
<img expr:src='data:post.authorPhoto.url'/>
</div>
<div class='authornames'>
<h5>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</h5>
</div>
<div class='Authordesp'>
Abdul Samad (born 1999) is a teenage Blogger,Logo Designer, Template Designer and he had done many good things from Pakistan. At the age of 14 years he had made a lot of tremendous jobs in the Field of Blogging. He always wish to meet with SEO Experts and Pro Bloggers.
</div>
</div>
</b:if>

Now Replace all bolded text with yours
then save your template
Done!

Final Words

So friends, I think You successfully added this widget on your blog because I explain you all the steps clearly. So friends If you like our efforts then do share our posts with your friends. God bless you and your family. Happy Blogging…!!

About Admin

Syed Zaver Abbas is SEO expert in pakistan. he is web designer, web developer, software developer and graphics designer that means he is multi talented. he is also learning more about computer science.