Threaded comments for blogger comment system (updated)




It's been a while from my last tutorial. The next tutorial is  about a feature that lots of people have been searching and trying to add it to their blogs. The threaded comments for blogger is one of the option that all blogger users want for their blog but it is unavailable by default.
But now with a little effort and a few tweeks of the template code you will be able to add this option on your comments form. You can check the original tutorial HERE.
The idea behind this came from the simple observation that most of us use @AuthorName to reply to comments posted by other users in 'single' threaded comments. So the javascript just parses the comment bodies for this author name (or comment ids) and then searches for appropriate comments to find parents of the reply comments.

How to make threaded comments on blogger?

1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find ]]></b:skin>. Before it paste the code:

#comments h4 {
font-size: 24px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width: 70px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background-image:  url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}

.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.cm_entry {
padding: 16px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
}

.cm_name {
font-weight: bold;
font-size: 12px;
float: left;
}

.cm_date {
font-size: 10px;
float: right;
font-style: italic;
color: #CCC;
}

.cm_entry p {
margin: 0;
font-size: 13px;
color: #666;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

IMPORTANT: If you have problems with the avatar search the next code
(in your template might be different):


.avatar-image-container {
background:url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SrTInZfKwVI/AAAAAAAAAwA/xaGlRIqkHDw/s400/default.gif); 
width:35px;
height:35px; 
}
.avatar-image-container  img {
 border:none;
 }

4. Then find </body> and right before it paste the next code:

