Add Multi Author Image, Date, Labels & Comments below Post Titles
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.
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.
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.
Note3: If you can’t find above lines then search for below code line.
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 + "?max-results=7"’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != "true"’>|</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. 🙂
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!