Numbered comments on threaded comments for Blogger/Blogspot

In a past tutorial i've been talking about how you can add numbered comments to your blogger blog but today we'll learn how we can add numbered comments along with comment bubbles on our threaded comments too.

What the following CSS trick will do for you:

1. When the general block of comments is initiating (.comments-content) a counter called countcomments activates and starts with an initial value of 1. 
2. Then, each time the code flow goes through a review of any level, either a principal or a reply comment (.comment-thread li), content will bring us in front (:before) of the body of the comment, the number that is the counter at the time.
3. Then is incremented in one unit the counter (counter-increment).

See the screenshot:

Isn't that great? Well, i'm pretty sure many of you have been waiting for this cool trick. So let's begin applying it for our threaded comments system.

Steps to add bubble comments count:

Step #1: If you are using the old Blogger interface:

• Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

• Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step #2: Search (CTRL + F) for this piece of code:

]]></b:skin>

Add the following code just above it:

.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
font-size: 22px;
color: #555555;
padding-left:10px; 
padding-top:3px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo7uQ-J5u_YLi10Pj3qiaZCj7VIfNjsBX952ChaGyV6prNXrBeVltYlg4qeKHgPqJWpufF4xcEietxx-Sott7pc8U4Bt84zw56nelpLfplbpwndUHRvXo32vCJYQsMcWBjGiM6TgAsdn3k/s1600/comment+bubble2.png) no-repeat;
margin-top:7px; 
margin-left:10px; 
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/ 
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}

Note:

• remove the code in red (including the blue code) if you want to remove the comment bubble
• to change the comment bubble, replace the code in blue with the URL address of your own icon. If you're undecided what icon you should use, you can find some cool icons in my previous posts (check out here and here)
• to change the position of comments count, increase/decrease the values (3 & 10) from padding-top and padding-left
• to change the position of comments bubble/icon, change the values (10 & 7) from margin-left and margin-top

Step #3: Now save the template and you're done!

 If you enjoy reading this blog, please share and subscribe. For any questions, leave a comment below.

0

How to add “Email Subscription Form” to Blogger Blogspot

If you are providing useful information in your blog, then every visitor will want to get latest updates from your blog. For that purpose you need a Email Subscription Form in your blog, so that interested visitors can easily get latest updates. And to add email or feed Subscription Form to your blogger blog (blogspot) it's a very easy thing to do. So let's begin:

1. Log in to Blogger, then go to Design > Page Elements > click on "Add a Gadget" link.
2. From the pop-up window, click on the "HTML/JavaScript" gadget.
3. Paste the following code inside the empty box:

<style>
.hl-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLD5e7Tp_95EVabH6Bz5Ioui0JWB4xk5F-RJw1VA5N05_dWK1snk2hswxCg56YRuxMwoe4Eq6Z2cxGDClrqMHQwzEgisxp3mik37OspCt7_vncNt5dB7u3dWhG6L4TQnmBCcXv4LjjB3k/s1600/mail.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:130px;
color:#666;}
</style>
<div class="hl-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=helplogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="helplogger" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Settings 

• Replace the url address in green if you want to change the email icon
• Increase/Decrease the 130 width value for a wider text area
• Replace http://feedburner.google.com/fb/a/mailverify?uri=helplogger with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
• Replace helplogger with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=helplogger

4. Save your widget and check your blog.

0

Add Facemoods Emoticons To Your Blogger Comments

Want to add Facemoods emoticons in your Blogger comments? Then follow the next steps:

DEMO

Step 1.

If you are using the old Blogger interface:

• Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

• Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Search (CTRL + F) for this code:

• For previous commenting system: 

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

• For threaded comments:

<div class='post-footer-line post-footer-line-3'>

Step 3. Add the below code just above it
(for threaded comments, add the code after):

