Threaded comments with different author color comments (updated)
Sunday, January 08, 2012 | 
Posted by
ArtisTutor
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 HTML2. 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3mn0AZQZKFUrJQ-HMWxjXfyH3qup4Fg_yIEBhyphenhyphenkIlR5IPdsqSQTagRF4CzwWENdR-WlXyFw8zN7QpWHvzt8L_br8ZyFaytdgZ45xM2VZP3QY19UQtAjNxe3prAmL2ug6StnIf0Y34Ydk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUxHCCGRl9koUENB_cmKzykNX-tQBDhihWeSgJOPKa8Ieid4c72QEi6SQXbz3usN6DNA_1iTVMdyf1w6EF8bzQJlbZulaWVJ_KtC53dyiY3vwmtyrojiYIKyi5HfNqqYra4PkPQfDBoA/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:
<script type="text/javascript"><!--
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<_0x4f09x2?_0x7bf4[4]:_0x4f09x5(parseInt(_0x4f09x3/_0x4f09x2)))+((_0x4f09x3=_0x4f09x3%_0x4f09x2)>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,{}));
--></script>
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 > 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='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); 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='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); 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:
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
190 comments
- 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're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
@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.
It doesn'st work? See: http://richndfame.blogspot.com/2011/12/silvester-ootd-davy.html?showComment=1326042628063#c1545245787056227398
@MichaelTurnerTVDelete all the previous comments changes you made on your template and then repeat all the steps in this tutorial.
@ArtisTutor already done that. Stil not work
@MichaelTurnerTVSend me the template.
artistutorials@gmail.com
@ArtisTutor i sent it
@MichaelTurnerTV Have u found the bug?
It's work at my blog. Thank's for Admin. It's very nice...
@MichaelTurnerTVi guess not?
@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
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
@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.
@ArtisTutor ah I see! I thought there was another problem, thanks so much, this was so helpful!
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 !!!!
@Aksatriya Diwangkara NusantaraWith my way you have more control on customizing the author comments appearance.
yeahh thanks master for sharing this eheh
thank you generous admin ....
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 .. ...
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
@SukiSend me the template and I'll do it for you.
artistutorials@gmail.com
@Aksatriya Diwangkara NusantaraSend me the template
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 :(
the popup window of reply button didn't work ...
could you fix it ?
sorry, why the avatar doesn't appear in my blog
@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.
@FireflyBeautyIMPORTANT: Replace the __BlogID__ with the your own BlogID number.
@Aksatriya Diwangkara NusantaraCheck the blogID to be the correct one.
@ArtisTutorYeah ... you was right my man ... thx a lot :)
@ArtisTutor
Thanks, it works :)
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 :)
@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>
@ArtisTutorproblem solved, I just add this code after <head>
<b:include data='blog' name='all-head-content'/>
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
@ArtisTutorI have the same problem in my German blog.. *dislike* :(( Hope, you can help us and find a solution!!
@SukiThe problem has a solution. See the step 6 of the tutorial.
@NicaThe problem has a solution. See the step 6 of the tutorial.
@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
@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. ?!!?!?
@SukiMy bad, I forgot to change the color of what to be replaced :). See now the step 6.
@NicaDid you change the BlogID with your own?
@ArtisTutorthanks again. YAAYYY
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.
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 :(.
@GodfrinaI'll post tomorrow a tutorial about it.
@IsabelSend me the template in a .xml format and I will do it for you.
@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 ;)
It works!!
Once again, you are really amazing!!
-specially for the step 6
thanks for your beautiful tutorial, well done :)
Unfortunately it did not work on my blog. Somehow the design does not want to change :(
@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.
@ArtisTutorThat would be very nice :D
hows your emailaddress?
@Isabelartistutorials@gmail.com
@ArtisTutor you have got a mail :)
@ArtisTutorIt worked! I could find the mistake that I made.. ;)
Hi, i already try your tutor. But why the gravatar not appear.? Including my gravatar.
@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.
thanks. i success make this tutorial.
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.
Thank you very much for your help my friend :)
@Isabel
I have the same problem... :(
@GreatdeeDid you make the changes from the 6 step of the tutorial?
@ArtisTutor
Yes I did, but the problem is still there :(
I sent you an email today, will you help me please?
I'm confused. Please visit my blog and tell me what should I do. thanks.
@TMagYou need to read and follow the steps from the tutorial.
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 !
@Syndicate OSDelete the old CSS for the comments and leave only the one in the tutorial.
Done! it's works in my blog. Thanks for sharing the tutorial. Keep the good work and keep blogging! :)
thanks for your share
thanks.. ;)
hi, thanks for the tutorial. it's realy work. :)
but, may i change the font size? how the way? need ur help.
If I want to reply I got a new window with this: Not Found
Error 404
What's wrong?
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?
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.
@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;
}
@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;
}
@FaralaliaIMPORTANT: Replace the __BlogID__ with the your own BlogID number.
@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.
@Mia WinterPost a link to your blog to see what's the problem.
@ArtisTutor
http://fluffymai.blogspot.com/2012/01/probleme-der-kommentarfunktion-gelost.html#comment-form
@Mia WinterI don't see the tutorial implemented on your blog.
@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.
@Mia WinterSend me your template.
@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??
@ArtisTutor
Ahhh I have found it and fixed it, it works now thank you :)
i like this post...
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...
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!
@SuMoGuRead the tutorial with attention and you will be able to make the author highlighted comments.
@ArtisTutor I just added the blue code to my code but it doesn't change anything :/
@SuMoGuMake all the steps in the tutorial not only adding the blue code.
@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!
@SuMoGuYou have to replace the code from the previous tutorial with the code from this one.
@ArtisTutorI just 'did it' and now alls comments are like together. I think I just made it worse :(
mine do not appear threaded, can you have a look?
colormehazeleyes.blogspot.com
@SuMoGuSend me a backup of your template in .xml format.
@hazeleyesDid you make any reply to your comments?
ahhh ok it seems i didnt klick on reply, just left a normal message. thanks!
@ArtisTutorDone, thanks!
@ArtisTutorThank you very much! It works even better! :)
@SuMoGuYou welcome but you forgot to replace __BlogID__ with your blogid for the reply to work.
@ArtisTutorOh!! Thanks for the info!
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
@hazeleyesSend me a backup of your template in .xml format.
ArtisTutor i have a problem about admin picture. if admin comment the picture shown anonymous picture.. how to fix it???
thanks
sent you the backup yesterday, did you receive it?
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?
why are there no more new tutorials? :(
@hazeleyesFixed and sent back to you
@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>
@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.
@ArtisTutor
thank you sooo much, it works again!!!
cool :)
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.
@Taufik NurrohmanI can't see the javascript code from step 4 in your template.
Add the code and it will work.
@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 :)
It's work in my blog, thanks !
Threaded replies not worked on my template
I am not getting threaded replies like as in your template. I think your javascript not work
@sonuI visited your blog and it seems it working just fine.
@AnonymousYou must be doing something wrong. Try again with more attention.
@MarieI don't see in your template HTML, the codes from the tutorial.
Probably you reset your template so make the tutorial again.
the script run wel, but I have problem, how to make different colour of the admin box? thanks for your answer.
@Muro'i El-BarezyFollow all the steps in the tutorial and it should work.
weleh2 its so cool bang kapuk hehe wkwkw
@ArtisTutor
Is it true that after commenting, the text does not directly appear in the box, but it will after we refresh the page?
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
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
@debbie irlando manurung I see only one comment form on your blog
@awin wijayaSet the comments to embedded. It should work.
@JavanesselinguistYes, you must refresh the page for the comment to appear.
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.
@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;
}
@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 :)
@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. :) }
@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.
@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 :)
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
@anwar sofi'iread the tutorial, follow all the steps corectly and it will work.
thank so much, I've been able to make.
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
how to add "Click to Add a New Comment" like yours?
hi Artis tutorial I need your help, how to make reply in threaded comment work ?
@AgustI don't see the code from step 4 in your template. make sure you add it for the reply to work.
@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
@ArtisTutor thanks you
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
@ArtisTutor thx
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
@Ariez Thanks brow, my problem is solved because of you.
heey it's work thanks......^__^
It's work at my blog. Thank's for Admin. It's very nice.. (y)
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 :)
How to add a emoticon in this threaded comment..?
thank's the way it works in my blog...
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
@Aksatriya Diwangkara NusantaraBecause I'we played with the CSS modifying some values to have a distinct style than others.
thx , fried 4info, nice 2m U :D
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?
@Dewi Retno WatiMake sure you follow the step 5 with attention.
of course im sure. i have tried it twice. is this a new case you have never found ??
@Dewi Retno WatiSend me your template
@AnonymousYeas
good blogs thank you comment really
GREAT POST! I like this.. :) THANKS YOU!
thank...it's wonderfull
Awasome color, nice work. I'm using now. Thank you friend!
Thanks for sharing.
Really love this post.
Best Regards,
Iqbal Parabi
nice info..
thanks u....
thank you very much !
With this code i fix the problem... Thanxxxxx..
Thank you i like......
awsome article, i like this post. It's very usefull fo blogger like me. Thank's to share.
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......
@Syira Qahira What doesn't work for you? Can you add a link to your blog?
Thank you i like
Thank you, nice I like it..
thank.... i find this article...
Lowongan Kerja : wow..like this post, very nice comment layout
good job artistttor, congratulations :)
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???
@SarahCheck the new tutorial:
http://artistutorial.blogspot.ro/2013/04/threaded-comments-for-blogger-comment.html
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?
@Damar Zaky I don't understand what you want to edit.
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.
@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.
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
I want to Delete Pop Up at Reply button , but I don't know to Delete it ??
Can you help me ??
@Achmad Nurdim FikriTry this tutorial:
Threaded comments for blogger without popup window
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.