Aug 18, 2016

Add Multi Author Image, Date, Labels & Comments below Post Titles

data:blog.title
Below Post add Multi Author Image, Below Post Add Date, Time, Comments, and Author Image
Hey guys, You might have seen many blogger blogs who are displaying Multi Author Image, Date, Labels & how much comments so far below of post titles. One of our reader ask us how to show multi author image just below of post titles. So for his question we are here to show how you can add this widget just below of post title. First see a demo screenshot of this widget.

Below Post add Multi Author Image, Below Post Add Date, Time, Comments, and Author Image

There are many website and blogs who have shared this widget already but we have not find any website who share the task to display multi author image with labels, time and comments. Therefore we are going to share the technique to show multi author image with labels, time of publishing the and comments so far in blogger blog.

Also Read: Customized Blogger Official Contact Form! Never Seen Before

Now, we are going to learn how to add multi author image with Date, Labels and comments just below of Blogger Post's title. Follow all the instruction carefully to safe yourself from making any mistake inside your blogger template.

How To Add Multi Author Image, Date, Label & Comments below Post Titles?


Note1: Before doing any customization inside your blogger template must download a backup copy.

Step1] Go to Blogger >> Template >> Edit HTML.

Step2] Click anywhere inside the code area and press CTRL+F to search below code lines.

Note2: After pasting or typing below lines in search box hit Enter button two times to find the second occurrence of below code lines.
<div class='post-header-line-1'>
Note3: If you can't find above lines then search for below code line.
<div class='post-header'>
Step3] Now, just after of that line paste whole the code which is given below.
<div style='margin: 10px 0;'><span style='background:transparent url () no-repeat scroll top left;padding-left:5px;font-size:11px;'><span style='margin-right:5px; bottom:-7px; position:relative;'><img expr:src='data:post.authorPhoto.url' height='25' itemprop='image' width='20' style="border-radius:20px; border:1px solid;"/></span><data:post.author/></span> | <span style='background:transparent url(https://3.bp.blogspot.com/-8zBVC26ojQE/UrcfeqmWuXI/AAAAAAAAFng/f_xOYkEhdVA/s1600/clock.png) no-repeat scroll top left;padding-left:20px;font-size:11px;'><data:post.timestamp/></span> | <span style='background:transparent url(https://2.bp.blogspot.com/-Zz2yZeaJG6U/UrcfOYO6_JI/AAAAAAAAFnY/1WHah9jzmhE/s1600/tag.png) no-repeat scroll top left;background-position:0px -1px;padding-left:23px;font-size:11px;'><b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + &quot;?max-results=7&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if></b:loop></b:if></span><span class='post-comment-link' style='float:right;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://4.bp.blogspot.com/-rC0rrfpsbhE/UrcdZ37f_uI/AAAAAAAAFnA/ZIiB7SJgx0I/s1600/comment.png) no-repeat;padding-left:20px;font-size:10px;'><b:if cond='data:post.numComments == 0'>Be first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comments so far<b:else/><data:post.numComments/> Comments so far</b:if></b:if></a></b:if></span></div>

Customization If You want to Change

Replace This Color Link - To Change the Clock Image with your image link.
Replace This Color Link - To Change the Tag (Label) Image with your image link.
Replace This Color Link - To Change the Comment Image with your image link.
Change This Color - To Change The Text When Your Post don't have any comment.
Change This Color - To Change The Text When your Post Have 1 Comment. Its looks like 1 Comment so far.
Change This Color - To Change The Text When Your Post have comments more than 1. Its looks like 2 Comments so far, 3 comments so far, etc.

Step4] Now, Simply hit the save template button and open your blog to see how it looks like on your blogger blog. :)

Also Read: BlackReen Responsive Blogger Template - By MyBloggerGuides
Also Read: Jumbo Counter Responsive Social Sharing Widget with Fading Effect for Blogger

Conclusion:

So above guide is about "How To Add Multi Author Image, Date, Label & Comments below Post Titles?" We hope you like this trick and have successfully add this function to your blogger blog. If anyhow problem persist after following all above steps carefully then drop a comment below. We will help you out of sure. Do Share.
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.