› ›

Cara Modifikasi Tampilan Thread Comments Hack Blogger

Ditulis oleh Sabtu, 22 Agustus 2015 Tambah Komentar Edit
Cara Modifikasi Tampilan Thread Comments Hack Blogger
Cara Modifikasi Tampilan Thread Comments Hack Blogger
Atas permintaan salah satu member Opick Weblog, kali ini akan kita buat tampilan komentar blog menjadi lebih keren. Tampilan komentar ini merupakan modifikasi dari Thread Comments Hack For Blogger. Bila Tertarik dengan tampilannya, silahkan simak tutorial berikut.

Cara Modifikasi Tampilan Thread Comments Hack

1. Silahkan menuju ke menu Template lalu klik Edit HTML.

2. Letakkan CSS berikut sebelum kode ]]></b:skin> atau </style>.
/* CSS Comments Opick Weblog */
#comments{background:#fff;clear:both;margin:10px auto 0;line-height:1em;padding:20px;border: 1px solid #eee;}
#comments h3{background:#fff;display:inline;line-height:20px;margin-bottom:20px;margin-top:0;font-family:'Arial',sans-serif;font-size:14px;position:absolute;color:#333;font-weight:700;text-transform:uppercase;padding:10px 20px 10px 50px;border:1px solid #eaeaea;}
#comments h3:before {font-family:fontawesome;content:"\f086";margin-right:10px;font-size:20px;padding:10px 15px;position:absolute;left:0;top:0;}
#comments .click-comment{background:#fff;color:#333;float:right;text-decoration:none;display:inline;line-height:20px;margin-bottom:20px;margin-top:0;font-family:'Arial',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;padding:10px 20px;border:1px solid #eaeaea;}
#comments .click-comment:hover{background:#fff;color:#4f93c5;}
.comment_avatar_wrap{width:0;height:42px;border:none;background:none;text-align:center;padding:0;}
#comments .comment_avatar {width:42px;height:42px;max-width:42px;max-height:42px;background:#fff;padding:3px;text-align:center;position:absolute;top:19px;right:8px;border-radius:50%;}
#comments .comment_admin .comment_avatar{width:42px;height:42px;max-width:42px;max-height:42px;padding:3px;text-align:center;position:absolute;top:19px;right:8px;
border-radius:50%;}
#comments .comment_avatar img {width:42px;height:42px;max-width:42px;max-height: 42px;background:#fff;border-radius:50%;}
.comment_avatar img{width:42px;height:42px;background:#fff;border-radius:50%;}
.comment_name a{font-family:'Arial';font-weight:400;font-size:16px;padding:5px 0;color:#fff;text-decoration:none}
.comment_name a:hover{color:#fff}
.comment_admin .comment_name{font-weight:400;font-size:18px;font-family:'Arial';text-decoration:none;background:none;padding:5px 0;text-transform:capitalize;}
.comment_admin .comment_date{left:10px;font-weight:400;font-size:11px;}
.comment_name{font-size:18px;font-family:'Arial';font-weight:400;padding:10px;position:absolute;text-transform:capitalize;left:5px;top:5px;display:inline;transition:all .3s ease-in-out;}
.comment_name:hover{color:#fff;}
.comment_admin .comment_name{padding:10px;left:5px;top:5px;display:inline;}
.comment_service{position:absolute;bottom:8px;left:8px;}
.comment_date a{left:0;font-size:11px;font-weight:400;text-transform:none;color:#aaa;text-decoration:none}
.comment_body{margin:15px 0;background:#fff;padding:0;position:relative;box-shadow:0 1px 1px 0px #e9e9e9;}
.comment_body p{line-height:1.6em;color:#444;font-size:14px;font-family:'Arial',Helvetica,Arial,sans-serif;word-wrap:break-word;background:#fff;padding:0 20px}
.comment_child .comment_body p{color:#444;}
.comment_body p img{vertical-align:middle;margin:0 5px;}
.comment_inner{padding-bottom:5px;margin:5px 0}
.comment_child .comment_wrap{padding-left:7%}
.comment_child .comment_body{margin-top:-10px;background:#fff;}
.comment_reply{float:right;display:inline;bottom:0;right:0;color:#888!important;text-align:center;text-decoration:none;background:#f5f5f5;font:11px/18px sans-serif;padding:3px 11px;}
.comment_reply:hover{text-decoration:none!important;background:#4f93c5;color:#fff!important;text-shadow:none;}
.comment-form{width:100%;max-width:100%;margin-bottom:10px;padding:0;}
.comment_form a{text-decoration:none;text-transform:uppercase;font-weight:700;font-family:Arial,Helvetica,Garuda,sans-serif;font-size:15px;color:#444}
#comment-editor{width:103%!important;background:url('http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif') no-repeat 50% 25%;position:relative;margin-left:-8px;margin-top:-15px}
.comment-form p{background:#fff;color:#666;border:1px solid #e9e9e9;font-size:14px;font-family:'Arial',Helvetica,Arial,sans-serif;line-height:1.3em;margin-bottom:15px;padding:5px 10px 10px 10px;border-radius:2px;}
.comment_avatar img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] { content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2fLJIVIgSFcqiIZpd1p4fPg5juWrdJ1-pWWEvj7nUftNQf5GFaRGh0z3L6U1rbTCaQhvHNUvXKfGmEpFXqrQms-o3vpoGBj5JYv95fv3f6dPyogF0xFJd6VnufwHQySrFUE_FdqhMu0/s45-c/gravatar.png); } 
.comment_reply_form{padding:0 0 0 7%}
.comment_reply_form .comment-form{width:100%}
.comment_emo_list .item{float:left;text-align:center;height:40px;width:41px;margin:0 0 10px;}
.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444}
img.comment_emo {width:16px;height:16px;}
.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img{max-width:100%!important}
#respond{overflow:hidden;padding-left:10px;clear:both}
.comment-delete{position:absolute;display:none;top:0;right:-25px;color:red!important;text-align:center;text-decoration:none;font-family:'Arial';font-size:16px;font-weight:700;padding:0;transition:all .3s ease-in-out}
.comment_body:hover .comment-delete{display:inline-block;}
.comment-delete:hover{color:#444!important}
.unneeded-paging-control, .comment_author_flag{display:none}
.comment_admin .comment_author_flag {display:inline;background:rgba(255,255,255,0.3);font-family:'Arial';font-size:13px;font-weight:600;width:42px;height:15px;right:6px;bottom:0;color:#fff;text-align:center;border-radius:3px;padding:3px 10px;margin-left:10px;}
.comment_child .comment_admin .comment_author_flag {background:rgba(255,255,255,0.3);color:#fff;}
.deleted-comment{display:block;color:#757575;word-wrap:break-word;background:#eee;margin-top:10px;margin-bottom:20px;padding:10px;font-size:13px;font-family: 'Arial',Helvetica,Arial,sans-serif}
iframe{border:none;overflow:hidden}
.paging-control-container{text-align:center;margin:0 0 0 25%;}
.paging-control-container a{text-align:center;margin:0 auto;background:#ccc;border:1px solid #bbb;padding:3px 10px}
.comment_header {background:#4f93c5;padding:2px 0;}
.comment_child .comment_header {background:#2aafad;}
#emo-box,#hide-emo {display:none}
.small-button a,.small-button1 a {border:1px solid #eee;font-size:12px;font-family:'Arial';cursor:pointer;font-weight:700;margin:10px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;display:inline-block;color:#333;padding:4px 10px;cursor:pointer;border-radius:2px;transition: all 0.3s ease-out;}
.small-button a {background-color:#fdfdfd;transition: all 0.3s ease-out;}
.small-button1 a {background-color:#fff;transition: all 0.3s ease-out;}
.small-button:hover a,.small-button1:hover a {background-color:#fff;border-color:#4f93c5;color:#4f93c5;}
span.small-button,span.small-button1 {text-align:left;display:inline-block;}
.streamButton{display:none}
.post {background:#fff;margin:0;padding:0 20px 20px 20px;border:1px solid #f1f1f1;}

3. Setelah itu cari kode <b:includable id='comments' var='post'>.

4. Ganti semua kode dari <b:includable id='comments' var='post'> sampai kode penutup </b:includable> dengan kode berikut.
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
<a class='click-comment' expr:title='data:commentLabelPlural' href='#comment-form'>Write <data:commentLabelPlural/></a>
  </b:if>
               
  <b:if cond='data:post.commentPagingRequired'>
   <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><data:post.newestLinkText/></a>
   </span>
  </b:if>
                       
  <div class='clear'/>
  <div id='comment_block'>
   <b:loop values='data:post.comments' var='comment'>
                                                                             
   <div data-level='0' expr:class='data:comment.adminClass' expr:id='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_body'>
    <div class='comment_header'>
     <div class='comment_avatar_wrap'>

     </div>
                         
     <div class='clear'/>
    </div>

     <div class='comment_name'>
      <b:if cond='data:comment.authorUrl'>
       <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
       <b:else/>
       <data:comment.author/>
      </b:if>
<div class='comment_author_flag'>author</div>
</div>
<span class='comment_service'>
      <span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
                  <data:comment.timestamp/>
                </a></span>
<b:include data='comment' name='commentDeleteIcon'/>
  </span>
     <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
      <p><data:comment.body/></p>
<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)' title='Reply'>Balas</a>
                        <div class='clear'/>
                    </b:if>
                 <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>                                         
    </div>                         
     <div class='clear'/>
     &lt;/div&gt;
     <div class='clear'/>
           
    <div class='comment_child'/>
    <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' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
       &#160;
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
       &#160;
       <data:post.commentRangeText/>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><data:post.newestLinkText/></a>
     </span>
    </b:if>
    <div class='clear'/>
  <div class='comment_form' id='comment-form'>         
         

   <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>   
     <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' expr:title='data:postCommentMsg'><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' src='//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js' 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 = 3;
        Display_Emo = true;
        Replace_Youtube_Link = false;
        Replace_Image_Link = false;
        Replace_Force_Tag = false;
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];
      
        //Pengaturan Emoticon
        Emo_List = [
':)'  	,'http://twemoji.maxcdn.com/36x36/1f600.png',
':('  	,'http://twemoji.maxcdn.com/36x36/1f615.png',
'hihi'  ,'http://twemoji.maxcdn.com/36x36/1f601.png',
':-)'  	,'http://twemoji.maxcdn.com/36x36/1f60f.png',
':D'  	,'http://twemoji.maxcdn.com/36x36/1f603.png',
'=D'  	,'http://twemoji.maxcdn.com/36x36/1f62c.png',
';('  	,'http://twemoji.maxcdn.com/36x36/1f62d.png',
'@-)'   ,'http://twemoji.maxcdn.com/36x36/1f616.png',
':p'  	,'http://twemoji.maxcdn.com/36x36/1f61c.png',
':o'	,'http://twemoji.maxcdn.com/36x36/1f62e.png',     
':&gt;)','http://twemoji.maxcdn.com/36x36/1f606.png',     
'(o)'	,'http://twemoji.maxcdn.com/36x36/1f609.png',     
'(p)'	,'http://twemoji.maxcdn.com/36x36/1f619.png', 
'(m)'	,'http://twemoji.maxcdn.com/36x36/1f620.png',
'8-)'	,'http://twemoji.maxcdn.com/36x36/1f60e.png',
':-b'	,'http://twemoji.maxcdn.com/36x36/1f634.png',
'(y)'	,'http://twemoji.maxcdn.com/36x36/1f44d.png',   
        ];
      
                             
                                //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,{}))
var avatar=$("#comments");
avatar.find('.comment_avatar img').each(function() {
        var ava = $(this).attr('src');
        $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s100-c/"));
});      
//]]>
</script>
</b:includable>
Keterangan :
  • Ubah nilai "True" Menjadi "False" pada Display_Emo = true; jika tidak ingin menampilkan Emoticon,
  • Ubah nilai "False" Menjadi "True" pada Replace_Youtube_Link = false; bila ingin link youtube menjadi video,
  • Ubah nilai "False" Menjadi "True" pada Replace_Image_Link = false; bila ingin link gambar di aktifkan.

5. Klik Save dan Lihat Hasilnya.

Tampilan Thread Comments Hack ini dapat anda modifikasi sendiri sesuai keinginan Anda dengan mengedit CSS nya. Bila Anda ingin menampilkan tombol emoticon, silahkan lanjutkan ke tahap berikutnya.

Cara Memunculkan Tombol Emoticon

1. Masih di Edit HTML, carilah kode <p><data:blogCommentMessage/></p>, biasanya ada 4 kode serupa.

2. Gantilah kode <p><data:blogCommentMessage/></p> yang ke-2 dan ke-4 dengan kode berikut.
<p><data:blogCommentMessage/>
<br/><span class='small-button1'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'>Emoticon</a></span><span id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'>Emoticon</a></span></span></p>
<div id='emo-box'>
  <div class='comment_emo_list'/>
</div>

3. Save dan Lihat Hasilnya.

Saya rasa cukup sekian artikel tentang Cara Modifikasi Tampilan Thread Comments Hack Blogger. Semoga bisa bermanfaat bagi sobat blogger terutama yang riquest tentunya. Silahkan berkomentar dibawah sebelum mencobanya dan bila ingin riquest bisa langsung tuliskan dikolom komentar atau dihalaman OOT. Terima Kasih banyak telah mengunjungi Opick Weblog.
Modifikasi Tampilan Thread Comments Hack Blogger
Thanks For Riquest

Belum ada Komentar untuk "Cara Modifikasi Tampilan Thread Comments Hack Blogger"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel