Threaded comments with different author color comments (updated)


Because I received many request from my  blog visitors I decided to finally post the code for the highlighted admin/author comments.
Why this change is necessary? Well because the your comments will be different from the other comments making them easier to spot.
The code is almost the same like in the previous tutorial but with some changes for the author comments.

How to make highlighted author threaded comments on blogger?

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

2. Click on "Expand Widget Templates"

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

/*----------------------------------------------------
          {--------}  Comment {--------}
----------------------------------------------------*/
#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}

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

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

.cm_avatar {
margin: 0;
vertical-align: middle;
outline: 1px solid #fff;
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_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
background:#c6e5f7;
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 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_entry_a {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
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;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}


.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;

}
.cm_name_a {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;

}

.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;

}
.cm_date_a {
font-family:"Francois One";
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;

}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color:  #dff0fa;
font-size: 13px;
color: #333;
word-wrap:break-word;
}

.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;
 }

The blue lines of code are the code for the different admin color, so you can play with them to change the admin/author comment appearance.

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 class='cm_pagenavi' id='cm_page'/>
        
        <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'/> 

<b:if cond='data:comment.author == data:post.author'>
                               <div class='cm_head'>
                                <div class='cm_avatar_a'>
                                    <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=__BlogID__&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>
<b:else/>

                            <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=__BlogID__&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>
</b:if>

<b:if cond='data:comment.author == data:post.author'>
                                <div class='cm_entry_a'>
                                <span class='cm_arrow'/>
                                <div class='cm_info_a'>
                                    <div class='cm_name_a'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                       <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <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>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/> 
                                            </b:if>                                   
                                </div>  
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if> 
                            </div>
                        

<b:else/>

                            <div class='cm_entry'>
                                <span class='cm_arrow'/>
                                <div class='cm_info'>
                                    <div class='cm_name'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                      <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <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>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/> 
                                            </b:if>                                   
                                </div>  
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if> 
                            </div>
</b:if>
                        </div>
                    </div>
                </b:if>              
     </b:loop>
        </div>

        <div class='cm_pagenavi' id='cm_page_copy'/>

    <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 __BlogID__ 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 4 places):

          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </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

Get Latest Updates For Free!

Subscribe via Email

192 comments

January 8, 2012 at 4:10 PM

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

John Tester
January 8, 2012 at 4:11 PM

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.

January 8, 2012 at 4:11 PM

@John Tester- 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.

January 8, 2012 at 5:02 PM

thank you very much

January 8, 2012 at 7:16 PM

It doesn'st work? See: http://richndfame.blogspot.com/2011/12/silvester-ootd-davy.html?showComment=1326042628063#c1545245787056227398

January 8, 2012 at 7:40 PM

@MichaelTurnerTVDelete all the previous comments changes you made on your template and then repeat all the steps in this tutorial.

January 8, 2012 at 7:50 PM

@ArtisTutor already done that. Stil not work

January 8, 2012 at 7:58 PM

@MichaelTurnerTVSend me the template.

artistutorials@gmail.com

January 8, 2012 at 8:02 PM

@ArtisTutor i sent it

January 8, 2012 at 8:11 PM

@MichaelTurnerTV Have u found the bug?

January 8, 2012 at 8:19 PM

It's work at my blog. Thank's for Admin. It's very nice...

January 8, 2012 at 8:44 PM

@MichaelTurnerTVi guess not?

January 8, 2012 at 8:51 PM

@MichaelTurnerTVI uploaded the template on a test blog and it works just fine, You can see here:

http://arttests.blogspot.com/2011/10/test.html

January 8, 2012 at 11:08 PM

Hi, thank you so much for this tutorial!

I had no problems including the codes at first, but there seems to be some kind of bug as the new admin comments won't be highlighted. We are blogging with three people and it is only highlighting the comments of one admin (not mine).
My older comments are highlighted but not the ones I wrote after I included the new code.
Do you have any tips for me?

Thanks so much in advance

January 8, 2012 at 11:38 PM

@SukiThe situation is like this: because you are 3 authors the highlighted comments will appear on the comments made by the post author.
Example:

If you, Suki wrote the post then your comments will be highlighted, if Belle wrote the post her comments are highlighted and if Trace posted then her comments appear with different color.

January 9, 2012 at 12:05 AM

