Skip to main content

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.

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.  

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 

#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;
  padding:1px;
background:#fff;
}
.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.


 <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <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'><data:post.author/></span>
                </a>
              </span>
            <b:else/>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <span itemprop='name'><data:post.author/></span>
              </span>
            </b:if>
        </b:if>

      </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='http://4.bp.blogspot.com/-0_2Cba0gp5Q/VIFgDLmDcYI/AAAAAAAAKo4/ubJWUUnHNUU/s1600/passport%2Bphoto.jpg' 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='//plus.google.com/u/0/118292071416008725233' data-rel='author'/>
<div class='twitter-follow'><a class='twitter-follow-button' data-dnt='true' data-show-count='false' href='https://twitter.com/manirudin'>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.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script></div>
<div class='fb-follow' data-href='https://www.facebook.com/manir9feb' data-layout='button' data-show-faces='false'/>

</div></div>


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.




Comments

Popular posts from this blog

How To Change Default File Download Path in UC Browser

All of us known that UC browser is the most popular, fast and less data consuming mobile browser for android devices. Many of us use UC browser on daily basis on our smart phones. By default UC browser has download path to internal memory device which is /storage/sdcard0/download. sdcard0 is the built in memory or internal memory of your device. Read also : How to fix HTTP and HTTPS Mixed Content Errors.

Do you know that this default download path can be changed? Since, internal memory is fixed, and once you exceed this value you can't download more. You need to move some data from mobile memory to the external memory which is sdcard1. If you change this default path to external memory card (sdcard1), you can download more data directly to your desired directory. Read also : How to Setup AdSense Page Level Ads and Fix Script Error.

Here, I will show you, how to change this default download path from internal memory card sdcard0 to external memory card sdcard1. To do so you need to…

Calculation of Total Marks, Percentage, Division, Remarks, Maximum & Minimum Number of Students in MS Excel

In this post, I will help you to learn how to calculate total marks, percentage, division, maximum number, minimum number and remarks of students of a class very fast. At first you need to look over the above image very carefully. The above image shows the marks obtained by six students of a class.

Formula to calculate Total Marks of all students within seconds 

First you need to find out the Total Mark of a single student who is on the top of the list i.e, Mani. To calculate Total Mark of Mani, click on the Total Mark cell address of Mani i.e, H6 and then type the formula =sum(1st subject's cell address i.e, b6:last subject's cell address i.e, g6) and then press Enter on the keyboard or click anywhere on the worksheet. Here b6 and g6 are cell address of 1st subject (English) and last subject (Biology) of that student. Read also : How to Enable HTTPS for Blogger Blog.

After getting results, click on the resultant cell address of Total Mark of the 1st student i.e., Mani an…

How To Rename A WhatsApp Group

We all know that WhatsApp is the most popular messaging service for Android, BlackBerry, iPhone and for other platforms. In this post, I will show you how to rename an existing WhatsApp group. To rename an existing WhatsApp group your smartphone must have internet connection. After that you need to follow the below steps. Read also : How to track lost/stolen mobile phone and erase data remotely.


Step 1. Open WhatsApp application on your smartphone.

Step 2. After that you need to click CHATS tab and click on your group name.



Step 3. Once you click on your group name, you will able to see chat details. Now you need to click vertical dots located extremely top right corner and then click Group info. Read also : How to setup AdSense page level ads.


Step 4. Now you can easily rename your group. To rename the group just click Edit icon and then type the desired group name and click OK. Read also : How to protect your computer from WannaCry ransomware virus.


In this way you can rename a What…

Change UC Browser Default Homepage in Android Phones

We all know that Android OS operated Smartphones and Tablets are great for web browsing. Like other browsers, uc browser has a default search engine Yahoo is set for web search. UC browser provides different kind of search facilities under 5 different categories namely Web, Video, Shop, Image and APP. Read also : How to protect your computer from WannaCry ransomware virus.

In this post, I will show you how to change the default search engines of uc browser in Android devices for their 5 different categories. To do so you just need to follow the below steps. Read also : How to Enable HTTPS for Blogger Blog.

Change Default Homepage for UC Web search

Step 1. At first you need to open UC browser
Step 2. After that click Search. Follow the below image.


Step 3. Once you click Search, you will able to see the default search engine's icon for Web search like y for Yahoo, g for Google. Now you need to click that search icon. Follow the below image. Read also : How to change UC browser defaul…

Bad Effects of Dendrite

As we all know that dendrite is a good popular adhesive and P. C. Chandra's Chemical Enterprises Pvt. Ltd. is the manufacturer of dendrite. It is broadly used in various sectors like Engineering, Automobile, Footwear, Lather Craft, Home Decor, Carpenters and also for repairing punctured tyres. It contains a substance called toluene. Toluene is a sweet smelling and intoxicating hydrocarbon which is called neurotoxin. When these intoxicants are smeared on a piece of cloth and inhaled, the user feel euphoric (high and experience a sense of invincibility). But they dissolve the membrane of the brain cell and causes hallucinations.



When I was returning from my hometown by train I had noticed at the New Jalpaiguri (NJP) train station that some children mostly rag-pickers were keeping their handkerchief / polythene on their mouth and breathing through it and some smelling their handkerchief. Some of them are were half-naked, bare feet and had a broom in their hands also. All were between…

How To Remove Copied Contents on Smart Phone / Android Device

We all know that UC browser is the fast and most used mobile browser in the world. Almost every mobile user used UC browser to surf internet or doing social networking. Do you know why most people use UC browser rather than other browser. I think, the perfect answer may be its compatibility feature in all kind of mobile phones. Read also : How to transfer large files without mobile data.

UC browser has lots of feature comparing to other mobile browsers. Among them, Set as Default Browser, Auto Save Form, Change Download Path, Auto Reconnect, Clipboard and many more. Lots of browser does not have many of this feature.

Let's come to the main point. We all know that what ever we copy in the computer, all the copied items are stored in the clipboard. Similarly, what ever you copy in android device or other device, all the copied items are stored in the Clipboard.  But I have noticed that Clipboard option is not available in Chrome, Opera Mini or any other application. Read also : H…

Enable Auto Save Forms & Passwords in UC Browser

Many of you use UC browser on daily basis on your smart phone but very less enable this feature. Enabling auto save forms and passwords allows the browser to remember the username and passwords. It gives you relief from entering username & password every time whenever you login to your email. Did you enable auto saving form & password? If not, then do it now. Read also : How to track lost/stolen mobile phone and erase data remotely.

In this post, I will show you how to enable auto save forms & password in UC browser in your Android phones. To do so you need to follow the below steps.

Steps to enable auto save forms and passwords

Step 1. At first open UC browser

Step 2. In the second step, tap on the horizontal bar.


On the next image, you will able to see Bookmarks, History, Refresh etc. icons. Now swipe this menu screen to the left and tap Settings. Read also : How to create custom AdSense Search Engine and make money from it.


Step 3.  Now on the Browser Settings, you w…