&lt;script type="text/javascript"&gt;&lt;!--
var _0x7bf4=["\x32\x20\x78\x3D\x31\x72\x2E\x31\x6E\x2E\x4A\x3B\x32\x20\x46\x3D\x77\x2E\x79\x28\x27\x31\x6D\x27\x29\x3B\x32\x20\x6D\x3D\x46\x2E\x75\x3B\x32\x20\x70\x3D\x5B\x5D\x3B\x32\x20\x37\x3D\x5B\x5D\x3B\x32\x20\x64\x3D\x5B\x5D\x3B\x32\x20\x6E\x3D\x30\x3B\x32\x20\x49\x3D\x27\x27\x3B\x32\x20\x4B\x3D\x27\x27\x3B\x32\x20\x45\x3D\x27\x27\x3B\x32\x20\x69\x3D\x30\x3B\x32\x20\x6A\x3D\x30\x3B\x32\x20\x6B\x3D\x30\x3B\x32\x20\x68\x3D\x30\x3B\x32\x20\x62\x3D\x27\x27\x3B\x32\x20\x42\x3D\x22\x22\x3B\x32\x20\x71\x3D\x22\x22\x3B\x31\x73\x20\x31\x31\x28\x29\x7B\x32\x20\x56\x3D\x2D\x31\x3B\x38\x28\x5A\x2E\x31\x79\x3D\x3D\x27\x31\x7A\x20\x31\x76\x20\x31\x75\x27\x29\x7B\x32\x20\x31\x65\x3D\x5A\x2E\x31\x77\x3B\x32\x20\x31\x30\x3D\x31\x78\x20\x31\x32\x28\x22\x31\x74\x20\x28\x5B\x30\x2D\x39\x5D\x7B\x31\x2C\x7D\x5B\x5C\x2E\x30\x2D\x39\x5D\x7B\x30\x2C\x7D\x29\x22\x29\x3B\x38\x28\x31\x30\x2E\x31\x41\x28\x31\x65\x29\x21\x3D\x31\x70\x29\x56\x3D\x31\x71\x28\x31\x32\x2E\x24\x31\x29\x7D\x31\x6F\x20\x56\x7D\x32\x20\x57\x3D\x31\x31\x28\x29\x3B\x38\x28\x57\x3D\x3D\x2D\x31\x7C\x7C\x57\x3E\x3D\x39\x29\x7B\x31\x34\x28\x6D\x2E\x66\x28\x27\x4C\x3D\x22\x63\x27\x29\x21\x3D\x2D\x31\x29\x7B\x69\x3D\x6D\x2E\x66\x28\x27\x4C\x3D\x22\x63\x27\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x2B\x34\x29\x3B\x69\x3D\x6D\x2E\x66\x28\x27\x22\x27\x29\x3B\x70\x5B\x6E\x5D\x3D\x6D\x2E\x65\x28\x30\x2C\x69\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x29\x3B\x37\x5B\x6E\x5D\x3D\x77\x2E\x79\x28\x70\x5B\x6E\x5D\x29\x2E\x75\x3B\x64\x5B\x6E\x5D\x3D\x30\x3B\x6E\x2B\x2B\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x2D\x31\x3B\x69\x2B\x2B\x29\x7B\x76\x28\x6A\x3D\x69\x2B\x31\x3B\x6A\x3C\x6E\x3B\x6A\x2B\x2B\x29\x7B\x38\x28\x37\x5B\x6A\x5D\x2E\x66\x28\x70\x5B\x69\x5D\x29\x21\x3D\x2D\x31\x29\x7B\x49\x3D\x70\x5B\x6A\x5D\x3B\x4B\x3D\x37\x5B\x6A\x5D\x3B\x64\x5B\x6A\x5D\x3D\x64\x5B\x69\x5D\x2B\x31\x3B\x45\x3D\x64\x5B\x6A\x5D\x3B\x76\x28\x68\x3D\x69\x2B\x31\x3B\x68\x3C\x6A\x3B\x68\x2B\x2B\x29\x7B\x38\x28\x64\x5B\x68\x5D\x3C\x45\x29\x7B\x31\x37\x7D\x7D\x76\x28\x6B\x3D\x6A\x3B\x6B\x3E\x68\x3B\x6B\x3D\x6B\x2D\x31\x29\x7B\x70\x5B\x6B\x5D\x3D\x70\x5B\x6B\x2D\x31\x5D\x3B\x37\x5B\x6B\x5D\x3D\x37\x5B\x6B\x2D\x31\x5D\x3B\x64\x5B\x6B\x5D\x3D\x64\x5B\x6B\x2D\x31\x5D\x7D\x70\x5B\x68\x5D\x3D\x49\x3B\x37\x5B\x68\x5D\x3D\x4B\x3B\x64\x5B\x68\x5D\x3D\x45\x7D\x7D\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x3B\x69\x2B\x2B\x29\x7B\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x40\x3C\x61\x20\x4A\x3D\x22\x23\x63\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x2B\x31\x29\x3B\x6A\x3D\x71\x2E\x66\x28\x27\x3C\x2F\x61\x3E\x27\x29\x3B\x71\x3D\x71\x2E\x65\x28\x6A\x2B\x34\x29\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x71\x7D\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x50\x3D\x22\x59\x22\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x29\x3B\x38\x28\x64\x5B\x69\x5D\x3E\x36\x29\x64\x5B\x69\x5D\x3D\x36\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x27\x74\x3D\x22\x31\x35\x3A\x27\x2B\x28\x31\x39\x2D\x64\x5B\x69\x5D\x2A\x35\x29\x2B\x27\x25\x22\x20\x27\x2B\x71\x7D\x62\x2B\x3D\x37\x5B\x69\x5D\x7D\x62\x2B\x3D\x27\x3C\x67\x20\x50\x3D\x22\x31\x66\x22\x3E\x3C\x2F\x67\x3E\x27\x3B\x46\x2E\x75\x3D\x62\x3B\x46\x2E\x74\x2E\x51\x3D\x27\x31\x62\x27\x3B\x32\x20\x4D\x3D\x77\x2E\x79\x28\x27\x31\x61\x27\x29\x2E\x75\x3B\x32\x20\x6F\x3D\x4F\x28\x4D\x29\x3B\x38\x28\x6F\x3E\x72\x29\x7B\x62\x3D\x27\x3C\x67\x20\x74\x3D\x22\x47\x3A\x31\x63\x22\x3E\x31\x64\x20\x27\x3B\x32\x20\x48\x3D\x28\x6F\x2D\x6F\x25\x72\x29\x2F\x72\x2B\x31\x3B\x32\x20\x73\x3D\x27\x27\x3B\x32\x20\x6C\x3D\x31\x3B\x69\x3D\x78\x2E\x66\x28\x27\x2E\x31\x6C\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x78\x2E\x65\x28\x30\x2C\x69\x2B\x35\x29\x7D\x7A\x7B\x73\x3D\x78\x7D\x69\x3D\x73\x2E\x66\x28\x27\x23\x44\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x73\x2E\x65\x28\x30\x2C\x69\x29\x7D\x69\x3D\x78\x2E\x66\x28\x27\x3F\x53\x3D\x27\x29\x3B\x38\x28\x69\x3D\x3D\x2D\x31\x29\x7B\x6C\x3D\x31\x7D\x7A\x7B\x6C\x3D\x4F\x28\x78\x2E\x65\x28\x69\x2B\x31\x33\x29\x29\x7D\x76\x28\x69\x3D\x31\x3B\x69\x3C\x3D\x48\x3B\x69\x2B\x2B\x29\x7B\x38\x28\x69\x3D\x3D\x6C\x29\x7B\x62\x2B\x3D\x27\x3C\x55\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x55\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x61\x20\x4A\x3D\x22\x27\x2B\x73\x2B\x27\x3F\x53\x3D\x27\x2B\x69\x2B\x27\x23\x44\x22\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x61\x3E\x27\x7D\x7D\x38\x28\x6C\x2A\x72\x3C\x3D\x6F\x29\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x28\x6C\x2A\x72\x29\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x6F\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x32\x20\x43\x3D\x77\x2E\x79\x28\x27\x31\x69\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x43\x3D\x77\x2E\x79\x28\x27\x31\x68\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x38\x28\x6C\x3C\x48\x29\x7B\x62\x3D\x27\x3C\x74\x20\x31\x67\x3D\x22\x31\x6B\x2F\x31\x6A\x22\x3E\x2E\x58\x20\x7B\x51\x3A\x20\x31\x38\x7D\x3C\x2F\x74\x3E\x27\x3B\x32\x20\x4E\x3D\x77\x2E\x79\x28\x27\x31\x36\x27\x29\x3B\x4E\x2E\x75\x3D\x62\x7D\x7D\x7D\x7A\x7B\x31\x34\x28\x6D\x2E\x66\x28\x27\x4C\x3D\x63\x27\x29\x21\x3D\x2D\x31\x29\x7B\x69\x3D\x6D\x2E\x66\x28\x27\x4C\x3D\x63\x27\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x2B\x33\x29\x3B\x69\x3D\x6D\x2E\x66\x28\x27\x3E\x27\x29\x3B\x70\x5B\x6E\x5D\x3D\x6D\x2E\x65\x28\x30\x2C\x69\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x29\x3B\x37\x5B\x6E\x5D\x3D\x77\x2E\x79\x28\x70\x5B\x6E\x5D\x29\x2E\x75\x3B\x64\x5B\x6E\x5D\x3D\x30\x3B\x6E\x2B\x2B\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x2D\x31\x3B\x69\x2B\x2B\x29\x7B\x76\x28\x6A\x3D\x69\x2B\x31\x3B\x6A\x3C\x6E\x3B\x6A\x2B\x2B\x29\x7B\x38\x28\x37\x5B\x6A\x5D\x2E\x66\x28\x70\x5B\x69\x5D\x29\x21\x3D\x2D\x31\x29\x7B\x49\x3D\x70\x5B\x6A\x5D\x3B\x4B\x3D\x37\x5B\x6A\x5D\x3B\x64\x5B\x6A\x5D\x3D\x64\x5B\x69\x5D\x2B\x31\x3B\x45\x3D\x64\x5B\x6A\x5D\x3B\x76\x28\x68\x3D\x69\x2B\x31\x3B\x68\x3C\x6A\x3B\x68\x2B\x2B\x29\x7B\x38\x28\x64\x5B\x68\x5D\x3C\x45\x29\x7B\x31\x37\x7D\x7D\x76\x28\x6B\x3D\x6A\x3B\x6B\x3E\x68\x3B\x6B\x3D\x6B\x2D\x31\x29\x7B\x70\x5B\x6B\x5D\x3D\x70\x5B\x6B\x2D\x31\x5D\x3B\x37\x5B\x6B\x5D\x3D\x37\x5B\x6B\x2D\x31\x5D\x3B\x64\x5B\x6B\x5D\x3D\x64\x5B\x6B\x2D\x31\x5D\x7D\x70\x5B\x68\x5D\x3D\x49\x3B\x37\x5B\x68\x5D\x3D\x4B\x3B\x64\x5B\x68\x5D\x3D\x45\x7D\x7D\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x3B\x69\x2B\x2B\x29\x7B\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x40\x3C\x41\x20\x4A\x3D\x22\x23\x63\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x2B\x31\x29\x3B\x6A\x3D\x71\x2E\x66\x28\x27\x3C\x2F\x41\x3E\x27\x29\x3B\x71\x3D\x71\x2E\x65\x28\x6A\x2B\x34\x29\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x71\x7D\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x50\x3D\x59\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x29\x3B\x38\x28\x64\x5B\x69\x5D\x3E\x36\x29\x64\x5B\x69\x5D\x3D\x36\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x27\x74\x3D\x22\x31\x35\x3A\x27\x2B\x28\x31\x39\x2D\x64\x5B\x69\x5D\x2A\x35\x29\x2B\x27\x25\x22\x20\x27\x2B\x71\x7D\x62\x2B\x3D\x37\x5B\x69\x5D\x7D\x62\x2B\x3D\x27\x3C\x67\x20\x50\x3D\x22\x31\x66\x22\x3E\x3C\x2F\x67\x3E\x27\x3B\x46\x2E\x75\x3D\x62\x3B\x46\x2E\x74\x2E\x51\x3D\x27\x31\x62\x27\x3B\x32\x20\x4D\x3D\x77\x2E\x79\x28\x27\x31\x61\x27\x29\x2E\x75\x3B\x32\x20\x6F\x3D\x4F\x28\x4D\x29\x3B\x38\x28\x6F\x3E\x72\x29\x7B\x62\x3D\x27\x3C\x67\x20\x74\x3D\x22\x47\x3A\x31\x63\x22\x3E\x31\x64\x20\x27\x3B\x32\x20\x48\x3D\x28\x6F\x2D\x6F\x25\x72\x29\x2F\x72\x2B\x31\x3B\x32\x20\x73\x3D\x27\x27\x3B\x32\x20\x6C\x3D\x31\x3B\x69\x3D\x78\x2E\x66\x28\x27\x2E\x31\x6C\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x78\x2E\x65\x28\x30\x2C\x69\x2B\x35\x29\x7D\x7A\x7B\x73\x3D\x78\x7D\x69\x3D\x73\x2E\x66\x28\x27\x23\x44\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x73\x2E\x65\x28\x30\x2C\x69\x29\x7D\x69\x3D\x78\x2E\x66\x28\x27\x3F\x53\x3D\x27\x29\x3B\x38\x28\x69\x3D\x3D\x2D\x31\x29\x7B\x6C\x3D\x31\x7D\x7A\x7B\x6C\x3D\x4F\x28\x78\x2E\x65\x28\x69\x2B\x31\x33\x29\x29\x7D\x76\x28\x69\x3D\x31\x3B\x69\x3C\x3D\x48\x3B\x69\x2B\x2B\x29\x7B\x38\x28\x69\x3D\x3D\x6C\x29\x7B\x62\x2B\x3D\x27\x3C\x55\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x55\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x61\x20\x4A\x3D\x22\x27\x2B\x73\x2B\x27\x3F\x53\x3D\x27\x2B\x69\x2B\x27\x23\x44\x22\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x61\x3E\x27\x7D\x7D\x38\x28\x6C\x2A\x72\x3C\x3D\x6F\x29\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x28\x6C\x2A\x72\x29\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x6F\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x32\x20\x43\x3D\x77\x2E\x79\x28\x27\x31\x69\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x43\x3D\x77\x2E\x79\x28\x27\x31\x68\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x38\x28\x6C\x3C\x48\x29\x7B\x62\x3D\x27\x3C\x74\x20\x31\x67\x3D\x22\x31\x6B\x2F\x31\x6A\x22\x3E\x2E\x58\x20\x7B\x51\x3A\x20\x31\x38\x7D\x3C\x2F\x74\x3E\x27\x3B\x32\x20\x4E\x3D\x77\x2E\x79\x28\x27\x31\x36\x27\x29\x3B\x4E\x2E\x75\x3D\x62\x7D\x7D\x7D","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x76\x61\x72\x7C\x7C\x7C\x7C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x7C\x69\x66\x7C\x7C\x7C\x73\x74\x72\x6F\x75\x74\x7C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x4C\x65\x76\x65\x6C\x7C\x73\x75\x62\x73\x74\x72\x69\x6E\x67\x7C\x69\x6E\x64\x65\x78\x4F\x66\x7C\x64\x69\x76\x7C\x7C\x7C\x7C\x7C\x43\x6D\x5F\x43\x75\x72\x5F\x50\x61\x67\x65\x7C\x43\x6D\x5F\x42\x6C\x6F\x63\x6B\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x7C\x43\x6D\x5F\x4E\x75\x6D\x7C\x43\x6D\x5F\x54\x6F\x74\x61\x6C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x49\x64\x7C\x73\x74\x72\x5F\x74\x32\x7C\x32\x30\x30\x7C\x4F\x72\x67\x5F\x55\x72\x6C\x5F\x54\x68\x72\x65\x61\x64\x43\x4D\x7C\x73\x74\x79\x6C\x65\x7C\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C\x7C\x66\x6F\x72\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x43\x75\x72\x5F\x55\x72\x6C\x5F\x54\x68\x72\x65\x61\x64\x43\x4D\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64\x7C\x65\x6C\x73\x65\x7C\x7C\x73\x74\x72\x5F\x74\x31\x7C\x43\x6D\x5F\x50\x61\x67\x65\x5F\x4F\x62\x6A\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x4C\x65\x76\x65\x6C\x5F\x54\x7C\x43\x6D\x5F\x42\x6C\x6F\x63\x6B\x7C\x66\x6C\x6F\x61\x74\x7C\x43\x6D\x5F\x50\x61\x67\x65\x5F\x4E\x75\x6D\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x49\x64\x5F\x54\x7C\x68\x72\x65\x66\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x5F\x54\x7C\x69\x64\x7C\x43\x6D\x5F\x54\x6F\x74\x61\x6C\x5F\x4F\x62\x6A\x7C\x43\x6D\x5F\x52\x65\x70\x6C\x79\x43\x53\x53\x5F\x4F\x62\x6A\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x63\x6C\x61\x73\x73\x7C\x64\x69\x73\x70\x6C\x61\x79\x7C\x6F\x66\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x50\x61\x67\x65\x7C\x72\x69\x67\x68\x74\x7C\x73\x70\x61\x6E\x7C\x72\x76\x7C\x49\x45\x5F\x76\x65\x72\x7C\x63\x6D\x5F\x61\x75\x74\x68\x6F\x72\x5F\x72\x65\x70\x6C\x79\x7C\x63\x6D\x5F\x77\x72\x61\x70\x7C\x6E\x61\x76\x69\x67\x61\x74\x6F\x72\x7C\x72\x65\x7C\x67\x65\x74\x49\x6E\x74\x65\x72\x6E\x65\x74\x45\x78\x70\x6C\x6F\x72\x65\x72\x56\x65\x72\x73\x69\x6F\x6E\x7C\x52\x65\x67\x45\x78\x70\x7C\x7C\x77\x68\x69\x6C\x65\x7C\x77\x69\x64\x74\x68\x7C\x63\x6D\x5F\x72\x65\x70\x6C\x79\x5F\x63\x73\x73\x7C\x62\x72\x65\x61\x6B\x7C\x6E\x6F\x6E\x65\x7C\x31\x30\x30\x7C\x63\x6D\x5F\x74\x6F\x74\x61\x6C\x7C\x62\x6C\x6F\x63\x6B\x7C\x6C\x65\x66\x74\x7C\x50\x61\x67\x65\x7C\x75\x61\x7C\x63\x6C\x65\x61\x72\x7C\x74\x79\x70\x65\x7C\x63\x6D\x5F\x70\x61\x67\x65\x5F\x63\x6F\x70\x79\x7C\x63\x6D\x5F\x70\x61\x67\x65\x7C\x63\x73\x73\x7C\x74\x65\x78\x74\x7C\x68\x74\x6D\x6C\x7C\x63\x6D\x5F\x62\x6C\x6F\x63\x6B\x7C\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x7C\x72\x65\x74\x75\x72\x6E\x7C\x6E\x75\x6C\x6C\x7C\x70\x61\x72\x73\x65\x46\x6C\x6F\x61\x74\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x4D\x53\x49\x45\x7C\x45\x78\x70\x6C\x6F\x72\x65\x72\x7C\x49\x6E\x74\x65\x72\x6E\x65\x74\x7C\x75\x73\x65\x72\x41\x67\x65\x6E\x74\x7C\x6E\x65\x77\x7C\x61\x70\x70\x4E\x61\x6D\x65\x7C\x4D\x69\x63\x72\x6F\x73\x6F\x66\x74\x7C\x65\x78\x65\x63","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x4f09x1,_0x4f09x2,_0x4f09x3,_0x4f09x4,_0x4f09x5,_0x4f09x6){_0x4f09x5=function (_0x4f09x3){return (_0x4f09x3&lt;_0x4f09x2?_0x7bf4[4]:_0x4f09x5(parseInt(_0x4f09x3/_0x4f09x2)))+((_0x4f09x3=_0x4f09x3%_0x4f09x2)&gt;35?String[_0x7bf4[5]](_0x4f09x3+29):_0x4f09x3.toString(36));} ;if(!_0x7bf4[4][_0x7bf4[6]](/^/,String)){while(_0x4f09x3--){_0x4f09x6[_0x4f09x5(_0x4f09x3)]=_0x4f09x4[_0x4f09x3]||_0x4f09x5(_0x4f09x3);} ;_0x4f09x4=[function (_0x4f09x5){return _0x4f09x6[_0x4f09x5];} ];_0x4f09x5=function (){return _0x7bf4[7];} ;_0x4f09x3=1;} ;while(_0x4f09x3--){if(_0x4f09x4[_0x4f09x3]){_0x4f09x1=_0x4f09x1[_0x7bf4[6]]( new RegExp(_0x7bf4[8]+_0x4f09x5(_0x4f09x3)+_0x7bf4[8],_0x7bf4[9]),_0x4f09x4[_0x4f09x3]);} ;} ;return _0x4f09x1;} (_0x7bf4[0],62,99,_0x7bf4[3][_0x7bf4[2]](_0x7bf4[1]),0,{}));
--&gt;&lt;/script&gt;

5. The final step is to search for the following code:

<b:includable id='comments' var='post'>

lots of code lines that you must replace

</b:includable>

... and replace the code lines between that includable with the next code:

<div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments &gt; 0'>
          <b:if cond='data:post.numComments == 1'>
            <span id='cm_total'>1</span> comment
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> comments
          </b:if>
        </b:if>
        </h4>
        
        <div id='cm_reply_css'></div>
        
        <div class='cm_pagenavi' id='cm_page'></div>
        
        <div id='cm_block'>
            <b:loop values='data:post.comments' var='comment'>
                <b:if cond='data:comment.isDeleted'>
                <b:else/>
                
                    <div expr:id='data:comment.anchorName'>
                        <div class='cm_wrap'>
                            <a expr:name='data:comment.anchorName'/> 
                            <div class='cm_head'>
                                <div class='cm_avatar'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>                        
                                </div>
                                <div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=154513103004606848&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
                                </div>
                            </div>

                            <div class='cm_entry'>
                                <span class='cm_arrow'></span>
                                <div class='cm_info'>
                                    <div class='cm_name'>
                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                        </b:if>
                                    </div>
                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>                                    
                                </div>
                                
                                <p><data:comment.body/></p>
                            </div>
                        </div>
                    </div>
                </b:if>              
     </b:loop>
        </div>

        <div class='cm_pagenavi' id='cm_page_copy'></div>
        
    <b:if cond='data:post.embedCommentForm'>
            <b:if cond='data:post.allowNewComments'>
                <b:include data='post' name='comment-form'/>
            <b:else/>
                <data:post.noNewCommentsText/>
            </b:if>
            <b:else/>
            <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
            </b:if>
    </b:if>

  </b:if>
  </div>


IMPORTANT: Replace the red line with the your own BlogID number.

Where you can find the BlogID? See the pictures bellow.

For new Blogger interface:


For old Blogger interface:






The blog ID is the number highlighted. Yours will be different than the one in the pictures.

Save the template and see the results.

6. IMPORTANT UPDATE: If after this 5 steps the comments doesn't appear like in the demo , it's because Blogger implemented they're own threaded comment system. To replace it and have the comments like in the tutorial you must find the next code (you will find it in 2 places):

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

...and replace the red code lines with the next line:

<b:include data='post' name='comments'/>

Save again and see the results.

 DEMO: See the comments below

UPDATED VERSION WITH HIGHLIGHTED AUTHOR COMMENTS HERE

Get Latest Updates For Free!

Subscribe via Email

231 comments

September 2, 2011 at 4:29 PM

Test threaded comments for Blogger. When someone leaves a reply to a comment, that reply will appear below the replied comment.

September 2, 2011 at 4:29 PM

@ArtisTutor
Test threaded comments for Blogger. When someone leaves a reply to a comment, that reply will appear below the replied comment.

September 2, 2011 at 4:30 PM

@ArtisTutorTest threaded comments for Blogger. When someone leaves a reply to a comment, that reply will appear below the replied comment.

Anonymous
September 3, 2011 at 11:30 AM

tks 4 share

September 4, 2011 at 6:39 AM

Thanks4 your effort

September 5, 2011 at 4:49 PM

Cool, looks exactly like WordPress Comment form, Thanks much much =)

