Ok, I like a simple blog that has style. Yes! Blog that has style can capture any man passing by your block to stop for a tea. I like making all my blog simple on the eyes but yet unique in a way that the third man will say; you did a good job. How do you take your blog? Does your blog has swag or it’s just like a desert? Many blog comments are numbered but how would you feel if you can numbered your blogger blog comment?

Must Read: DIVIDING YOUR BLOGGER BLOG HEADER INTO TWO PARTS

Codes can be hard to implement for someone who have not done it before but with the right touch and direction, you are sure to achieve your goal, right?

HOW TO ADD A STYLISH NUMBER TO YOUR BLOG’s COMMENT

Let’s jump into action shall we?

Remember: Before you perform any code editing on any of your blogs, it is good to do a proper backup so you can easily switch back if you encounter any setback or code errors.

First off, login to your blogger blog dashboard >>> Click Template >>> Click EditHTML >>> Check the box “Expand Widget Template”. Have you tick the box? Now let’s proceed to the main tutor at hand

Search for the below value (code)

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

Note: To make your search easier, simultaneously press the ctrl + f key to bring out a search box below your browser.

Have you finally seen the code? Now right above the code, paste the below code

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

Have you done that? Yayyy J Let’s move to the second phase of the work at hand

Search for the below code

 <data:commentPostedByMsg/> 

Have you seen it? Right below/ under the code, paste the below code

 <!--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--> 

Have you done that? Now we have completed the second phase of the project, now let’s move to the final phase which is the main goal of our tutorial.

Search for the below tag

 </head> 

Right above it, paste the below 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(http://1.bp.blogspot.com/-QPmLlsdFhSE/UQxj0UsmqQI/AAAAAAAABFk/7P-2mUtwwl0/s1600/comment-ball.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://onenaijablog.com--> 

Now save your work and view your blog. Tell me how awesome is the widget? Sweet right!

I know it is very easy following this steps and don’t worry because it works on all templates.

Must Read: ADDING A STYLISH REPLY BUTTON FOR BLOGGER BLOG

Do still have questions regarding the topic or are you having difficulty(s) implementing the codes. Then please do use the comment box below to state your problem and I’ll get back to you ASAP

Do you have comment or thought you’d like to share with me? You can also use the comment box below. Remember that your comment and thoughts are highly appreciated and welcomed so bring it on.

Do you like the post? Then do click the like button share us and recommend the post to friends because you’ll never know which of your friend need it most. ow do not forget to subscribe to our feed for your latest updates on the go.