@ArtisTutor ah I see! I thought there was another problem, thanks so much, this was so helpful!

January 9, 2012 at 1:42 PM

I've done it but i use what beben-koben give me ... http://beben-koben.blogspot.com/2011/09/komentar-berbeda-untuk-threaded.html

But ... i want to try with your way :)

i hope this will work !!!!

January 9, 2012 at 2:32 PM

@Aksatriya Diwangkara NusantaraWith my way you have more control on customizing the author comments appearance.

January 9, 2012 at 3:27 PM

yeahh thanks master for sharing this eheh

January 9, 2012 at 5:10 PM

thank you generous admin ....

January 9, 2012 at 5:41 PM

man it didn't work on my template .. yeah it worked .. it appeared .. and and it disapeared ... the comment disapeared ... there was no comment text in my blog ... just sum of comment appeared .. the text comment wasn't ...

i have deleted all css comment .. ...

January 9, 2012 at 5:48 PM

Hi ArtisTutor,
sorry for bothering you again but I wonder If you have any ideas how to number the comments, too? This would help us alot as we sometimes host some giveaways and we are using random.org to find a winner.
Thanks, Suki

January 9, 2012 at 6:25 PM

@SukiSend me the template and I'll do it for you.

artistutorials@gmail.com

January 9, 2012 at 6:43 PM

@Aksatriya Diwangkara NusantaraSend me the template

January 10, 2012 at 2:02 AM

Hey ArtisTutor
i tried this tutorial on my old blog and it worked fine, but on my main blog it doesn't work. If you want to leave a reply it says "Not Found Error 404".
Can you please help me? I have no idea how to fix that :(

January 10, 2012 at 7:48 AM

the popup window of reply button didn't work ...

could you fix it ?

January 10, 2012 at 8:35 AM

sorry, why the avatar doesn't appear in my blog

January 10, 2012 at 10:26 AM

@AriezIf you read the tutorial you will know why.

IMPORTANT: Make sure you delete all the old comments CSS so only the CSS in this tutorial remains. Making this prevents errors on the avatar image aligning.

January 10, 2012 at 10:28 AM

@FireflyBeautyIMPORTANT: Replace the __BlogID__ with the your own BlogID number.

January 10, 2012 at 10:30 AM

@Aksatriya Diwangkara NusantaraCheck the blogID to be the correct one.

January 10, 2012 at 12:29 PM

@ArtisTutorYeah ... you was right my man ... thx a lot :)

January 10, 2012 at 11:54 PM

@ArtisTutor

Thanks, it works :)

January 11, 2012 at 12:07 AM

Could you please explain how i can replace "Reply" with the similar german word? I found some parts where it could be but I'm not sure. Same thing with "x comments" on the top of all the comments.
Sorry for giving you a hard time with me and my questions :)

January 11, 2012 at 12:32 AM

@FireflyBeautyFor changing the reply word find in the code on step 5 the word: "Reply".

For changing the x... comments find this line:

<span id='cm_total'><data:post.numComments/></span> comments

and change the "comments" word after </span>

January 11, 2012 at 9:53 AM

@ArtisTutorproblem solved, I just add this code after <head>

<b:include data='blog' name='all-head-content'/>

January 12, 2012 at 3:09 AM

oh no! blogger now supports threaded comments, too and the code we used to change our comments isn't working anymore :( do you have any ideas how to make the code work again? We liked the look of the threaded and highlighted comments much better, maybe you can help? Thank you very much

January 12, 2012 at 11:06 AM

@ArtisTutorI have the same problem in my German blog.. *dislike* :(( Hope, you can help us and find a solution!!

January 12, 2012 at 5:39 PM

@SukiThe problem has a solution. See the step 6 of the tutorial.

January 12, 2012 at 5:41 PM

@NicaThe problem has a solution. See the step 6 of the tutorial.

January 12, 2012 at 5:56 PM

@ArtisTutorIt's working again, you are THE KING! :D
The commenting box is showing under each post now without clicking on it, do you have an idea to solve this problem, too?
Sorry for bothering you again and again, thanks so much in advance

January 12, 2012 at 6:38 PM

@ArtisTutorI have replaced it two times, and the design is correct again now.. but i am not able to replay. It says "Wir konnten Ihre Anforderung leider nicht bearbeiten."
Means something like: we are not able to do what you want. ?!!?!?

January 12, 2012 at 6:55 PM

@SukiMy bad, I forgot to change the color of what to be replaced :). See now the step 6.

January 12, 2012 at 7:00 PM

@NicaDid you change the BlogID with your own?

January 12, 2012 at 7:20 PM

@ArtisTutorthanks again. YAAYYY

January 12, 2012 at 11:11 PM

Lovely, just fabulous! So much better to what Blogger tries to provide really! :)

