How To Display Author, Date, Labels And Comments Count With Icons Below Post Title

-
In this article, I will show you How to Display Author, Date, Labels And Comments Count With Icons Below Post Title in your Blogspot blogger blog. In most of the blogs perhaps you've seen that on the blogs post page below post title there is author, date, labels and comments count with icons. This looks very professional and today I will give you the step-by-step tutorial to access this feature in your blog. So let's start to implement this in the blog.

How To Display Author, Date, Labels And Comments Count With Icons Below Post Title

  • Step 1: Go to Blogger Dashboard.
  • Step 2: Navigate Theme > Edit HTML.
  • Step 3: Click anywhere inside the blogger template and press [CTRL+F] a search box will open, paste the code inside the search box
<div class='post-header-line-1'>
[Note: This code may be present more than 2/3 times in most of the template you have to choose the exact one. Unless this code will not work. Mostly 2nd or 3rd code is the exact one.]
If this code is not present in your template search for the code
<div class='post-header'>

  • Step 4: After this line(below), add the code given below: 

<div style="margin: 10px 0;"><span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVMUUR-KEzT4_2QyMikYAQWXhD5Zfp3mwcDwqoaEeyGSYItaM4hJiaM8IXXsq99mKrVmibilftioadUgKIReAfb-8UkB9Jclp0-WTrTXuITSHeUHsiKViAB9lmcvRRZIV1770JL9EEZut8/s1600/author.png) no-repeat scroll top left;padding-left:20px;font-size:11px;'><data:post.author/></span> | <span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi00Zidmw_BWFeX1xtCdUTM9ys_PgM0QX9oPuMrY1Q74SWcrn2E-z_IqyzfoeBz_Wf-qBiD0850YHMEYI5DRHQYMBgT-f_KT-9KmwtWlRTig6NyvhkNJyoD0WN5tcOusn_WjAB13WQLc2nh/s1600/clock.png) no-repeat scroll top left;padding-left:20px;font-size:11px;'><data:post.timestamp/></span> | <span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZDQkPBeLj3FG73w8w13s5M3HxBvXx-uwjPtE0yzQoUJ1n4frY_nyrBcGoCVeatZNwuFDoqqYvYD8BUm7LxKQtrDFxcGdlFxdIwB0Owm194ICO7hiMpv-mN5UEs8scDfUYqGkilZuilvpR/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:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijE3gXksR-9iAO23dOFyCl3E_A0H6rwu-YrDW4L6E4N3bbXATQCrWCKPPR74PtZQ_nFRG6oMg5gIH4yA0pA0lU1NFlPq23qkaBPHKFZeshnK6nUVxrfB7N6t0yIj7S_Ybvr6mv-oxHtjgH/s1600/comment.png) no-repeat;padding-left:20px;font-size:11px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if></b:if></a></b:if></b:if></span></div>
  • Step 5: Click "Save Template" you are done.

 How To Customize Author, Date, Labels And Comments Count With Icons Below Post Title

To customize(change) the icons replace the coloured links with your desired icons(links).
  • Red Colored link is author icon.
  • The green colour link is the clock icon.
  • Blue coloured link is Label/Tag icon.
  • The purple coloured link is comment icon.
Wrapping Up
Now readers of your blog will be able to see Author, Date, Labels And Comments Count With Icons Below Post Title. If this post really helped you to transform your blog design then share this article to help other. Let me know how this tutorial helped to transform your blog appearance. For any issues relating implementation of the code widgets drop a comment below we are ready to help you.

Comments

Post a Comment

[[ DOFOLLOW COMMENT ]]

Popular posts from this blog

High CPC Cookie | How To Install Cookies In Firefox For High CPC

-
Image
Take this article only for education purpose. Don't misuse, resulting may lead you to ban. High CPC Cookie In Mozilla Firefox For High CPC Ads Are you in an Click Exchange Programme? Are you doing c4c? Are you trying to export or import cookies in firefox browser for high cpc ads? Yes...! Well, then this post is for you. In this post you're going to learn how to install high cpc cookies in mozilla firefox browser to get high cpc ads for c4c. Before digging into the ocean of high cpc cookie it's important to understand few technical terms relating high cpc cookie for better implementation of codes and better output. What is Cookie? A Cookie is a small piece of data sent from a website and stored on the user's computer by the user's web browser while the user is browsing. What is High CPC Cookie? High CPC Cookies are the special web cookies the user's web browser data exported from user A's browser of TIER-I country (like
Read more

How To Write Math or Equation on Blogger

-
Image
Hey! Are you a math teacher searching for a solution to type Math Equations beautifully in blogger post . Searched tons of blog posts, YouTube and Quora relating " How to write math in blogger " or " How to use MathJax or Latex in blogger " but found no solution and working codes, eventually codes which you found while searching were actually the piece of junk. If so, then in this tutorial am going to give you a detailed tutorial with working .js code on how to write math equation on Blogspot blogger blog . Check this blog how beautifully math equations were written on blogger post:   DEMO How To Write Math Equation In Blogger 1. Login to your blogger dashboard & select your blog. 2. Goto Theme > Edit HTML. 3. Press [ CTRL + F   ] and search the code /body 4. Above /body  paste the following code: <script defer src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javasc
Read more

10 Blog Niches That Get Good Traffic and Make Good Money: Viral Blog Niches

-
Image
Are you wondering to start a blog ? Do you want to create a blog that get good traffic ? Do you want to earn money from your blog ? Of course you do! Confused of being choosing a best blog niche or blog niche which get good traffic . Don't worry  you’re definitely not a single person who is having this problem. Choosing a perfect   blog niche is one of the hardest task to start a successful blog that drives insane traffic . Being a newbie it's obvious that you're struggling with million ideas with infinite niches bouncing around your head to start a blog . Which   niche would be be best to   get   good traffic to earn money from blog . We're all struggling on blogging just to make money . A blog with no income potential has no point in starting a blog . To monetize a blog and earn money from it we need to drive good traffic and for good traffic it's necessary to pick a good blog niche which gets good traffic . Not all blog
Read more