September 5, 2011 at 6:30 PM

@Born to Trade
I'm glad you find it useful.

September 8, 2011 at 3:30 PM

this is so interest...
but in case, you too much change code...
avatar, comments list, reply or etc all must to change???
can you give the simple code just for threaded system only?

like this:
http://beben-koben.blogspot.com/2010/01/threade-comments-in-blogger.html

theres too much script, but you script so simple?
can you just give for threaded methode only?
thanks :)

September 8, 2011 at 3:36 PM

i'll have try you all step by step...but it's not work for my blog...
and comments box and frame to be double!!!

i mean that it my friend to much change in your directions...what is the code/script threaded only for add in template?

duh...my inggris so bad -___-' i hope you understand what my mind :D

September 9, 2011 at 9:05 AM

@Beben Koben The thing is that for creating threaded comments you use some javascript and a couples lines of CSS.
You can't take only the code for threaded comm because you will have to implemented on your custom comment system and it'a a really big chance that it will not work.

September 9, 2011 at 9:18 AM

@Beben KobenIf you want the comments like in the tutorial, send me your template and I will add it for you.

Send template to:

artistutorials@gmail.com

September 9, 2011 at 2:12 PM

@ArtisTutor hihihi be like this

http://i52.tinypic.com/k508qc.png

???

