Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

Add a Simple Author Bio Box Widget Below Blogger Posts

1 min read

Author bio boxes below posts make it easy for your visitors to recognize and communicate you. These boxes are much better than a tiny text name of the author which remains invisible for most visitors. But when you add an author bio box to your blog, it tells visitors strongly that you are the author of the post which they are reading. Author boxes increase the communication or commenting on your blog which is a necessary for a successful blog.

I am going to share a simple but easy to customize author bio box for your Blogger blog which can be added and customized to any Blogger template easily. I am also using this box on my blog and you can view its demo at bottom of this post. To add this box to your blog posts, follow below simple steps:

1. Sign-in to Blogger dashboard, select your blog and go to its template section

2. Click on “Edit HTML” option

3. Check the box saying “Expand Widget Templates” at top left of the code containing window 

4. Press Ctrl+F, find <div class=’post-footer-line post-footer-line-1′> and paste below code before it

<div align=’justify’ id=’entryMeta’ style=’background-color:LightGrey;’>

<hr color=’grey’ size=’3’/>      

<img align=’left’ alt=” class=’avatar avatar-39 photo’ height=’39‘ src=’https://lh6.googleusercontent.com/-VFKJ-ho1lUE/UQ1FD47VutI/AAAAAAAACqM/oQ5uJRrEqjQ/s128/avatar.png‘ width=’39‘/>This post is written by <a expr:href=’data:post.authorProfileUrl’ rel=’author’ title=’author profile’>

                        <data:post.author/>

                      </a> for <data:blog.title/>. It was posted on <data:post.dateHeader/> at <data:post.timestamp/>. The post is filed under  <b:loop values=’data:post.labels’ var=’label’> <a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if>

 </b:loop>.

You can follow any responses to this entry through the <a href=’/feeds/posts/default/’>RSS 2.0</a>.

Also feel free to leave a response about this entry. We welcome comments and always love to hear from you.

<hr color=’grey’ size=’3’/>

                                         <div class=’clear’/>  

                                     </div>

5. Customize the highlighted values the way you like. Replace LightGrey with color you want to set for background of the author bio box. Replace red highlighted URL with path to your profile image if you don’t want to use the default one and set the width and height of image by modifying highlighted values in purple

6. You can also customize the text to describe yourself

7. Save the template. You are all done!!

Note: The box may not appear in some templates when you place the code before <div class=’post-footer-line post-footer-line-1′>. If this is the case with your template, find <div class=’post-body entry-content’> and put the code just below it. This will fix your issue. If you still have any question, you can comment below to ask us.

Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

Facebook Like Widget for Websites, WordPress and Blogger

The Facebook Like widget, which I have brought for you today is unique and coolest among its kind of widgets and plugins and you...
Rehmat Alam
1 min read

Best Free Image Hosting With Unlimited Bandwidth and Direct…

On the web, there are a lot of free image hosting websites but most of them either provide you limited storage and data transfer...
Rehmat Alam
1 min read

5 Tips to Make Effective Use of Blogger Post…

Like creating a blog without proper configuration on Blogger, writing a post using the blogspot post editor is also easy. The interface of Blogger...
Rehmat Alam
3 min read

One Reply to “Add a Simple Author Bio Box Widget Below Blogger…”

  1. Sir why I cant view any pf the code which you place in your posts

    the space where you add codes is apeared as blank

    Help

Leave a Reply

Your email address will not be published. Required fields are marked *