Would you mind posting the snippet of code to number the comments? I think I can include it myself if I just knew where to put it!
Would be quite awesome.

January 12, 2012 at 11:58 PM

It doesnt work i got the error: The element type "div" must be terminated by the matching end-tag "".

I did it 3 times and uploaded the backup everytime before i change the codes :(.

January 13, 2012 at 12:25 AM

@GodfrinaI'll post tomorrow a tutorial about it.

January 13, 2012 at 12:25 AM

@IsabelSend me the template in a .xml format and I will do it for you.

January 13, 2012 at 12:31 AM

@ArtisTutorOh that is sweet! Thanks a bunch :D

I hope you don't get too much spam and/or silly questions due to my linking to your fab tutorials haha ;)

January 13, 2012 at 2:43 AM

It works!!
Once again, you are really amazing!!
-specially for the step 6
thanks for your beautiful tutorial, well done :)

January 13, 2012 at 10:47 AM

Unfortunately it did not work on my blog. Somehow the design does not want to change :(

January 13, 2012 at 11:21 AM

@RoxyDid you make the step 6. You must replace the red lines in all 4 places you will find.
If it still not working send me the template.

January 13, 2012 at 11:26 AM

@ArtisTutorThat would be very nice :D
hows your emailaddress?

January 13, 2012 at 12:01 PM

@Isabelartistutorials@gmail.com

January 13, 2012 at 1:05 PM

@ArtisTutor you have got a mail :)

January 13, 2012 at 3:25 PM

@ArtisTutorIt worked! I could find the mistake that I made.. ;)

January 13, 2012 at 9:04 PM

Hi, i already try your tutor. But why the gravatar not appear.? Including my gravatar.

January 13, 2012 at 9:56 PM

@M'Rie R'NieMPORTANT: Make sure you delete all the old comments CSS from previous comments so only the CSS in this tutorial remains. Making this prevents errors on the avatar image aligning.

January 13, 2012 at 11:20 PM

thanks. i success make this tutorial.

January 14, 2012 at 10:35 AM

Finally, my problem with Thesis for Blogspot template are solve. Actually i should not delete all my old CSS comment on my template. only a few line CSS code only that i need to delete.

By the way. I love very much your tutor. and I also like your blog too.

January 14, 2012 at 10:30 PM

Thank you very much for your help my friend :)

January 17, 2012 at 7:27 PM

@Isabel