i'll have delete CSS coded on my comments side with your coded?

September 9, 2011 at 3:47 PM

@Beben Koben Yes like that.
You have to delete all the code from your custom comments and replace it with the one in the tutorial.

September 10, 2011 at 10:55 PM

bos bos look...

http://i54.tinypic.com/169ombq.png

i'll did it, DONE...

thanks bos \m/

i'll promote on my blog...later ;)

Cheers ☺

@ArtisTutor it's not working for my blog

September 11, 2011 at 6:38 AM

thank you, really nice tutorial ^^ i have applied on my site HERE

but, is it possible to make my comments have a different color or style from other? please help me to make it true~

*because it'll be great if author comment has different style from visitor's comment ^^

i really appreciate your help >_<

September 11, 2011 at 9:40 AM

@Manchester United Tech | Berita Sepak Bola I can see that it's working now on your blog

September 11, 2011 at 3:40 PM

just for share...
for make different comments author with visitor comments ;)
Make Different Comments Side on Threaded Comments II
Cheers^^

September 14, 2011 at 7:37 PM

Great tutorial, but how can I find my blog ID number?

September 14, 2011 at 8:27 PM

@RhiannonLook at the next pictures:

New Blogger interface:

http://img269.imageshack.us/img269/5846/capture1yg.png

