How To Display Author's Profile Below Each Blog Post

As I have already told you that blogger is a flexible blogging platform where you can do things easily unlike WordPress and other blogging platforms. Unlike other blogging platform you can easily customize blogger templates according to yourself. If you have a little bit knowledge of HTML then you can easily edit any part of your blog. You can Add or Remove, Locked and Unlocked any widgets from your default template. In this tutorial, I will show you how to display your profile below each & every blog post.

Blogger's default template display only name of the blog author against Posted by. If you want to see the blog author's profile then you need to click on the name of blog author after that you will switch to author's profile. If you want to display your profile with your profile picture & profile description then you need to configure blog posts. Read also : how to add AdSense ad below blogger post title.

Adding author profile below each & every blog post gives an extra look to your blog. It also increase followers if you have added your Google+, Facebook, LinkedIn, Twitter profile in the profile description. Isn't it a good idea to display your profile below each & every blog post. Have you ever tried it? If not then try now. There are basically two ways to add author's profile below each blog post.

1. Without adding CSS code
2. Adding CSS code

Without adding CSS code

To display your profile below blog post no extra knowledge is required. No need to upload a custom template.  You can simply do it from the blogger Layout. You just have to enable this option in the configure blog posts. You can't see this option directly on the Layout.

Many of you are thinking that there is Add a Gadget option only available on the Layout in that case where would you get it? If you are using blogger from a year ago and if you don't see this option on  the Layout then definitely blame me that this man is making us fool. How could it be happen? Anyway don't take tension. I am opening the secret. Let's start how you can display your profile with blogger default template. Read also : How to setup AdSense matched content ad unit.

Step 1. First login to your blogger account with your email id and password.
Step 2. After login you will see some menus in the left hand side. Click Layout
Step 3. Once you click Layout, you will see various gadgets in the Layout. In the Blog Posts gadget you will see Edit option. Click this Edit option.
Step 4. Once you click Edit, Configure Blog Posts window opens. Now you need to remove the check box against Posted by and need to select the check box against Show Author Profile Below Post.
Step 5. After that you need to click Save button to save the changes.

Step 6. Now you need to click Save arrangement on the Layout. Now click View blog you able to see the profile with profile picture & profile description.

Adding CSS code

This process requires knowledge of coding so that you can put some CSS code  at appropriate place inside your blogger template. Let's start!

Step 1. At first login to your blogger dashboard
Step 2. Click Template and then Edit HTML
Step 3. Now click anywhere inside the code and press Ctrl + F to get search box which help you to search the some required code.
Step 4. Type #navbar inside the search box and press Enter key on the keyboard. Now you will able to see below codes 
Read also : How to make money online from home

#navbar-iframe {
  height: 0;
  visibility: hidden;
  display: none;

Step 5. Now you need to paste the below CSS code just below the above code. This step is necessary for both default blogger template and custom blogger template.

.author_info {
float: left;
width: 96%;
min-height: 80px;
border: 1px solid #EBEBEB;
margin-bottom: 15px;
margin-top: 15px;
.author_info h3 {
padding: 15px;
border-bottom: 1px solid #EEE;
background: #FAFAFA;
.author_photo {
float: right;
margin: 10px; 8px 0 0px;
.author_photo img {
border: 1px solid #999;
.author_info p {
padding: 10px 10px 10px;
font-size: 14px!important;


Step 6.  Now type <span class='post-timestamp'> inside the search box and hit enter on your keyboard. Remember you will find it twice and you have to stop at the second one. Now you will see some code like the below code. Read also : How to make your blog push notification ready.

 <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype=''>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><></span>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype=''>
                <span itemprop='name'><></span>

 <span class='post-timestamp'>.

Step 7. Now paste the below code just above <span class='post-timestamp'> and replace the all pink color field with your own field.

<div class='author_info'>
<div style='text-align: justify;'><a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'></a></div>
<div class='author_photo'>
<!--   Profile Image --> <img border='0' height='60' src='' width='60'/></div>                                                
<div style='text-align: justify;'>  author description here
<!-- social button -->
<div class='g-follow' data-annotation='none' data-height='20' data-href='//' data-rel='author'/>
<div class='twitter-follow'><a class='twitter-follow-button' data-dnt='true' data-show-count='false' href=''>Follow @maniruddi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+&#39;://;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script></div>
<div class='fb-follow' data-href='' data-layout='button' data-show-faces='false'/>


You can add all your social share / follow button below author's profile description.

That's it! Thanks for reading the post. Let me know whether you have experienced it or not. Also let others to experience this tricks by sharing this post on your social networks.

How To Display Author's Profile Below Each Blog Post How To Display Author's Profile Below Each Blog Post Reviewed by Mani on May 13, 2014 Rating: 5

No comments:

Powered by Blogger.