How To Lay Out Comments Inwards Blogger/Blogspot

This cool Blogger play a joke on volition assist you lot to add together comment count within a vocalisation communication bubble, together with thus that you lot & your readers tin role the numbers to advert or betoken to a item comment on whatever of your posts. Besides this, numbering your comments mightiness assist you lot to meliorate the await together with experience of your blog.

Note: This industrial plant with the previous blogger commenting system, together with thus if you lot desire to utilize this trick, origin you lot require to withdraw the Blogger threaded comments. See hither How to withdraw Blogger threaded comments
UPDATE! Now you lot tin convey a comment bubble inwards your threaded comments also! For to a greater extent than info, delight read this tutorial: How to Add Numbered Comments In Threaded Comments

How to add together numbered comments on our Blogger/Blogspot blog

Step 1. From your Blogger Dashboard, become to Template together with click on the Edit HTML button:

Step 2. Click anywhere within the code expanse together with press the CTRL + F keys to opened upward the search box:

Step 3. Type or glue the next code within the search box together with hitting Enter to uncovering it:

<b:loop values='data:post.comments' var='comment'>

Step 4. Just higher upward it, glue this code:

<script type='text/javascript'>var CommentsCounter=0;</script>

Step 5. The, uncovering this code:

<data:commentPostedByMsg/>

Step 6. And merely below/after it, re-create together with glue this:

<!--comments-count-starts-->
<span class='comments-number'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
<!--comments-count-stops-->

Step 7. Find (CTRL+F) this tag:

</head>

Step 8. Just higher upward the </head> tag, glue this code:

<!-- comments-count-starts-->
<style type="text/css">
.comments-number a:link, .comments-number a:visited {
color: black !important;
text-decoration: none !important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY8OnEEEnctE3l53H8fZLe_c9J0oSys99jJVsMC8pwARtDFlama6lgiD_xfGwbd97S63gghwDtvj146XMfZp_RItgEgLvurfyLvx9P6ibatxbiX4SMLWLPHQqThQL9Ti8oqiFzV1KfjPkA/s1600/comment+bubble+1.png) no-repeat;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comments-number a:hover, .comments-number a:active {
color: #1BA0E1 !important;
text-decoration: none !important;
}
</style>
<!-- comments-count-stops-http://helplogger.blogspot.com-->

Note:

• To alter the comment bubble, supersede the text inwards red from higher upward amongst your address
• To alter the color of the numbers, supersede the text inwards blue with the hex value of your color. This tool tin assist you lot to selection upward whatever color that you lot may need: Color code generator

Comment Bubbles 

To pick out a comment bubble, right-click on the icon together with select "Copy Image Address/Location":



IMPORTANT: You tin role whatever icon instead of the ane linked inwards the code higher upward (STEP 8) but subsequently you lot require to alter the size values (width together with height), together with thus that the numbers within the bubble won't float exterior of it.

Step 9. Save the template together with savour your comments :]

Related tutorial: Add a Comment Bubble to Blogger Post Titles

Share this post