Admin/Author Box Below Every Blogger Post :
Hi friends, welcome to my New post, This post is all about placing an author box below each post in Blogger. Placing an Author/Admin below every post will increase your interaction with your readers since new readers can easily see your social profiles and can get connected with you. that is why this is a perfect widget for increasing overall blog traffic.
Read : How to place html code box in Blogger
 |
| Author box below Blogger posts |
Benefits Of This Widget:
- Looks simple which can be used in every Blogger template
- Can customize own author Image
- You can also place the links for all social networks like twitter,facebook and Google+.
How to install :
- Go to Blogger Dashboard
- Click on template
- Click on edit html
- Press cntl+f and find the code ]]></b:skin>
- Now place the following code above it
.author_info { float: right; width: 573px; padding: 10px; border: 1px solid #e0e0e0; margin-bottom: 15px; margin-top: 15px; background: #eee; } .author_info h3 { margin-bottom: 10px; } .author_photo { float: left; margin: 0 0 0 10px; } .author_photo img { margin-right: 10px; border: 1px solid #e0e0e0; }
Again search for <div class=’post-footer-line post-footer-line-1′> and place the following code below it and then click on save.
<b:if cond=’data:blog.pageType == "item"’>
<div class=’author_info’>
<div class=’author_photo’>
<img alt=’author’ src=’http://lh3.googleusercontent.com/-AEjwZp9w37s/UNSIMPc2PcI/AAAAAAAAA7M/JjHAI3AjFFI/h120/images.jpeg‘/></div>
<h3>About the Author</h3> This article is written by: <b>YourName</b> – who has already written <b>30</b> articles for <a href=’https://sanjaychoubey.com/‘>YOUR-BLOG-NAME</a> Your Name . Catch him on <a href=’http://twitter.com/ersnjy‘ target=”_blank” rel=”no follow”>Twitter</a>, <a href=’http://www.facebook.com/a1bloggerseo’ target=”_blank” rel=”no follow”>Facebook</a> or <a href=’your e mail ID‘>email</a> him <br> </br> <br> </br>
YourName's <a href=’https://sanjaychoubey.com/’>Blogger tips</a><br style=’clear:both;’/>
</div>
</b:if>
<div class=’author_info’>
<div class=’author_photo’>
<img alt=’author’ src=’http://lh3.googleusercontent.com/-AEjwZp9w37s/UNSIMPc2PcI/AAAAAAAAA7M/JjHAI3AjFFI/h120/images.jpeg‘/></div>
<h3>About the Author</h3> This article is written by: <b>YourName</b> – who has already written <b>30</b> articles for <a href=’https://sanjaychoubey.com/‘>YOUR-BLOG-NAME</a> Your Name . Catch him on <a href=’http://twitter.com/ersnjy‘ target=”_blank” rel=”no follow”>Twitter</a>, <a href=’http://www.facebook.com/a1bloggerseo’ target=”_blank” rel=”no follow”>Facebook</a> or <a href=’your e mail ID‘>email</a> him <br> </br> <br> </br>
YourName's <a href=’https://sanjaychoubey.com/’>Blogger tips</a><br style=’clear:both;’/>
</div>
</b:if>
You need to change the urls as shown in red color, with your urls. and also you have to change the words and sentences which are in Blue colors with your own. Just customize it with your choice, and click on save. you will see the changes made. as a beautiful author box has started showing below each Blogger post. Thanks for giving your time. Take care.!
This is indeed a cool tutorial, i bet blogger folks on blogger will find it useful I will share this post to my blogger friends on blogger platform.
great post you have here with a well detailed tutorial, love it. will implement it on my blog
Thanks friend for being here. M happy that my post is liked by You.
Thanks Buddy. stay connected with my Blog for more useful stuffs for you.
Great guide to have the author box for blogger blog Sanjay.
Thanks for giving the code to add.
Keep doing the great work 🙂
Looks damn good Sanjay. How do you come up with such beautiful ideas? 🙂
I really loved it. I would like to know how can I change the background color of this box?
thanks for ur valuable comment. be in touch for more stuffs.
Dear simly replace the color codes with your favourite color code. thats it.