I have the same problem... :(

January 17, 2012 at 10:16 PM

@GreatdeeDid you make the changes from the 6 step of the tutorial?

January 18, 2012 at 1:19 AM

@ArtisTutor

Yes I did, but the problem is still there :(
I sent you an email today, will you help me please?

January 18, 2012 at 11:54 AM

I'm confused. Please visit my blog and tell me what should I do. thanks.

January 18, 2012 at 1:10 PM

@TMagYou need to read and follow the steps from the tutorial.

January 19, 2012 at 8:34 AM

Admin:
There IS Some Error On my commment
Check This Out !
http://tvm84l.blogspot.com/2012/01/lorem-ipsum.html

image on reply comment is not loacated correcly
please help me !

January 19, 2012 at 10:43 AM

@Syndicate OSDelete the old CSS for the comments and leave only the one in the tutorial.

January 21, 2012 at 5:33 PM

Done! it's works in my blog. Thanks for sharing the tutorial. Keep the good work and keep blogging! :)

January 31, 2012 at 8:48 AM

thanks for your share

January 31, 2012 at 8:52 AM

thanks.. ;)

February 2, 2012 at 3:48 PM

hi, thanks for the tutorial. it's realy work. :)
but, may i change the font size? how the way? need ur help.

February 3, 2012 at 9:19 PM

If I want to reply I got a new window with this: Not Found

Error 404

What's wrong?

Mia Winter
February 5, 2012 at 2:10 PM

Hey, can you explain, how to delete the old CSS? I have forgotten it and just implemented the code. Now I read, that I have to delete them to have my old Avatar.

How does the old CSS code look like?

Ayane
February 5, 2012 at 8:50 PM

Hey, how does the old comment CSS look like`? I forgot to delete it, and don'T know, where to find it or what to delete.

Need your help.

February 6, 2012 at 1:43 PM

@Mia Winter The code will be something like this:

.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;
}

February 6, 2012 at 1:44 PM

@Ayanethe code will be something like this:

.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;
}

February 6, 2012 at 1:46 PM

@FaralaliaIMPORTANT: Replace the __BlogID__ with the your own BlogID number.

Mia Winter
February 6, 2012 at 2:30 PM

@ArtisTutor I did it and I only found this Code: .avatar-image-container {
margin: .2em 0 0;
}

If I delete it, nothing happen. I don't know, what to do anymore.

And thanks for helping.

February 6, 2012 at 3:09 PM

@Mia WinterPost a link to your blog to see what's the problem.

Mia Winter
February 6, 2012 at 3:54 PM

@ArtisTutor
http://fluffymai.blogspot.com/2012/01/probleme-der-kommentarfunktion-gelost.html#comment-form

February 7, 2012 at 1:46 PM

@Mia WinterI don't see the tutorial implemented on your blog.

Mia Winter
February 7, 2012 at 5:56 PM

@ArtisTutor Hm. I did. But don't know, why it's gone. Sorry.
I followed the Steps of the Tutorial again. But nothing's happend.

February 7, 2012 at 6:23 PM

@Mia WinterSend me your template.

February 8, 2012 at 12:09 AM

@ArtisTutor

I have deleted the whole part with the ID and nothing changed?

It works to reply with my own comments but I can't reply comments form others??

February 8, 2012 at 12:32 AM

@ArtisTutor

Ahhh I have found it and fixed it, it works now thank you :)

February 9, 2012 at 2:22 AM

i like this post...

February 11, 2012 at 10:57 AM

thank you, I've managed to make it
if you are willing to explain to me

how to make admin icon beside the name of admin as your comments box ?

Help me Please...

February 13, 2012 at 10:14 PM

Hello! I tried the threaded comments tutorial on my blog and it worked. Now I would like to have also the autor color comments, but I don't know how to delete all the previous comments changes I made on my template. Could you please help me? I just want to have color auto comments and that the answers doesn't have to be written in a separated window. Thanks!

February 14, 2012 at 8:16 PM

@SuMoGuRead the tutorial with attention and you will be able to make the author highlighted comments.

February 16, 2012 at 5:00 PM

@ArtisTutor I just added the blue code to my code but it doesn't change anything :/

February 16, 2012 at 5:31 PM

@SuMoGuMake all the steps in the tutorial not only adding the blue code.

February 16, 2012 at 7:00 PM

@ArtisTutorOh ok. And it doesn't matter that I already add similar codes with the old tutorial? Sorry, I'm not very good with these things. Thanks!

February 16, 2012 at 7:53 PM

@SuMoGuYou have to replace the code from the previous tutorial with the code from this one.

February 16, 2012 at 8:45 PM

@ArtisTutorI just 'did it' and now alls comments are like together. I think I just made it worse :(

February 16, 2012 at 8:48 PM

mine do not appear threaded, can you have a look?

colormehazeleyes.blogspot.com

February 17, 2012 at 10:52 AM

@SuMoGuSend me a backup of your template in .xml format.

February 17, 2012 at 11:24 AM

@hazeleyesDid you make any reply to your comments?

February 17, 2012 at 12:17 PM

ahhh ok it seems i didnt klick on reply, just left a normal message. thanks!

February 17, 2012 at 10:07 PM

@ArtisTutorDone, thanks!

February 18, 2012 at 8:09 PM

@ArtisTutorThank you very much! It works even better! :)

February 18, 2012 at 8:17 PM

@SuMoGuYou welcome but you forgot to replace __BlogID__ with your blogid for the reply to work.

February 18, 2012 at 8:28 PM

@ArtisTutorOh!! Thanks for the info!

February 18, 2012 at 11:33 PM

Hi, i dont know if my last post appeared... I tried your tutorial and now all my comments dont show up anymore, there is only the number of existing comments written, but you cannot read them. i think i`ve done something badly wrong. may you have a look at it?

colormehazeleyes.blogspot.com

February 19, 2012 at 12:03 AM

@hazeleyesSend me a backup of your template in .xml format.

February 19, 2012 at 12:28 PM

ArtisTutor i have a problem about admin picture. if admin comment the picture shown anonymous picture.. how to fix it???
thanks

February 20, 2012 at 11:29 PM

sent you the backup yesterday, did you receive it?

February 21, 2012 at 3:09 PM

XML: The element type "b:includable" must be terminated by the matching end-tag "

After I paste the section in step 5....what should I do?

February 21, 2012 at 7:49 PM

why are there no more new tutorials? :(

February 21, 2012 at 8:04 PM

@hazeleyesFixed and sent back to you

February 21, 2012 at 8:06 PM

@Mona Zmake sure you replace only what is between this code:

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

lots of code lines that you must replace

</b:includable>

February 21, 2012 at 8:08 PM

@MichaelTurnerTVI am a little busy working to a new template for my blog and that's why I don't post new tutorials.
After the template will be finish I will post again.

February 21, 2012 at 11:57 PM

@ArtisTutor
thank you sooo much, it works again!!!

February 22, 2012 at 5:55 AM

cool :)

February 22, 2012 at 10:17 AM

Huh... I still can't see the crazy wavy effect on the comments list and the reply comments like on your blog. Whether this problem can be solved?
I think I have a script conflict. The inline style that is created by javascript does not appear when I inspect the element. But on your .cm_entry, it shows width:80%

Thank's.

February 22, 2012 at 11:04 AM

@Taufik NurrohmanI can't see the javascript code from step 4 in your template.
Add the code and it will work.

February 22, 2012 at 6:37 PM

@ArtisTutor: It's funny. I've upload it here: http://hompimpa.googlecode.com/files/thread-comm.js because if not, my syntax highlighter does not work.

I don't believe if removing this line could destroy my world:

<!-- -->

Now it's worked :)

March 3, 2012 at 12:08 PM

It's work in my blog, thanks !

March 7, 2012 at 7:10 PM

Threaded replies not worked on my template

Anonymous
March 7, 2012 at 8:12 PM

I am not getting threaded replies like as in your template. I think your javascript not work

March 7, 2012 at 9:15 PM

@sonuI visited your blog and it seems it working just fine.

March 7, 2012 at 9:15 PM

@AnonymousYou must be doing something wrong. Try again with more attention.

March 8, 2012 at 1:32 AM

@MarieI don't see in your template HTML, the codes from the tutorial.
Probably you reset your template so make the tutorial again.

March 12, 2012 at 9:53 AM

the script run wel, but I have problem, how to make different colour of the admin box? thanks for your answer.

March 12, 2012 at 11:27 AM

@Muro'i El-BarezyFollow all the steps in the tutorial and it should work.

March 21, 2012 at 5:19 PM

weleh2 its so cool bang kapuk hehe wkwkw

March 23, 2012 at 10:15 PM

@ArtisTutor
Is it true that after commenting, the text does not directly appear in the box, but it will after we refresh the page?

March 23, 2012 at 10:56 PM

How to make the comment box like this one? In mine, the script is only working when I set the comment setting into "pop-up". Is there any way to use the script in "embedded" setting instead of pop up?Thanks

March 24, 2012 at 4:56 PM

how to remove old comment, I have 2 blog comment box,

http://www.zondim.com/2012/03/kesalahan-flag-counter-di-zondim.html#comment-form

March 24, 2012 at 5:59 PM

@debbie irlando manurung I see only one comment form on your blog

March 24, 2012 at 6:00 PM

@awin wijayaSet the comments to embedded. It should work.

March 24, 2012 at 6:01 PM

@JavanesselinguistYes, you must refresh the page for the comment to appear.

March 27, 2012 at 8:44 PM

Hi Bro, I did it.. but everytime i try to reply to visitors comments i always get the "404 error". [only if i reply to my own comment it works properly] pls help.

and how to resize the avatar pic? I tried change 35px to 50px twice, but it's not good.

March 27, 2012 at 11:42 PM

@MUXLIMO@MUXLIMO

1. Make sure you replace the __BlogID__ with your blog id.

2. Replace the

.cm_avatar {
...
}
.cm_avatar_a {
...
}

with:


.comments .avatar-image-container {
background: url(http://img254.imageshack.us/img254/1986/anonymousavatar.gif) no-repeat center ;
margin:0px 0px 3px;
vertical-align:middle;
border: 1px solid #ddd;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding:4px;
width:45px !important;height:45px !important;
max-width:100%;max-height:100%;
float:none;

}
.comments .avatar-image-container img {
width:45px !important;
height:45px !important;
max-width:100%;
max-height:100%;
overflow:visible;
float:none;
}

March 28, 2012 at 1:54 PM

@ArtisTutor
1. I did surely replace it with my _blogID_ Bro.. but might something error in my template.. i will try it again. :)

2. Thank You very much for the CSS avatar resizer here. Good Day, Bro :)

