Tuesday, 5 November 2013

Filled Under:

Unique Blogger Threaded Comment Style with Smileys



A blog is said to be popular when you consider certain factors like number of shares , views , visitor reviews , search engine relativity. Amongst them , the most important factor is the number of comments.Comments induces a reader to share and put forth his comments.So all in all , comments are an integral part of a blog.So we need to style and customize them so that they are seen by a reader.Not only seen but it should appeal to them.

Live Demo 



Live Demo

Adding It To Blogger 

  • Backup your template - IMP
  • Navigate to Blogger > Edit Html > Tick mark Expand widgets 
  • Search for <b:include data='post' name='threaded_comments'/> 
  • Replace it with the following code 
<b:include data='post' name='comments'/>

  • Search for  ]]></b:skin>
  • Paste the following code after ]]></b:skin>
  • Before this make sure you have removed all CSS beginning with  #comments or.comment
#comments h4 {
font-family: Arial, Helvetica, Garuda, sans-serif;
font-weight: normal;
text-transform: uppercase;
font-size: 20px;
color: #666;
text-shadow: 0 0 1px #CCC;
display: block;
width: 100%;
padding: 20px 0 5px 0;
margin: 0;
}
.unneeded-paging-control {display: none;}
.comment_child .comment_wrap {
padding: 0 0 0 20px;
}
.comment_header {
float: left;
border-top: 3px solid #E9ECF1;
padding-top: 15px;
width: 215px;
margin: 0 15px 0 0;
}
.comment_avatar img {
margin: 0 15px 0 0;
 border-width: 1px;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 -webkit-background-clip: padding-box;
}
.comment_body {
border-top: 1px solid #E9ECF1;
padding: 0 0 8px;
}
.comment_name {
margin: -6px 0 0 40px!important;
font-family: Arial, Helvetica, Garuda, sans-serif;
 font-weight: normal;
 font-style: normal;
 line-height: 1;
 margin: 2.1em 0 1em;
 color: #525252;
 font-weight: bold;
 font-size: 16px;
}
.comment_name a:hover {
color: #F90;
}
.comment_name a {
color: #525252;
text-decoration: none;
text-shadow: 0 0 1px #DDD;
font-size: 16px;
}
.comment_name a:hover {color: #F90;}
.comment_service {
margin: 0 0 0 41px;
color: #CCC;
font-size: 10px;
font-style: italic;
}
.comment_body p {
margin: 13px 15px 10px 15px;
word-wrap: break-word;
color: gray;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
font-size: 12px;
padding: 0 0 0 214px;
}
.comment_avatar .avatar-image-container {
height: 36px!important;
width: 36px!important;
background: url(https://lh4.googleusercontent.com/-eDHFRnn1V8c/T3xevM-n37I/AAAAAAAAB6U/e2qjKL79U_0/s35/ano_icon.gif) no-repeat;
 border-width: 1px;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 -webkit-background-clip: padding-box;
}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:101%!important}
.comment_admin {
}
.comment_form a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-family: Arial, Helvetica, Garuda, sans-serif;
font-size: 15px;
color: #F90;
}
.comment_form a:hover {text-decoration: underline;}
.comment_reply_form {
padding: 0 0 0 20px;
border-left: 1px solid #DDD;
}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo {
max-width: 1.5em;
max-height: 1.5em;
vertical-align: middle;
margin: -0.3em 0 0 0;
}
.comment_emo_list .item {
float: left;
width: 40px;
text-align: center;
height: 40px;
margin: 10px 10px 0 0;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {
max-width:100%!important;
}
.comments .avatar-image-container img {
width:36px!important;
height:36px!important
}
.deleted-comment {
padding: 10px 10px 10px 10px;
display: block;
color: #CCC;
}
#respond {
overflow: hidden;
padding-left: 10px;
margin-top: 30px;
clear: both;
}
.comment_inner {
margin: 0 0 25px 0;
}
.comment_reply {
clear: both;
float: right;
height: 20px;
filter: alpha(opacity=60);
opacity: 0.6;
background: url(https://lh6.googleusercontent.com/-m_V-eQOXNXY/T4qTc2wkylI/AAAAAAAACE8/KNiUT0nn9tE/s12/reply.png) no-repeat top left;
margin-right: 15px;
padding-left: 16px;
font-weight: normal;
text-transform: uppercase;
font-family: Arial, Helvetica, Garuda, sans-serif;
font-size: 10px;
color: #666;
}
.comment_inner:hover > .comment_reply {
filter: alpha(opacity=100);
opacity: 1;
}
.comment_child .comment_wrap {
background: url(https://lh5.googleusercontent.com/-AxMRILG-qlQ/T4qTc9xTj5I/AAAAAAAACE4/UczfEp0fn_I/s21/reply_bg.png) no-repeat;
padding: 11px 0 0 30px;
}
.comment_admin .comment_header {
border-top: 3px solid lightSalmon;
}

  • Now REPLACE all the code between 
 <b:includable id='comments' var='post'> and</b:includable>,with the following code
<div class='comments' id='comments'>
        <a name='comments'/>
        <b:if cond='data:post.allowComments'>
         <b:if cond='data:post.numComments != 0'>
          <h4>
           <b:if cond='data:post.numComments == 1'>
            1 <data:commentLabel/>:
           <b:else/>
            <data:post.numComments/> <data:commentLabelPlural/>
           </b:if>
          </h4>
         </b:if>
             
         <b:if cond='data:post.commentPagingRequired'>
          <span class='paging-control-container'>
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
           &#160;
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
           &#160;
           <data:post.commentRangeText/>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </span>
         </b:if>
                     
         <div class='clear'/>
         <div id='comment_block'>
          <b:loop values='data:post.comments' var='comment'>
                                   
           <div class='comment_wrap' expr:auclass='data:comment.adminClass' expr:id='data:comment.anchorName' level='0'>
                                                                     
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:post.adminClass == data:comment.adminClass'>
             &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
            <b:else/>
             &lt;div class=&#39;comment_inner&#39;&gt;
            </b:if>
             <div class='comment_header'>
              <div class='comment_avatar'>
               <data:comment.authorAvatarImage/>
              </div>
              <div class='comment_name'>
               <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
               <b:else/>
                <data:comment.author/>
               </b:if>
              </div>          
              <div class='comment_service'>
               <span class='comment_date'><abbr class='published' expr:title='data:post.timestampISO8601'><data:comment.timestamp/></abbr></span>
               <a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>REPLY</a>
               <b:include data='comment' name='commentDeleteIcon'/>
              </div>
              <div class='clear'/>
             </div>
             <div class='comment_body'>
              <b:if cond='data:comment.isDeleted'>
               <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
               <p><data:comment.body/></p>
                                                            <div class='clear'/>
                                                       
              </b:if>                                        
             </div>          
           
              <div class='clear'/>
            &lt;/div&gt;
            <div class='clear'/>
         
            <div class='comment_child'/>
            <a expr:name='&quot;r_&quot;+data:comment.anchorName'/>
            <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>            
           </div>
          </b:loop>            
         </div>  
         <div class='clear'/>
         <b:if cond='data:post.commentPagingRequired'>
          <span class='paging-control-container'>
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
           &#160;
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
           &#160;
           <data:post.commentRangeText/>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </span>
         </b:if>
         <div class='clear'/>
         <div class='comment_form'>        
       
          <b:if cond='data:post.embedCommentForm'>
           <b:if cond='data:post.allowNewComments'>
            <h4 id='comment-post-message'><data:postCommentMsg/></h4>
            <div class='comment_emo_list'/>
                                                                     
            <b:include data='post' name='threaded-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>
         </div>
        </b:if>
       </div>
                   
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
       //]]>
       </script>
     
       <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
       <script type='text/javascript'>
     
         <b:if cond='data:post.numComments != 0'>
         var Items = <data:post.commentJso/>;
         var Msgs = <data:post.commentMsgs/>;
         var Config = <data:post.commentConfig/>;
        <b:else/>
         var Items = {};
         var Msgs = {};
         var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
        </b:if>
       //<![CDATA[
       //Global setting
        Config.maxThreadDepth = 6;//How threaded level that you want
        Display_Emo = true;//Display emoticon or not? set "false" to no display
        Replace_Youtube_Link = true;//Auto replace youtube link to iframe embedded, choose "false" to disable
        Replace_Image_Link = true;//Auto replace an image link  choose "false" to disable.
                                Replace_Force_Tag = true;//Auto replace an virtual tag example: [pre] to <pre>, and [/pre] </pre>, If user input wrong , your layout will be gone. Then becare ful when enable this trap
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),only effect when Replace_Image_Link=true
     
        //Config emoticons declare
        Emo_List = [
        'O.O'  ,'https://lh6.googleusercontent.com/-wFaOATKR4SA/T30v4DhsyaI/AAAAAAAAB9Y/IUXospAJeOY/s68/andor.gif',
        '-"-'  ,'https://lh3.googleusercontent.com/-h9oTcYks_lk/T30v4BPBI-I/AAAAAAAAB9c/cZfP0ZFWPHs/s71/angry.gif',
        '(*.*)'  ,'https://lh4.googleusercontent.com/-pGO4V5w1TaA/T30v4FMeFII/AAAAAAAAB9U/-7-Bt6tj5oQ/s68/big_love.gif',
        '*-*'  ,'https://lh4.googleusercontent.com/-2jLXNEY4OCk/T30v40n7yHI/AAAAAAAAB9k/BM47BOGwZXY/s69/blushing.gif',
        '="='  ,'https://lh5.googleusercontent.com/-hre6HQpNiQU/T30v7csKADI/AAAAAAAAB-A/cAu5ieQ0ijk/s69/boss.gif',
        'o"o?'  ,'https://lh6.googleusercontent.com/-nxu-QcsrDKY/T30v5gymK-I/AAAAAAAAB9o/dKyZtsFk8ao/s71/confuse.gif',
        '(T_T)'  ,'https://lh3.googleusercontent.com/-xL5i3C40HaQ/T30v6MSVkpI/AAAAAAAAB94/u9-ujXK3-DI/s68/cry.gif',
        '(--;)'  ,'https://lh5.googleusercontent.com/-3eFb9qxO9uw/T30v75gUD4I/AAAAAAAAB-E/sP2tGLI7IRg/s69/down.gif',
        ':^D^:'  ,'https://lh5.googleusercontent.com/-4X0hsEHtxCE/T30v7FkHRJI/AAAAAAAAB-M/qw6aipm3JY0/s69/hi_smile.gif',
        ':@v@:'  ,'https://lh6.googleusercontent.com/-ZVixtSGmiZg/T30v8XSnItI/AAAAAAAAB-I/gejMS-Vj30k/s69/hypnotized.gif',
        '-.-b'  ,'https://lh6.googleusercontent.com/-ZgdVEEGEMvk/T30v89OZhkI/AAAAAAAAB-Q/RzBo9Cq9V90/s71/music.gif',
        '(==)'  ,'https://lh3.googleusercontent.com/-aRkm8aOyN_E/T30v807GlrI/AAAAAAAAB-U/zRunQHH2hEE/s69/no_see.gif',
        '(oxO)'  ,'https://lh3.googleusercontent.com/-bp1LRj6s9yA/T30v9AmNVMI/AAAAAAAAB-g/Bu9uFe1qVTM/s69/no_talk.gif',
        'o(O'  ,'https://lh5.googleusercontent.com/-wQe3P9yRsOA/T30v9a-ODlI/AAAAAAAAB-Y/VEokbJCc3m8/s70/sick.gif',
        '(--)z'  ,'https://lh6.googleusercontent.com/-XIXrSweZBA8/T30v9vUaaLI/AAAAAAAAB-s/kDPrO6MT8Pg/s72/sleep.gif',
        '(*0*)'  ,'https://lh3.googleusercontent.com/-McriiAom7rg/T30wAPX9CLI/AAAAAAAAB_E/0ZHmgtYo4yo/s69/surprise.gif',
        '^q^'  ,'https://lh3.googleusercontent.com/-bm8z7gvCwgA/T30v-UtEc1I/AAAAAAAAB-w/fWWUZecwCks/s69/tongue.gif',
        '(o_o)'  ,'https://lh4.googleusercontent.com/-9tdtAAzpRxI/T30v-973FPI/AAAAAAAAB-0/lXvSLGX4T3A/s69/v_smile.gif',
        '*_`'  ,'https://lh3.googleusercontent.com/-SdjaN2rql68/T30v_YFgm8I/AAAAAAAAB_A/kunJe6n7oT8/s68/whew.gif',
        '**"'  ,'https://lh3.googleusercontent.com/-L21FYz-A9T0/T30v_htvcjI/AAAAAAAAB_I/Cnk49nr9BCs/s73/worried.gif'
        ];
     
                             
                                //Config Force tag list, define all in lower case
                                Force_Tag = [
                                    '[pre]','<pre>',
                                    '[/pre]','</pre>',
                                    '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
                                    '</pre>','</code>'
                                ];
   
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{}))      
             
       //]]>
         </script>

  • The final result will be like this : 

 <b:includable id='comments' var='post'>
THE CODE
</b:includable>

  • Save the template and you are done customizing the template.  

Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

0 comments:

Post a Comment

© 2013 iPRESS. All rights resevered. Designed by Templateism