Old Blogger interface:

http://img62.imageshack.us/img62/3289/capturehmb.png

The blog ID is the number highlighted. Yours will be different than the one in the pictures.

September 16, 2011 at 7:58 AM

@Nurmayanti Zain just test for my first comment here :))

September 16, 2011 at 3:38 PM

I want to make threaded Comment Like this,but with my Comment Form Style. what is the Part of code/script threaded for add in template?

September 17, 2011 at 10:26 AM

@Anonymous :

testing..... ^^

September 17, 2011 at 12:57 PM

@InternetTeknologi.ComSend me your template and I'll do it for you, because it's a little complicated.

E-mail:

artistutorials@gmail.com

September 21, 2011 at 12:34 AM

It works great! I love it. Thanks for sharing :)

September 26, 2011 at 7:20 PM

Hi ! Can you visit my blog ? My cm_avatar not fix, can you show me where its wrong ???

September 26, 2011 at 8:15 PM

@Elvis Anh Find in your template:

.avatar-image-container
.avatar-image-container img


and make sure the width and height is the same with the width and height of the cm_avatar.

September 27, 2011 at 5:18 PM

@ArtisTutorThanks so much, I'll try.

September 27, 2011 at 5:20 PM

Can I add your Url on my blog? I want to learn about code blogger from you. Sincerely !

September 27, 2011 at 10:42 PM

@Elvis AnhYes you can. I'm glad to help.

September 28, 2011 at 6:09 AM

@ArtisTutorThanks ! may all your health and success !

Anonymous
September 29, 2011 at 7:37 AM

Thanks for sharing. Good luck

September 30, 2011 at 9:17 PM

hii,.why when i tried to reply comment, it doesnt to worked.,???
and can i make a style comment like this blog..??? help me please...!

September 30, 2011 at 10:40 PM

@Uzik '90Make sure that on the step no. 5 in this piece of code:

<div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=154513103004606848&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
</div>

replace : 154513103004606848 with your blog ID

October 1, 2011 at 3:40 AM

@ArtisTutori have replaced it, but it's still error.,
how is this.,???

October 1, 2011 at 1:26 PM

@Uzik '90 Then make sure you have copied all the code from step 5. If that doesn't work send me the template to see what's the problem.

artistutorial@gmail.com

October 8, 2011 at 6:26 PM

Thanks for the tip, got it working on my wife's blog on the first try.
http://www.goodbaggirl.com/

October 11, 2011 at 10:18 AM

@ArtisTutorHi ! can you help me,please. I tried, but my avatar is not fixed with frame. Nice day !

October 11, 2011 at 11:27 AM

@Elvis AnhSend me your template to fix it.

artistutorials@gmail.com.

October 20, 2011 at 3:33 AM

pas saya pasang di blog saya kok gak bisa nampilin profile picture ya??

October 20, 2011 at 2:35 PM

@Bung Tau I resolved the problem with your template and send it to you.

Anonymous
October 22, 2011 at 4:21 AM

@ArtisTutorDoes it work only fot old comment form style? Btw this is an awesome hack

October 24, 2011 at 7:01 PM

Hi Artistutorial, I have tried applying this kinds of threaded comments, and I found it working. Unfortunately, it didn't show the way this this tutorial look. It cut my comment border and the profile thumbnail shitfed to the edge of comment box. And it seemed the edge of the comment border overlapped with the edge of the comment box border.

Could you please fix it for my blog, just this tutorial looks like?
Oh ya, if you don't mind, please make it also shaded for the author's blog. I mean visitors comments are different with the author comments (for colour)...

I sent you my template via your gmail. Please check it out.
Looking forward to hearing from you soon.

Please notify me at my Cbox...
Thank you...

October 24, 2011 at 9:02 PM

@VisionascI didn't get any email. Resend it and make sure you write the address correctly.

October 27, 2011 at 2:35 PM

Can you give me the code that you use now? I like this comment box.

October 29, 2011 at 1:51 AM

@ArtisTutor

Hey, I have resent it...
Please help me...
Thanks

October 29, 2011 at 1:18 PM

@Visionasc Done.

October 30, 2011 at 6:07 AM

@ArtisTutor

Hi, thank you very much for fixing the code for me. Unfortunately, there're still some little problem...
1. The space between the name of a commenter and the comment itsel is too far, different from the previous comment (that has been there before the code fixed). I inspected it with firebug and I found a "" there, made that space. But, when I was looking for it in the template I found no " in the part of the code...

2. The comment editor width has also been changed. I tried to find the related code, I found it, but there was only height there, no width...

Please, fix this...
I'm sorry for burdening you with this...

October 30, 2011 at 6:19 AM

@ArtisTutor

Hahahahha, I did it. I solved.
Just need to added "width" right...
Thanks thanks thanks...

October 30, 2011 at 9:16 AM

@Visionasc1. For that space to disappear when you reply to a comments just do not let any space after " </a> " in the popup window.
See the image:
Reply Comment

October 30, 2011 at 10:15 PM

Hi thanks for sharing ...but a hava question for u...
1.how to make defferent color for the author same like ur blog ?
2. the avatar can not show yet..how do to fix it ?
thank a lot

October 31, 2011 at 10:47 AM

@ErwinPut a link to your blog to see it.

October 31, 2011 at 3:02 PM

@ArtisTutor please check...! thank You

October 31, 2011 at 6:04 PM

@NiwidaDelete all the previous Comments CSS for the avatar to work.

ol.commentlist li { /* Comment Wrapper */
..
..
..
..
ol.commentlist li.even { /*The background color for 1-3-5... no comments*/
background:#fff;
}

October 31, 2011 at 7:17 PM

@ArtisTutor yes it's work for the avatar... :D
and now how a bout defferent color for the author...?? :) thanks a lot

October 31, 2011 at 8:45 PM

@ErwinI will post a tutorial in a couple of days.

Anonymous
November 2, 2011 at 8:36 AM

thanks bro. really nice tutorial. i already applied at my blog.

November 2, 2011 at 3:46 PM

Btw, why my comment box doesn't look like yours or this one (http://www.tigefa.info/2011/10/gratis-fans-facebook-dan-followers.html). instead, it appears like this (http://visionasc.blogspot.com/2011/10/critical-thinking-or-creative-thinking.html), could it look like yours?

Thanks

Anonymous
November 3, 2011 at 4:16 PM

I got an error that for my Blog ID, div is not allowed, only includable...any ideas?