March 28, 2012 at 4:32 PM

@ArtisTutor

ah.. i did it! Yeah, I just realized that we must put the __BLOGID__ twice. [I think You forget telling people to do it twice, Bro.]

Btw, another problem here.. the threaded comment on my blog is as perfect as You taught. But.. then my emoticons dont work anymore.. is there any way to fix it??

{For now, i set my template to the original non threaded comment. Waiting for Your reply here, Bro. Thanks in advance, GBU. :) }

March 28, 2012 at 6:43 PM

@MUXLIMOYour emoticons probably don't work because when you replace the code from the step5 of the tutorial , you delete also the code for the emoticons.

Add again the emoticons code to your template and it should work.

March 29, 2012 at 8:01 AM

@ArtisTutor

Thanks for Your attention, Bro :)
Yeah, i did re-edit my blog. First, i set it to default, then put the threaded comment from this tutorial. The last is put back my emoticons. But stil doent work.. :(

Might be caused by my emoticons size? (its 30px sized) but the comment area should have no trouble by it yea..

*I stil try to make it threaded with emoticons.. for now, i set the comment box default while i think hard to fix it. THanks Bro.. I will keep in touch :)

March 29, 2012 at 1:17 PM

Owh its not work to my template :( can u fix my template? I've send you an email include my template, please fix for me

March 29, 2012 at 8:06 PM

@anwar sofi'iread the tutorial, follow all the steps corectly and it will work.

April 1, 2012 at 4:20 AM

thank so much, I've been able to make.

April 6, 2012 at 11:50 PM

Hello, I put the code on the page, everything works. However, I question whether it is what any possibility that the response was below the comment, not a pop-up? My blog: idaalia.blogspot.com

April 24, 2012 at 8:53 AM

thanks :)