<b:if cond='data:blog.pageType == "item"'>
<div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn-ZQDH8dmbaO_sLyKwnuesR6r4hPp3LqqFBdr5u7YV2tUAC4YNxzocPJZ6XyG6kBnMbwnwPDBh1UbCIeFLBzs-qsLXaAtS4-RJGaCmhm2FxnCdZDT40n9b07RJldZSFqvsDDXKKRIgf-w/s1600/helplogger.blogspot.com(1).gif'/> :a
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkQCU__N_bYzRDfGaLT-XEWPcoh_wfKFM3I_6ovUqHFF0HA7JfDn0SvXdK36-uCO2MMRHhjYESTbVCLyNEuysflxdnOat3JBjDOegg8pEOxV2r0Jh_L2HdpigIuCfQndkxCwWRDoZGyQti/s1600/helplogger.blogspot.com+(2).gif'/> :b
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-1ViqN57Yu5ceGcBHxUoQn2Cn6Hx6Dlpxvo744NjOviMnQ2T8laNpwrpuJn4faj-uKnyhO0Gf4-TfMXhChyNeuE8Qudz5KQguY1sIl0pSkEmjgi1H93tTtfGwxeu-V6ehC6tbOZRrd5pH/s1600/helplogger.blogspot.com(3).gif'/> :c
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsg9Wjo30khD_Fl6d0_YIHnhyphenhyphenYFzRab67PkJqwuY9sqI8OtSNSr0XLCdYK7zlNH3ilN6xTMNvjyxewOkyJD5MRb62DkJabi4D3HkWGwucrFMNPSh9b4F7IffYdG4M_xaD8tTWZjrWo-SHF/s1600/helplogger.blogspot.com(4).gif'/> :d
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheQsllOIsFbh989gjYNAik3Juw5c77SbaBF3N49A2SOf00rFtED20er3Gxu84TEmQa9KJlkozfmPNCMgWVc7aQkbryz39QGM04g3jh1ruq6dFJ8_OWURTChPKeqv0we4R8sLr418c6CoXh/s1600/helplogger.blogspot.com(5).gif'/> :e
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGLMSggJd3GJC2DkFok36jxU0AxhktOCeKX3NfnyCtFITmM0i3UIoIdeIV3qc4wwLgSVKP92SnxEBB4B5auMw1UwTqDD7c5yWjwsa3u8931_mjq-vmtndea8H5FGP0jbAtzpxfLzr-2U17/s1600/helplogger.blogspot.com(6).gif'/> :f
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoR4hGSRvn4z4f1dutXSSOqwi1S4S6qmj6mX56Au9uadVchNwvqAlfl_mBuRYs01V9UoAaVjesyMpTZbHk1BQ6BFg6hWP8KdzxXG4t-aW1LmG-o4bUFE2iFkcDziTLa6lHjDH-0C6OGT4j/s1600/helplogger.blogspot.com(7).gif'/> :g
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIr0iOVKtGp5FXJeglpWEn3HOKTZuR6FF3URfkivsvKov7ibUPlIcVceFS6fEPplKBOvn6WfoGJaUi1H5mjdoSplfuxsTMJ77392ZfeqjKmIcFyBBMaCq9Xbw7f3b84wu84ellG2hBwhln/s1600/helplogger.blogspot.com(8).gif'/> :h
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSnYTQ2ex8lkDoxAdmHRxin6xNoI54oGZAU7WanjAzLez5jZQL6kmOgjR3hnATY71DnTNblbq2YnE6c5xfAYCEPdIBsijCXC2vKldLgoVGOXeKaQpIN8EEnl33l0cojXDoFAymtKZzg7l8/s1600/helplogger.blogspot.com(9).gif'/> :i
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJpbg7wY49nVbarTpJ1vPMSIuH9nhKvUrO3Brb-H72Y-dVH6JjpplQA4S62udVZRksikIwxfkocGIpy2F6z9v9CdhwWvlAgXeWGmaJJf9A99asagdge0yzAqJc0g_Dz8OqWh29mSPSTTc-/s1600/helplogger.blogspot.com(10).gif'/> :j
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYnq3uSnP5crClw7k0Jou7ZxcEyoA5VNonrOa7mtqUKpWnLnGfO6PY8FX-LChL1KmcTIbaEvDm4UtDNT6LuoQgO8KYgLP_I5zeEgIPF45RWnZ-DjjL02ibqHkUH6iPMjsS1VlZcE7pebLF/s1600/helplogger.blogspot.com(11).gif'/> :k
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMV3pYpEimam5z2nXPhiu_uamGhEWi9EVpOza-7U06BkmgNDV1g9oe3a2gPC375Z4ITAj0yzhMZEtvWnaBoIU09lz7x3H6oBlkoVeM5o6t_E6ffTJFg6QhWW9P5_pseNZsTJsyuj-OrCg7/s1600/helplogger.blogspot.com(12).gif'/> :l
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyDjhm5feTZ33Z2uUWeO7UtkSoLbqB803FQyhCMqOjxNzWATG3Si8MijhyU3RZ_mhSGRDrQ7H7wtYLCFo7gCc6FpAiFrE-AWtXfeL4zn72r_P7HIwCSvARJ4JD8kfBd5-idgSJOCT6Gmuv/s1600/helplogger.blogspot.com(13).gif'/> :m
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO7xAUQolB1AjPInHXD3Q-bT9X9FGuQ0KOjmoRjc8GvXqFPsnZ7p2PSYzcYvF9WFWbYl2fyd2ZzbnXsX6-4qNXYkoT00QBwzrnYgS2GEvguqMOObM5ZuC9hzjJXyOoHOrraavRFKquylKA/s1600/helplogger.blogspot.com(15).gif'/> :n
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEZUop1C6HuDwrOY6iyiiwOt_Fi5Q9Dpc47MBUWiHzwW3BhQNjdjppNcHzx8cfXZ55aLoho686LHu6isyPKby74qC7YhwHMxCrErjHyyE6lfmLp5dU8uZHaDDYyr0oxbdbvw7nlAgIZwJd/s1600/helplogger.blogspot.com(16).gif'/> :o
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYuBk8u0ANMjWLHICGjoYx0A7ZwQfDxYFDia-rgGanT02ZGRpqX8dEn_J-22yMpiaPJ3GBa-lkb5imSQaLEyK7EDF7kgKwso4wUksYEx8bzKl9sdRoAv1-QiKmg1fTTTENVLaRiaAHgTpU/s1600/helplogger.blogspot.com(14).gif'/> :p
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFaTHSZMDp9kNMjf5w1oxBoXPH_3od1BdAiuT8R4vYA8nNQcTtsXgxfEsp7N0gO_pSwbSV43xNS_Fuegim5eCTlwxm1wh8S-VhiNeS6vnqdy-up8NTSj39F-rDef1qj9sDaRuKZWrsuvxb/s1600/helplogger.blogspot.com(17).gif'/> :q
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKDnvwCJYZ3uZayC2wLaDhJVjyTtgpYYZ1gZuvUW-OmASQMQcCB_1JZSpxUAZlW0Fg6RLCoHLRibuHdsIIzxIwMutNPsbHl62eDYRlLuKv3mvQAOtXwGK4NLx1B27eXkxg1Bz85XNZiHWO/s1600/helplogger.blogspot.com(18).gif'/> :r
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeE0K-8uaC8XVVRDa_5GJcvYQ-633y4Xjprg40AKvzdfEgcA_I2Nu4HQAb7LxnHdrxmzq_FlbBinVYAXMmZ1FcMTKhL5rRWsAcLRGKDgTb3kS5HPfyFqMHVIQYD66NgrcIVRVrHPuotEHt/s1600/helplogger.blogspot.com(19).gif'/> :s
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2k9HoL2h28ioARe-kfMsUYR1Qit7dJHRvcpUMECd5aWXrojH5moV9qx34e7kEAqaru_OjRh2Bu5Tay1YloqPaczTnO3OwJ03ySWhhfMI63hyphenhyphentQ5cabObBjhI61y-TXK75xZp7F7Pk4lCU/s1600/helplogger.blogspot.com(20).gif'/> :t   <a href='http://helplogger.blogspot.com/2012/05/add-facemoods-emoticons-to-your-blogger.html' style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to Blogger + </a>
</div></b:if>

Step 4. Now search for this piece of code:

</body>

Step 5. And add the following code immediately above it:

• For previous commenting system:

<script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons.js"/>

• For threaded comments: 

<script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons threaded.js"/>

Step 6. Save the Template. And enjoy your comments :>

0