November 3, 2011 at 6:15 PM

@AnonymousMake sure you follow the tutorial exactly and it will work

November 4, 2011 at 1:49 PM

@ArtisTutorwhere the tutorial about different colour for comment ing like this..
we waiting...
thanks before

November 7, 2011 at 9:05 PM

I followed the tutorial to the letter and everything LOOKS good, but when I hit the "reply" button under a comment I get an Error 404 message in a pop-up window. Any idea what is going on?

November 7, 2011 at 9:41 PM

@Erin @ The Impatient GardenerFind blogID=154513103004606848 and replace the 154513103004606848 with your own blog ID

November 8, 2011 at 12:14 AM

@ArtisTutorA ha .... I typed it in wrong. Got it in right this time and it seems to work. Thank you!

November 11, 2011 at 10:42 AM

I added this to my blog with no problem but the comments aren't coming up as threaded. My replies are in the same line as all the other comments and winding up at the end of the comments. The @soandso is there but that's all.

November 11, 2011 at 11:42 AM

@DeeDid you follow the step 4 of the tutorial, adding that script before body tag?

November 11, 2011 at 4:22 PM

@ArtisTutorThank you. That was the problem. Code installed and now it works perfect.

November 15, 2011 at 5:16 PM

it works but the avatar is not at a right place. how to fix it?

November 17, 2011 at 12:08 PM

@Lil' NgangaDelete all the previous Comments CSS for the avatar to work.

November 19, 2011 at 9:42 AM

Awesome tutorial, thanks a TON.
I have added on my blog http://www.easyblogging.in

Repped you. Became your fan on facebook, follwoing on twitter, also shared your blog in G+.

Thanks again.

November 24, 2011 at 8:23 PM

I have one dout & one error

error : avatar not displaying correctly
check here : http://maganizneblog.blogspot.com/2011/11/xbox-360-price-in-india-review-features.html

Dout :
how to change Author Comment Colour Like ur style?

November 25, 2011 at 12:53 PM

Thanks for this awesome tutorial, I did it yesterday on my blog (stuck-in-a-book.co.uk) and I'm really happy with it - but I've been told that it doesn't work when people try to comment in IE8. It seems fine in my version of IE, but I'm not sure which one I have(!) Is this a problem anyone else has mentioned?

November 25, 2011 at 5:38 PM

@Naren Dran1. Delete all the previous comment CSS and the avatar will work.

2. See this link:
http://beben-koben.blogspot.com/2011/09/komentar-berbeda-untuk-threaded.html

November 25, 2011 at 5:39 PM

@StuckInABookI didn't have any problem with it in any browser, so I guess it works fine in all of them.

November 26, 2011 at 1:47 AM

@ArtisTutor ok, thanks! No idea what issues those people have...

November 26, 2011 at 6:53 PM

@ArtisTutor already i deleted all css coding related comments its show like that only

December 12, 2011 at 10:24 AM

thanks, nice tutorial

December 14, 2011 at 5:39 PM

Thanks for sharing, this is great tutorial.
I've tried this. But not working perfectly. It's not look like yours.
And I have a question. How to make comment form like your blog, Author have different color than visitor's?
Sorry, if my English not very good.
Thanks before.

December 21, 2011 at 9:05 PM

i don't have the same result
please help me
take my url: www.toprodata.co.cc

December 22, 2011 at 2:20 PM

nice share!!
I've tried and it working on my blog! check it out!
thank you very much!!^^

December 23, 2011 at 5:27 PM

woww thanks for info hehe ;D
thats look great broo

December 24, 2011 at 8:29 AM

I will send you my template, please make my template like this post

andrepamungkas31@gmail.com

December 24, 2011 at 5:33 PM

how to make different comments with "admin" ?

December 26, 2011 at 8:24 PM

How can we make admin comments with differents style ?

December 27, 2011 at 4:09 AM

Thanks for Sharing.
this is great tutorial.
I've tried this and Now I enjoy to reply comments on my blog...

December 27, 2011 at 8:54 AM

Hi Aristutor

Thanks for great tutorial.

I applied your tips on my blog, but doesn't work. I follow that instructions exactly, even so my comment form staying doesn't appearing.

If You need, i´ll send my blog template for your review, because this can help people that have same problem.

This is my test blog, if you can see:
http://claudioteste.blogspot.com

Thank You very much, and congratulations for the great job helping other peoples.

See You.

December 27, 2011 at 9:29 AM

I tried to post my question, but have problems with my google account. If You want, delete them.

My question is about tutorial. I give You congratulations for sharing your knowledge with me and others, helping us.

I applicate exactly the codes posted here, but my comments form still don't appearing. I´m tried to change some colors in CSS of the form code (1st code) but don't works, so I change It to original values.

If You authorize, I can send my blog template for You by email, because I think that my problem can be the same of other people.

I'll apreciate your help. Congratulations, and good luck.


Claudio

December 27, 2011 at 11:27 AM

@AdministrateurI'll post a tutorial very soon.

December 27, 2011 at 11:27 AM

@Claudio R E BoaventuraSend me the template to see.

December 27, 2011 at 5:58 PM

@ArtisTutor

I send You my template. The "popup" and "full page" options are working perfectly, the problem is "embedded below post".

Thanks for your help.

Claudio

December 27, 2011 at 11:41 PM

Oh this is sweet! Disqus has been annoying me for the past few weeks anyway.

However, the profiles' avatars are not showing up where they should, any suggestions why this is?

Cheers!

December 28, 2011 at 7:17 PM

Mh I am not sure if my comment vanished or if you deleted it...

Err. Anyway, great tutorial, it is working but I have the same issue with the avatars not showing up correctly.
I had a look at the existing comment css but I am not sure what to delete without breaking the template.

Can I send you my template to have a look at it?

December 30, 2011 at 12:32 AM

Terima kasih
i already applied at my blog.

December 30, 2011 at 12:26 PM

@Godfrina Yes send me your template and I will fix it.

December 30, 2011 at 12:55 PM

@Claudio R E BoaventuraFixed and sent to your email.

December 30, 2011 at 12:56 PM

@Andre PamungkasDone and sent to your email.

December 30, 2011 at 12:57 PM

@sally t. leGlad that I helped you

December 30, 2011 at 12:57 PM

@AnonymousGlad to help.

December 30, 2011 at 12:58 PM

@AnonymousI am glad I helped you.

December 30, 2011 at 1:00 PM

@RehanaGlad I helped you. Have a nice day.

December 30, 2011 at 1:01 PM

@Dody FarialThanks for the appreciation

December 30, 2011 at 2:16 PM

@ArtisTutor
Hello, how are you?

Thank You very much, your fixed template works very well. As a last question, I found other problem: my left float sidebar are duplicate. I tried to find the piece of code that are doubling my "floating sidebar", but I could not fix it. I want to keep the previous bar, and eliminate the second bar that appeared, but I can't.

The comments form are working perfectly, You did a great job, thank You again.

Hugs, and God bless You!!!

December 30, 2011 at 3:28 PM

@ArtisTutorthanks