April 26, 2012 at 2:35 AM

how to add "Click to Add a New Comment" like yours?

May 17, 2012 at 9:35 AM

hi Artis tutorial I need your help, how to make reply in threaded comment work ?

May 17, 2012 at 9:50 AM

@AgustI don't see the code from step 4 in your template. make sure you add it for the reply to work.

May 22, 2012 at 4:44 PM

@ArtisTutor thank now reply in my threaded comment work. but i have some problem with avatar image, my avatar doesn't work how fix it ? you can see in http://1slamic-7cy8er.blogspot.com

Anonymous
June 1, 2012 at 6:27 AM

@ArtisTutor thanks you

June 8, 2012 at 8:01 AM

why mine doesn't look like yours? mine doesn't fit, i mean the height is same, all of comment for example comment in this post, http://antusia.blogspot.com/2012/05/raid-redemption-2012-720p-hdrip-800mb.html..
please help me, you can replay here or in my email. antusiaproject[AT]gmail.com

Anonymous
June 8, 2012 at 1:49 PM

@ArtisTutor thx

June 9, 2012 at 12:46 AM

I tried asking before but I don't see my question here, so I'm going to try again.

This awesome code (bows down to ArtisTutor) is working beautifully on the main page of my group blog, but on the additional static pages, we get an error in the popup menu from blogger, so we can't directly reply to a specific person's post. Can this be fixed?

Please help. :D

June 22, 2012 at 9:19 AM

@Ariez Thanks brow, my problem is solved because of you.

June 24, 2012 at 2:16 PM

heey it's work thanks......^__^

June 25, 2012 at 9:47 AM

It's work at my blog. Thank's for Admin. It's very nice.. (y)

July 6, 2012 at 5:26 PM

Brother how to make the form comment not popup? I mean when i push reply so the form come directly under the comment. Contact me brother :)

