How to Add A Comment Count Bubble To Blogger Post Titles alphause

Po ... How to Add A Comment Count Bubble To Blogger Post Titles 60 comments Acomment bubble(orspeech balloon) with the current number of comments displayed on each blogger post titles might be an excellent addition if you want to make your blog more attractive and engaging. Having acomment bubble iconcould help you not only toget more comments on your blogbut may, as well, give your visitors a hint about which are the most popular posts on your blog. When a post has received many comments, it could reflect the popularity of your posts and thus, make your readers and visitors to be more interested in reading them. If you want toadd a comment or speech bubble to your Blogger blog, then follow the next steps below: Step 1.Log in to your Blogger Dashboard> go toTemplate> click theEdit HTMLbutton Step 2.Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box Step 3.Find the following tag in your template: ]]>Note: before anything, you need to click on the small arrow next to it and after the code has expanded, search for the ]]> tag again Step 4.Just above]]>add the following CSS styling: .comment-bubble { float : right; width : 48px; height : 48px; background : url( http://2.bp.blogspot.com /-7FFIKA34Kvw/T4x9E0RmA0I /AAAAAAAAALI/03AG305CesI /s1600 /speech+bubble+green.png); background-repeat: no-repeat; font-size : 18px; margin-top : -15px; margin-right : 2px; text-align : center; }Step 5.Now find this code:

Note:If you can't find it, search this code instead:

Step 6.And add this code immediately after it: Note: to change the color of the comments number, replace#ffffffwith the hex value of your color; to change the font size, increase/decrease the18px value;Step 7.Preview your template and if everything is ok, click on Save Template. Comment Bubbles You can choose one of the images below - right click on the image you like and select "Copy Image Address/Location", then replace the blue code from step 4 with the address you just copied. That's it! Enjoy!!! (: Do you need to add more info on your blog posts? Then I recommend you reading this tutorial: Display post author, date, labels and comments with icons below post titles Like 1 Random Posts How To Change Avatar Size In Blogger Comments05/05/2012 - 10 Comments Multi Hover Effect On Blogger Images Using Pure CSS31/05/2013 - 11 Comments Expandable Recent Comments Widget for Blogger/Blogspot26/04/2013 - 10 Comments Related Posts: How to Add CSS code To Blogger usin... How to add custom Variable definiti... Understanding the Page Elements of ... Add a Cool Style to Blogger Threade... Top Commentators Widget with Avatar... 60 comments: JUST PHONE GAMES 4/26/2012 cooooooooooooooool Reply Counter for site 5/19/2012 Great script for bubble count.Yeah bubble counter button makes blog more attractive.Thanks for sharing step by step information of adding bubble counter button. Reply Md Abdus Salam Saju 5/30/2012 nice post thnx for sharing: Earn Money Online - SEO Tips - Free Backlink Reply Amber 6/02/2012 ...I want to do this but I cannot find either of the two codes in step 4 in my expanded widget template... Reply Replies Admin 6/02/2012 Hello Amber, Then search for this code:

Hope it works Amber 6/03/2012 wow, I'm an idiot. I got it. Thank you very much. It looks great. International Gossip 6/10/2012 wow, this cute.. like this Reply Madrasa Aaminah 7/02/2012 Thanks, worked fantastic http://aladba.blogspot.c om/ Reply Amit Chauhan 7/25/2012 I follow all steps you mentioned but i didn't find bubble on my blog....please help me... http://techknowgalaxy.bl ogspot.in/ Reply Amit Chauhan 7/25/2012 Actually i am using Facebook comment box.. Reply Pingal Repacks 9/14/2012 how to remove the under line when hover? Reply morgan 9/23/2012 thanks so much! your site helped me more than any of the others! Reply Replies Admin 9/24/2012 You're welcome dear. I'm happy that you find it useful :) Larissa T. 9/24/2012 Finally got it to work! But I was wondering how to center the number inside the bubble .. Any tips? Here's what it looks like so far ... The number is closer to the top and not centered. .. http://papaisapreacher. blogspot.com Reply Chandana 9/25/2012 thank you. i like this widget. Reply chandra wibowo 10/04/2012 thank you :). btw, how to change the font colour? Reply Replies Admin 10/08/2012 I'm sorry, now I've updated my post. Add the code in red from step 5 followed by the apostrophe (') then change #ffffff with the hex value of your color. Hope it works, thanks for visiting! Abhishek Raj 10/30/2012 does this works for disqus comments as well ? I'm not using the default comment system provided by blogger, but i want to display comment bubble. Help! Reply Stephany Hyder 11/12/2012 I can't get this to work. :( Reason being ~ I can find either of the codes in Step 4. I did see where you commented and gave another code- I cant find that either. :( Please help. I am just using a Simple Template in Blogger if that helps...no special template or fancy coding. Thanks in advance!!!! <3 --="" -="" ...="" ..="" .="" 10="" 11="" 12="" 1="" 23px="" 2="" 3="" 4="" 5="" 6="" 8="" 9="" :="" :d="" a="" about="" above="" according="" add="" adding="" adjei="" adjust="" advance.="" after:="" after="" again="" all="" allmost="" already="" also="" am="" amazing="" amp="" and="" anonymous="" any="" anyone="" anything="" appear="" appearing="" appears="" aren="" arianwen="" arsenal="" article="" as="" at="" attractive.="" awhile="" aynora="" barbaros="" basah="" be="" beauty="" bec="" becca="" blog.="" blog:="" blog="" blogger.="" blogger.plus="" bold="" bottom="" box="" branding="" brockman="" btemplates.com="" bubble.="" bubble="" bubbles="" but="" c="" can="" cannot="" center="" centered.="" central="" change="" charm="" chou="" chunk="" closer="" code="" codes="" coming="" comment-form="" comment.="" comment="" comments="" correctly="" could="" count.="" ctfand="" customize="" cute="" d="" dawn="" delete="" didn="" disregard="" do="" doesn="" doing="" don="" down="" downloaded="" easy="" else="" emil="" empty="" ennea="" everyone="" exinta="" f="" far="" feature="" few="" figure="" figured="" finally="" find="" fine="" first="" fischer="" flory="" followed="" font-weight:="" for="" from="" go="" god.="" going="" good.="" good="" google="" got="" great.....but="" great="" guide="" h3="" h="" had="" have="" hello="" helo="" help.="" help="" here="" hey="" hi...great="" hi="" how="" html="" http:="" i="" idea="" if="" image="" images.="" implement="" in="" included="" informative="" inside="" is="" islam="" it.="" it:="" it="" its="" jen="" just="" karis="" kataronline="" keep="" khan="" knew="" know="" l="" last="" lauren="" life="" like="" line-height:="" line="" link="" ll="" location.="" locations="" looks="" love="" m="" mad="" maghrb.com="" make="" makes="" mamun="" man="" many="" me.="" me="" mikos="" minh="" mirela="" more="" move="" much="" muhammad="" muradi="" music4you.weebly.c="" my="" nadine="" near="" need="" nest="" newest="" next="" nice.="" nice="" nicola="" no="" norbert="" not="" nothing="" number.="" number="" numbers="" nur="" of="" ok="" ol.blogspot.com="" om="" on="" one="" ones="" only="" or="" ot.it="" our="" out="" p.s.="" part="" paste="" pc="" pie.="" pie="" place="" played="" please="" plz="" ponlok="" post...="" post...thanks="" post.="" post="" posts="" preview.="" previous="" problem="" publishing...="" puff="" put="" question="" quick="" rakib="" rana="" rather="" really="" reason="" remove="" rental="" replies="" reply="" right="" rite.i="" rsat="" s="" same.="" same="" samia="" sana="" search="" second="" secrets="" see="" several="" shahid="" sharing="" sharon="" should="" show="" showing.="" showing="" sifra2="" sims="" site.="" site="" so="" solution.="" solution="" some="" somehow="" sommelierscho="" speech="" spot.com="" still="" success.="" such="" suggested="" t="" template="" text-align:="" text.="" text="" than="" thank="" thanks.....="" thanks....="" thanks="" that="" the="" them="" then="" there="" think="" this.="" this="" thought="" times.="" times="" tips="" title="" to="" top="" tried="" trusted="" try="" tutor.="" tutorial.="" tutorial="" tutorials="" twice="" two="" u="" ureticy="" us="" useful="" using="" vanessa="" ve="" version="" very="" visit="" w3schools.com="" want="" was="" wbe="" we="" web="" were="" what="" where="" why="" will="" with="" within="" wondered="" wondering="" wont="" work.="" work="" worked="" working="" works="" wow...="" wrong="" www.lumeamirelei.blogsp="" www.thebearhut.blog="" yaz="" you="" your="" zacher="">