Display post author, date, labelsand comments with icons below post titles alphause

Po ... Display post author, date, labels and comments with icons below post titles 22 comments In this tutorial I will show you how to add more info on your Blogger posts like blog author's name, a time stamp for published posts, labels and comment count links. Firstly, let's see how the comments link behave - when there are no comments on your posts, there would be a link that says 'Be the First to comment!' and if your post gets one comment, it will appear as '1 comment so far'. On the left side, we'll see the blog author's name, a clock showing when posts have been published and finally, the post labels. If you want to make your blog more eye-catching by adding these details with some cute small icons along with the Blogger Author's Name, Post Date, Labels and Comments... then follow these steps below. Screenshot: How to Add Author, Date, Labels and Comment Bubbles to Blogger Step 1.From your Blogger Dashboard, select your blog > go toTemplate>Edit HTML Step 2.Click anywhere inside the code area and press the CTRL + F keys to open the blogger' search box Step 3.Type or paste the below code inside the search box in order to find it:

If you can't find the code above, look for this one:

Step 4.After this code add the following HTML:

| | | Be the first to comment! Comment so far Comments so far

Ho w tocustomize: If you want to change the icons, just replace the URL addresses in blue from above with your images URLs: 1. First one is the icon for the Author 2. 2nd one is the Clock icon 3. The 3rd one is the icon near the Labels 4. And the last one is for the comment bubble Step 5.Save template... and you're done! You might want to know how to add a comment bubble to your Blogger posts titles? Like 3 Random Posts Add a forum on your Blogger blog with Nabble21/10/2013 - 7 Comments How to Add CSS code To Blogger using Template Designer08/03/2014 - 3 Comments Scriptaculous image slider/carousel for Blogger12/11/2013 - 8 Comments Related Posts: How to add custom Variable definiti... Understanding the Page Elements of ... Advanced Random posts widget for Bl... How to Create Magazine Style with P... How to Create a Sitemap or Table of... 22 comments: Anonymous 3/04/2012 Great! Thanks :) Reply Admin 3/06/2012 you're wellcome Reply Replies Bryan Fajardo 1/09/2014 it's not workin for me. i need a code for author and label in every post and is visible in my homepage not in the blog post page. Dayana 5/14/2012 how to add comments only in right side of the header Reply Replies Admin 5/16/2012 Hi Dayana, I'm afraid i don't understand your question. Can you be more specific? Sangram Nandkhile 10/05/2012 i think she meant having a comment counter on the right side. Shubhashish Shukla 7/15/2012 My template has 2 < div class='post-header-line-1'/ > codes, but not < div class='post-header-line-1' >. Reply Değmesin Yağlı Boya 8/27/2012 İ loooooooove it!..thank you! Reply OrientalSpice 9/01/2012 Hello I'm heaving trouble with this tutorial. The icons author, date/time, tags appear. Unfortunately the icon "be the first to comment" doensn't appear. Do you know what I'm doing wrong? This is my blog: http://orientalspiceands omechocolat.blogspot.co m Reply Replies Anonymous 7/05/2013 go to layout > edit blog post widget then check comments button ... sarwan 9/26/2012 Thanks buddy... cool sharing Reply abu sittik 9/30/2012 Coool... nice tutorial.. I have implemented it in my blog http://waytobliss.blogspot .in/ Thanks for sharing it.. Reply Shangi 11/03/2012 Hi! First off, thanks for sharing this cool enhancement! My blog is also having problems with the comments part showing up. It shows up only for a few seconds while the page is still loading then abruptly disappears, leaving just the author, date, and labels part (I deliberately omitted the labels part though). I have also previously implemented your comments bubble hack, and am wondering whether or not it is causing some sort of conflict. Any help would be appreciated! Reply Jane H. Johansen @veganmisjonen 11/23/2012 Great work! Thanks a lot! I'm using the comment part on my blog. I have some questions. - How can I make the button direct to the first comment, not to the bottom of comment field? - How can I make the button always show? When i open a blog post, it is not visible. Any help will be appreciated :) Reply Jk Roling 1/16/2013 not work in my blog, when number of comment is 0, the script does't show anything Reply Evi 1/17/2013 Hey, I have a question. I don't want the date above there. Which part do I have to delete? Thanks for this tutorial! You helped me out a lot :) (and sorry for my lack of English, Im a Dutch girl) Reply Aftab Boss 1/26/2013 Not work... :( Reply Anonymous 1/31/2013 I want this under the blog. And how do you hide the real ones in blogger? Reply Aditya Prakash 6/04/2013 Hello admin.... i tried but no effect Reply Solangi Naeem 6/25/2013 Nice post bro Thanks for sharing Reply Rivado Shidou 2/18/2014 what about ''Date'' of post this is time of post Reply Zubair Malik 3/01/2014 Thanks But Comment Box Didnot appear Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,786 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments She and Me Thank you so much,It worked perfectly. You make it all so easy to... Junkyo No Hikari Thanks its work really well ^__^ Junkyo No Hikari Hye... Thanks to your tuto its work ^__^ btw I'm delete the... Eliza Lincy How to increase the number of posts shown in Home page after... Varad Parab That was one awsome post...it really helped!!! Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 3 Like