December 30, 2011 at 4:03 PM

@ArtisTutor

Hi, I remove a gagget type text that duplicate the side icons.

Problem fixed, thanks a lot.

God bless You,


Claudio

December 30, 2011 at 10:30 PM

i have a problem that comments don't appear in internet explorer navigator with Threaded comment system
please help me

Mingo
December 30, 2011 at 10:51 PM

very good post, I have a doubt and question, I have DISABLED the comments and i do not like re-enable them, any help? sorry my english http://img846.imageshack.us/img846/263/fabulosol.jpg

December 31, 2011 at 7:54 AM

@AdministrateurWhat version of Internet Explorer?

December 31, 2011 at 7:55 AM

@Mingo To hide the comments go to:

Settings - Post and comments - Comment location - and chose Hide then save

December 31, 2011 at 10:41 AM

Hello, I want my comment box remains the same as yours, what is the code?

I can send you my template and you do it? You could make the comment box is in accordance blog colors?

Sorry for my English.

Thanks

December 31, 2011 at 12:33 PM

i used internet explorer 9
besides i can't see your comments else on ie9...

December 31, 2011 at 3:49 PM

thx man ... it works ... and i do know how you make your form comment is different than the others ??? please could you tell me how :)

December 31, 2011 at 3:54 PM

@AdministrateurI've checked and it works both in IE 8 and IE9 so maybe it'a a problem with your browser.

IE8:
http://img259.imageshack.us/img259/189/ie8.png

IE9:
http://img577.imageshack.us/img577/6439/ie9.png

December 31, 2011 at 3:55 PM

@Aksatriya Diwangkara NusantaraI'll post a tutorial very soon.

December 31, 2011 at 3:55 PM

@MohamedtI'll post a tutorial very soon.

December 31, 2011 at 4:07 PM

@ArtisTutorman ... how to give default avatar for anonymous like you did man ??? please tell me and visit my blog ... www.nusantara666.blogsopt.com

December 31, 2011 at 10:56 PM

@ArtisTutor

Hello again. I made very tests, but I can't select the input text form to write comments in my blog.

It's working only in IE8 running Windows XP, but in Windows 7 It's not working in IE9, Firefox 8.0.1 and Chrome 16.0.912.63.

I'll be thankful if You access my blog to make tests too.

Thanks for your great help, have a Happy 2012!!!

January 1, 2012 at 2:54 PM

@ArtisTutorman why mine is no avatar for anonumous ... the avat for the unknown identity is empty ... there's no default avatar like yours ... why ??? please tell me .. and if you want to help me for my blog ... here is my blog www.nusantara666.blogspot.com

January 2, 2012 at 3:42 AM

to the admin, after I plug as directed above, even swordfish appear blogger profile photo ID when logged in with their blogspot? where lies the fault. thank you

January 2, 2012 at 7:25 AM

dude it's not working for me help me plz

January 2, 2012 at 1:37 PM

my problem is resolved, thank you for the tutorial.
there is one thing I wanted to ask, how do I edit the script so that comments which appear only 10 per section of the page? thanks for attentions

January 4, 2012 at 10:41 PM

Hi , I have a lot of problems pasting the codes into the right spaces . Can I send you my template ,too?
Thank you

Lena

January 5, 2012 at 11:33 AM

@Lenas FotografieYes , send me your template

January 5, 2012 at 11:34 AM

@SOFTECHNOGEEKWhat exactly doesn't work?

January 5, 2012 at 11:34 AM

@Belajar KomputerI don't understand what is the problem.

January 5, 2012 at 12:44 PM

wow., thank you., i'll try on my blogspot., :D

January 5, 2012 at 6:21 PM

Hello! I can not find ]]> where i must start!?

January 5, 2012 at 6:46 PM

can i send you my template to fix me the problem
juste give adresse mail if it can be

January 5, 2012 at 6:49 PM

man please ...my avatar box is double ... please help me ...
you can see it ... http://nusantara666.blogspot.com/2011/04/ice-cream-magnum-mengandung-minyak-babi.html

January 5, 2012 at 6:58 PM

@Aksatriya Diwangkara NusantaraDelete the old CSS for the comments and leave only the one in the tutorial.

January 5, 2012 at 7:00 PM

@QueenOfEvilnessYou need to find ]]></b:skin> it can't be missing from your template.

January 5, 2012 at 7:01 PM

@AdministrateurFirst, what is the problem?

January 5, 2012 at 7:54 PM

comments don't appear

January 5, 2012 at 8:08 PM

@AdministrateurSend me the template

artistutorials@gmail.com

January 5, 2012 at 8:22 PM

Great tutorial, thank you so much!!!
It worked out all great and I'm a total HTML Newbie.

I still have another question: is there a way to place the font "leave a comment" (Kommentare veröffentlichen) left aligned? Now it's neither in the left nor in the middle.

January 5, 2012 at 8:48 PM

okey

January 5, 2012 at 10:24 PM

thank you sooooo much!

January 5, 2012 at 11:43 PM

@lychee

I got it :-)

January 6, 2012 at 1:14 AM

Hello!
Thank you for that great tutorial!
Creative-Pink

January 6, 2012 at 9:52 AM

Glad i could help you all.

January 6, 2012 at 5:51 PM

yes thanks for the instructions, I managed to change the commentary box, although earlier sempet wrong, hehe;)

greeting familiar

January 6, 2012 at 11:13 PM

Hi ArtisTutor,

The coments form problem with my blog was fixed, thank You very much for your help.

I search your site for posts talking about "Archive Blog widget problem", but I don't find anything. My problem is when I click on the arrow, because its doesn't show me the months with published post.

Do You have any ideia what might be causing the problem?

Any help will be welcome. Thank You very much,

Claudio

January 7, 2012 at 6:27 PM

thank you very very very much for these instructions, because of them i'm now able to reply to comments!
i really appreciate it, thanks for putting this here!

January 7, 2012 at 11:28 PM

thanks for this very helpful tutorial!
but something isnt working on my blog

http://provinzkindchen.blogspot.com/2012/01/sale-shopping.html#comment-form

could you please help me?

January 7, 2012 at 11:57 PM

@hannahMake sure you follow the exact tutorial.
If that doesn't work send me the template.

January 8, 2012 at 2:02 PM

It doesn't work in my blog.
Maybe the problem is, that the avatar picutres are at the right side (in my blog) and not left (as here in your blog).
But I don't know how I can change this. :-(

January 8, 2012 at 3:23 PM

@AudreyI see that is working the threaded comments on your blog.The only thing to do is that you setup the comments to embedded setting like in the next picture:

http://img39.imageshack.us/img39/7271/capture4m.png

January 8, 2012 at 5:11 PM

hm it doesn't work on my blog:http://schlingeline.blogspot.com/
I couldn't find the
it's not there. :(

January 8, 2012 at 5:45 PM

@FairyThe... what?
If you post code in the comments first go to TOOLS on the menu and use the HTML to ENTITIES tool to make code friendly.

If you post the code directly from template it will not appear in the comment.