July 7, 2012 at 6:12 PM

How to add a emoticon in this threaded comment..?

July 18, 2012 at 11:54 AM

thank's the way it works in my blog...

August 18, 2012 at 11:24 AM

why your box avatar is bigger than mine ??? how to custumize it ???
and how to cumtumize space beetween entry comment box and name box, yours is less space than mine check mine please ... :) www.3nura.blogspot.com

August 31, 2012 at 1:02 PM

@Aksatriya Diwangkara NusantaraBecause I'we played with the CSS modifying some values to have a distinct style than others.

October 24, 2012 at 5:09 AM

thx , fried 4info, nice 2m U :D

November 12, 2012 at 8:04 PM

didnt work on my blog. i thought i have followed your instruction, but when i saved the template it didnt make it. it's written "The widget with id "Blog1" cannot contain element: "div". A widget can only contain b:includable elements".
can you help me soon?

November 12, 2012 at 8:08 PM

@Dewi Retno WatiMake sure you follow the step 5 with attention.

November 12, 2012 at 8:20 PM

of course im sure. i have tried it twice. is this a new case you have never found ??

November 12, 2012 at 10:38 PM

@Dewi Retno WatiSend me your template

November 23, 2012 at 2:07 PM

@AnonymousYeas

December 17, 2012 at 5:01 PM

good blogs thank you comment really

December 21, 2012 at 9:07 AM

GREAT POST! I like this.. :) THANKS YOU!

January 2, 2013 at 6:45 AM

thank...it's wonderfull

January 20, 2013 at 3:51 PM

Awasome color, nice work. I'm using now. Thank you friend!

January 26, 2013 at 5:08 AM

Thanks for sharing.
Really love this post.

Best Regards,

Iqbal Parabi

February 2, 2013 at 3:20 PM

nice info..
thanks u....

February 5, 2013 at 5:47 PM

thank you very much !

February 6, 2013 at 11:50 AM

With this code i fix the problem... Thanxxxxx..

February 11, 2013 at 12:55 AM

Thank you i like......

February 11, 2013 at 4:30 PM

awsome article, i like this post. It's very usefull fo blogger like me. Thank's to share.

February 14, 2013 at 11:53 AM

hai..

i im very tired , i take a long time and many to try, but this tutorial still fail.

i already follow step by step this tutorial, but this tutorial still cannot not working for my blog, help me plez......

February 14, 2013 at 6:37 PM

@Syira Qahira What doesn't work for you? Can you add a link to your blog?

February 19, 2013 at 11:49 AM

Thank you i like

February 19, 2013 at 6:46 PM

Thank you, nice I like it..

February 21, 2013 at 1:05 PM

thank.... i find this article...

March 1, 2013 at 3:10 PM

Lowongan Kerja : wow..like this post, very nice comment layout

March 27, 2013 at 8:28 AM

good job artistttor, congratulations :)

April 2, 2013 at 5:21 PM

The pop up thing is slightly annoying especially for those who have pop ups disabled?!?!?! I really am fond of this, but please, explain how we can add reply WITHOUT the pop up going on???

April 3, 2013 at 3:46 PM

@SarahCheck the new tutorial:

http://artistutorial.blogspot.ro/2013/04/threaded-comments-for-blogger-comment.html

April 3, 2013 at 8:25 PM

How do you edit the HTML of the comments?, i edited all the HTML below this code , but it's not changing anything, even i deleted all code on , it's not changes anything!, how do you edit the HTML or XHTML of the comment?

April 3, 2013 at 11:50 PM

@Damar Zaky I don't understand what you want to edit.

April 12, 2013 at 10:13 AM

Hallo, i do all steps and it doesn't work. Can i send you my template. Maybe you find my mistake. With my old templates i never had this problem. I do your five steps and then it works, but with this template i have really problems.

April 12, 2013 at 10:48 AM

@Sarah Fuhrmeister You can try the new version http://artistutorial.blogspot.ro/2013/04/threaded-comments-for-blogger-comment.html and if you have the same problem send me the template.

April 25, 2013 at 5:32 PM

nice tips and code, temporary i dont use this code but who knows if next i need it, so i will bookmark this page. Thx

July 6, 2013 at 9:25 AM

I want to Delete Pop Up at Reply button , but I don't know to Delete it ??
Can you help me ??

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