January 8, 2012 at 7:27 PM

@ArtisTutor

Oh sorry i meant the "includable id='comments' and so on"

January 8, 2012 at 7:42 PM

@FairyDid you Click on "Expand Widget Templates" ?

January 8, 2012 at 7:55 PM

@ArtisTutor

*ashamed* oh yes I did it and now it works. Sorry just didn't read it. I'm from Germany and first didn't know what you meant with expand, but now it's clear.
Thanks a lot, this template is soo helpful!

January 8, 2012 at 8:03 PM

@FairyNo problem. Everybody makes little mistakes. I'm glad I could help you.

You still need to replace the blogID=154513103004606848 number with your blog ID for the reply to work.

January 8, 2012 at 8:12 PM

@ArtisTutor

Ok just done, NOW it finally works :D

January 8, 2012 at 11:02 PM

Thanks a lot for the tutorial! You just made my day :)
Tomorrow I will try your newest tutorial. It's so cool! Thanks again!

January 9, 2012 at 1:46 PM

@Fairy

I made the same mistake... LOL

Please forget what I wrote before...

January 9, 2012 at 9:59 PM

It doesn't work. :(
I did all how you described...

Can you help me please?

January 9, 2012 at 10:49 PM

@Alena ♥Send me your template.

artistutorials@gmail.com

January 10, 2012 at 2:38 PM

@ArtisTutor
Thank you so much! :)

January 10, 2012 at 3:15 PM

@Alena ♥
Ahhh, all is okay, thanks again!

January 11, 2012 at 8:33 PM

Wow, I'm really surprised - it really works :) Even the avatar is correct. :) Thanks a lot for your tutorial :D

January 12, 2012 at 8:18 AM

Hi
Last week i found this tutorial and I copy & paste all steps in my Blog.
It works... until today. It does not still work.
Now it is "normal" without threaded comments :(
http://www.abload.de/img/unbenannte7kge.jpg
Do you know what is wrong ?
Greetings from germany

January 12, 2012 at 11:10 AM

@JessiI'm working to find a solution for this problem.

January 12, 2012 at 11:10 AM

@ArtisTutorThank you for your help. It will be nice if you find a solution. I think I will subscribe your blog to see it when you find one =)

Anonymous
January 12, 2012 at 1:40 PM

What do you mean with "delete all the old comments CSS"?
I think this tutorial is great, but it didn't work on my blog..

January 12, 2012 at 5:45 PM

@JessiSee the step 6 of the tutorial for the solution.

January 12, 2012 at 5:49 PM

@ArtisTutorit works ! thank you very much =)

January 13, 2012 at 9:30 AM

It doesn't work for me :( is it because of the template?

January 13, 2012 at 11:24 AM

@RibkaI don't see on your blog any of the code from the tutorial. Respect all the steps in the tutorial and it will work.

January 19, 2012 at 8:34 AM

Thanks for share tutorial...It work to my blog..
Thank you very much

January 23, 2012 at 3:54 AM

amazing tips boz, and this work to my blog, thanx alot :D

January 25, 2012 at 8:34 AM

it's an awesome tutorial, but i have some trouble on the fifth step==> IMPORTANT: Replace the red line with the your own BlogID number.

i can't find my blogID number in HTML script, how can i find my BlogID number?
thanks in advance..

January 25, 2012 at 8:49 AM

it's work bro..thanks for the tutorial..

January 25, 2012 at 11:02 AM

@julayzulhamLook at the next pictures:

New Blogger interface:

http://img269.imageshack.us/img269/5846/capture1yg.png

Old Blogger interface:

http://img62.imageshack.us/img62/3289/capturehmb.png

The blog ID is the number highlighted. Yours will be different than the one in the pictures.

Anonymous
January 26, 2012 at 7:50 AM

thanks, enjoyed the article

February 2, 2012 at 4:03 PM

@Anonymousthaaank you!!

February 10, 2012 at 9:57 AM

@ArtisTutor

Niche share , tanks lots

February 10, 2012 at 11:17 AM

I've managed to make it on my blog
but i think the writing is too small
how to enlarge his writings ?

help me please...

February 10, 2012 at 11:39 AM

@An NahalFind:

.cm_entry p {
margin: 0;
font-size: 13px;
color: #666;
}

...and change the font-size value.

February 10, 2012 at 11:57 AM

I've been able to make
now, how to make the color of the comment box admin ?

February 10, 2012 at 12:09 PM

@ArtisTutorafter i try as you suggest, the letter does not change as well.
I change the size of the letters have to be 15

February 10, 2012 at 3:27 PM

@An Nahal See this tutorial:

http://artistutorial.blogspot.com/2012/01/threaded-comments-for-blogger-comment.html

February 11, 2012 at 3:41 AM

I'm coming to say big thank you for help me about threaded comments in my blog...It's really meaningful. Hopefully you'll never mind to help again and again...hehehe

February 18, 2012 at 3:26 AM

why i can't use it
please help me

February 18, 2012 at 11:21 AM

@Sofyan SyWhat's the problem. be specific.

February 18, 2012 at 11:22 AM

@Ririe KhayanYou welcome. When you have any problems I am here to help

February 25, 2012 at 5:41 AM

Great tutorial! thank you!

February 28, 2012 at 2:59 PM

nice tutorial.

March 9, 2012 at 7:41 AM

Assalamualaikum Bismillah Alhamdulillah | Brother i use tooggle comment form. I have tried this tutorial three times but i always fault. Can you help me to solve this problem...? | Alhamdulillah Wassalamualaikum.

March 9, 2012 at 10:00 AM

@The 7BloggersSend me the template and I'll try to help.

March 10, 2012 at 11:39 AM

@ArtisTutorAssalamualaikum Bismillah Alhamdulillah | I have send my template, please help me | Alhamdulillah Wassalamualaikum

March 10, 2012 at 5:21 PM

@The 7BloggersFixed and sent back to you.

March 11, 2012 at 12:48 AM

@ArtisTutorAssalamualaikum Bismillah Alhamdulillah | And now, how i can change the avatar image container for the blog author...?

March 12, 2012 at 11:28 AM

@The 7BloggersChange to what?

March 12, 2012 at 2:16 PM

@ArtisTutorAssalamualaikum Bismillah Alhamdulillah | Sorry, i have fixed my problem, if you want you can look the result on my blog. Now i have modified the style of the thread comment. I give thanks to My God because i have friend, like you who very very kind. Thanks Artisteer... | Alhamdulillah Wassalamualaikum.

March 12, 2012 at 3:30 PM

@The7BloggersI.
I'm glad I could help you. Cheers.

March 18, 2012 at 5:13 PM

Nice sharing,.. Helpful.. Regards

March 19, 2012 at 6:41 AM

Don't work in my blog. Please,check it..

March 23, 2012 at 4:47 PM

It's not work on my blog. Please help me....

March 24, 2012 at 6:04 PM

@Belajar CorelDRAWMake sure you follow all the steps from the tutorial and it will work

March 24, 2012 at 6:04 PM

@Media CopypasteFollow the steps exactly and it will work.

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers