Cara Memodif Tampilan Kolom Komentar Blog

Untuk meningkatkan engage, atau interaksi pembaca terhadap setiap artikel yang dihadirkan di blog Anda, selain membuat konten yang berkualitas, Anda juga dapat memodifikasi tampilan kolom komentar untuk menarik perhatian pembaca untuk berkomentar. Kolom komentar blog pada template web yang masih menggunakan platform blogspot pada umumnya memiliki tampilan yang begitu sederhana, minimalis, dan tidak begitu menarik. Sehingga membuat kebanyakan pembaca hanya berniat untuk membaca yang Anda tuliskan, tanpa meninggalkan feedback apapun, baik itu berupa ucapan terimakasih maupun bertanya sesuatu terkait artikel yang Anda tuliskan.

Kolom komentar yang keren dan enak dilihat cara menambahkan pesan untuk meminta pengunjung untuk berkomentar di blog cara memasang menambahkan pesan diatas kolom komentar blog, Seumpama jika pembuat template blog tidak melakukan modifikasi pada kolom komentar blog menggunakan CSS dan meninggalkannya tetap default, kurang lebih inilah tampilan kolom komentar di blogspot:

Terlihat sedikit membosankan bukan?

Bagaimana Cara Mengubah dan Membuat Komentar di Blog Menjadi Keren ? Untuk merubah dan mendesign kotak komentar pada blogger agar nantinya lebih keren itu bukan hal yang sangat sulit , sobat cuman perlu mengetahui sedikit tentang css dan html . dan kemudian memasangkan html dan css sebagai pemanggil html tersebut pada halaman editor html blog anda. Tak hanya kotak komentar yang keren , akan tetapi comments box ini fast loading dan valid html5 serta css3 , sehingga tidak membuat blog anda lelet ketika di buka.

Cara Merubah Komentar Blog Menjadi lebih Keren :

1. Pertama , pastikan sobat udah masuk di dasbhor sobat sendiri
2. Kemudian masuk Menu Template -> Edit HTML dantTemukan kode dibawah ini :

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

3. Lalu Ganti kode diatas dengan kode seperti ini

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

4. Setelah itu, silahkan cari kode ]]></b:skin>

5. Jika sudah, silahkan copy-paste kode CSS berikut ini diatas kode tersebut:

#comments {} #comments h3 {background:#35404d;border:1px solid #1d2630;display:inline;margin-bottom:25px;padding:5px;line-height:40px;position:relative;text-transform:uppercase;color:#fff;font:13px Oswald;border-radius:3px;} #comments h3:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #35404d;border-right:20px solid transparent;width:0;height:0;line-height:0} .comment_avatar_wrap{ width:42px; height:42px; border: 1px solid #151d26; background:#25303c; padding:4px; text-align:center; margin-bottom:20px; } #comments .avatar-image-container { float: left; margin: 0 10px 0 0; width: 42px; height: 42px; max-width:42px; max-height:42px; padding: 0; margin-bottom:10px; } #comments .avatar-image-container img { width: 42px; height: 42px; max-width: 42px; max-height: 42px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEXtzEvhsJHme4spN4dN76AJBywFF818jjDyEeoAaSpiudUDk7GFtJabT8Gx7LJ5Y3QSent5r2FaIICdkRG8weqCjbEnuc9Ay8GVcklvVkxHSwjKdCDgVurBSYCaQR6RjiCxq9ka8wL1zP/s1600/anon.jpg) no-repeat; } .comment_name a { font-family:Oswald, Arial, Sans-serif; padding-bottom:10px; font-size:14px; text-decoration: none; } .comment_admin .comment_name { font-family:Oswald, Arial, Sans-serif; padding-bottom:10px; font-size:14px; text-decoration: none; } .comment_admin .comment_date { font-weight: normal; font-size:11px; } .comment_name { font-family:Oswald, Arial, Sans-serif; padding-bottom:10px; font-size:14px; font-weight:normal; position:relative; } .comment_service{ margin-top:5px } .comment_date { color: #999; float:right; font-size:11px; font-weight:normal; } .comment_date a{ color: #a9a9a9; float:right; font-size:11px; font-weight:normal; } .comment_date a:hover{ color: #a9a9a9; text-decoration:none; } .comment_body{ margin-top:-72px; margin-left:65px; background:#25303c; border:1px solid #1d2630; border-top:1px solid #171f28; border-left:1px solid #171f28; padding:15px; } div.comment_inner.comment_admin{ background:#394549; } .comment_body p { line-height: 1.5em; margin: 5px 0 0 0; color: #999; font-size: 13px; word-wrap:break-word; padding-bottom:10px; } .comment_inner { padding: 15px; margin: 5px 0 5px 0; background-color:#35404d; } .comment_child .comment_wrap {padding-left: 5%;} .comment_reply { display: inline-block; margin-top:8px; margin-left:-5px; padding: 1px 12px; color: #fff !important; text-align: center; text-decoration: none; border-radius: 2px; background: #54687c; font: 11px/18px sans-serif; transition: background-color 1s ease-out 0s; } .comment_reply:hover { text-decoration: none !important;; background: #627c96; } .unneeded-paging-control {display: none;} #comment-editor {width:100% !important;background:#e1e3e6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUe4eTmFG6HZ4IZ6dBjTQVy-ihvqTmugp8OeCllgZy3Cn844qhlE6s4LsA7ZfX8_ji4ffL1sojyEv5o2IW5W1p8Y1oMtjnXm4pPS0-LaSyi1lyF0FIYNlRFnlh5kT9o96uMPWvYRVzwmg/s1600/kangis-loader.gif') no-repeat 50% 30%;border-radius:4px;margin-bottom:20px;position:relative;} .comment-form {max-width: 100% !important;} .comment_form a { text-decoration: none; text-transform: uppercase; font-weight: bold; font-family: Arial, Helvetica, Garuda, sans-serif; font-size: 15px; } .comment_form a:hover {text-decoration: underline;} .comment_reply_form { padding: 0 0 0 70px; } .comment_reply_form .comment-form {width: 99%;} img.comment_emo {margin:0;padding:0;vertical-align:middle} .comment_emo_list{ display:none; } .comment_emo_list .item { float: left; text-align: center; margin: 10px 10px 0 0; height: 40px; width:41px; } .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;} .comment_header{width:50px} #respond { overflow: hidden; padding-left: 10px; clear: both; } .comment_avatar img{width:42px;height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEXtzEvhsJHme4spN4dN76AJBywFF818jjDyEeoAaSpiudUDk7GFtJabT8Gx7LJ5Y3QSent5r2FaIICdkRG8weqCjbEnuc9Ay8GVcklvVkxHSwjKdCDgVurBSYCaQR6RjiCxq9ka8wL1zP/s1600/anon.jpg) no-repeat} .comment-delete img{float:right;margin-left:15px;margin-top:3px;} .comment_author_flag {display:none} .comment_admin .comment_author_flag {display:inline;font-size:13px;font-weight:normal;padding:2px 6px;right:-23px;margin-top:-23px;color:#fff;border-radius:4px;text-transform:uppercase;position:absolute;width:36px;height:36px;} iframe{border:none;overflow:hidden} .deleted-comment { background:#db6161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0nMs24djunVYog4IZxgDmRUN_x9uPIPOdkPR5grXEUbFmIGL4-f5saTeq3-BzLxn4VosVYffeZsW9B3LRMwchrmDNDqPgyVFFl5YcwJQ2KfVkyFYf-ctEi48fKk-g7HxbdJiWtUaOs1A/s1600/tempat-sampah.png) no-repeat 2% 50%; color:#efd4d4; line-height: 22px; border: 1px solid #c44d4d; padding:12px 15px 12px 45px; margin:5px 0; display: block; } .comment-form p { background: #54687c; padding: 15px 15px 14px 15px; margin: 5px 0 5px 0; color: #f4f4f4; font-size: 13px; line-height: 20px; border-radius:4px; position:relative; } div.comment_avatar img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] { content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdgfUtLfnqHs-XEfJEUBFzMYvqr4FkFj2ymQEabWun04Eq3HpLphSQT-R12WxZRBnMUDrrCwEwfzImFdwsNKnxMYqhQRBuVIkJGIrsqqky-9UXJMW594DXp80jUhO5znd-gSRLGKMbaIs/s45-c/gravatar.png); } div:target .comment_inner{background:#346656;transition:all 15s ease-out;} div:target .comment_child .comment_wrap .comment_inner{background:#404c5c;} iframe{border:none;overflow:hidden}

6. Selanjutnya, silahkan cari kode

<b:includable id='comments' var='post'> ... sampai... </b:includable>

7. Setelah Anda menemukan kode tersebut, silahkan ganti kode tersebut dengan kode dibawah ini:

<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>
  </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='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_header'>
     <div class='comment_avatar_wrap'>
     <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
<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='Balas'>Balas</a>
     </div>
                       
     <div class='clear'/>
    </div>
       
    <div class='comment_body'>
                                      <span class='comment_arrow'/>
     <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>
       <b:if cond='data:comment.author == data:post.author'>
         <span class='comment_author_flag'>Admin</span>
       </b:if>
                  <span class='comment_service'>
      <a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHf6JCgCYoQWFt-IUqhCqhNZ-S636D9a6BWUG_PdjISYPbUmQpTBlbah4tsSV_KqUEJzuVwT78XnG7L3SLOCFiB_81oupaRujv7DddO1tjW7V9TF0cv6gQwi4AG7_3mKZmA6z_hh4aNY/s1600/delete4.png' title='Hapus Komentar'/>
</a>              
      <span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
                  <data:comment.timestamp/>
        </a></span>
  </span></div>
     <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'/>
    <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'>
      <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' 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' 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;//Kedalaman tingkat threaded comment
        Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
        Replace_Youtube_Link = false;//Embed video YouTube, ketik "false" untuk mendisable
        Replace_Image_Link = false;//Auto replace link image,  ketik "false" untuk mendisable.
                                Replace_Force_Tag = false;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true
   
        //Pengaturan Emoticon
        Emo_List = [
        ':)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUn4K-d6sxB-SzhNuOMJNE7oF55I16NAHlrHCSJiDRUQZYCzLqI591YGeneM93C0QwQTWny7LxtDrZnMXq2yAFS1EQhILj03ziejjqh3qPOZ8TMbEjt2MjJL5xME1YdX6o1Q_Ju49NtIw/s1600/smile1.gif',
        ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_bC2ex24GWZxdgqmMz9PcJnys2B9f4oxzG4u2_xpth8e9LvijYYa5JCuN4EAjItEjzrTO8pFGz5lfb-0iQIVhoy4wf488WWnAdz3YHWU8mxRYPtSPBaBpn6Aa6fRMWslngZ45_47LH0M/s1600/sad.gif',
        '=('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh71b7LUtprUVsSWc4vPYneD0IBip3S9baWMQpGNiCgPy7qvuBxcoQjUtyxKv82sEVr0lBjAA1LqojKfGwbUo2Yn99fHufaJ30eBKUpGQ-B2PwgKOyS-ZnKzfmzSdTkoSCcD97SYe-yL9s/s1600/sadanimated.gif',
        '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYpSZ0QxNCvx-Rmwz7eCa_0yuufD_ZdXzjxEEUhsqG5n38nZQ5P5442umtVxZMAxuWsEWnHwOyI90BVXeZe7ijRaxTmXU38GC7xBqePsDvlZ9Q6ZZq_Jrs-3yM3_mBbZVgoGHuyoY5V1w/s1600/smile.gif',
        ':D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwklbwJoLOHVBFdGdGDkHS62LhYWGPr3lC3rA7E-pKH_mOEmLPwMzEN3aYxcv5i2FAp9lGosscLmO4LHzOMTChTslmXdgn_BdSQsYQeTojRynTn4tfohf3OG5X3bprxJnGjIulsuroZos/s1600/icon_smile.gif',
        '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2WgvCT8XF6JNS8hU515YMF5FBqrf7c-7BuhLqtKr4oiCtxcHok0DLw_zNFR857yw6ZTIHaVqoZltA48mu9U4W5g4Y20vnh3j49HXm2lnQjGhXmgaiycOkbm4MbSD57PZyIF2jgeEJ5KQ/s1600/hihi.gif',
        '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv7x9xeNLkNAmBkPFti5x0fbdgYKHHbp5AGsj-xljCdAI0jptM291QA4EM8LMC727cuYEQAmM5E3tWUzg-Avi5HVVdEibDmUv5joEhthXSG6FI4kIALkDvMHHJ2yjpaHYa813zTE2sPuQ/s1600/applause.gif',
        '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjicYQ9MLmXNY2Wxxp43nVl_wn3UpFZ4YKlRf_X8nfHM8NtCU-7OQk8Bg-vNMQ8UsfvTN8Cuff0eGYad6_3VXqdBu_b7tHD0wgBoeXCIrDkj6Xl-SKgP6sZF72WJVrn3Z_RMl0CNE5cJdI/s1600/rolleyes.gif',
        ';)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb-BccrZxwulXmQ0z4MrI1Ucd_MPHPTFcs0UKrzGLNthgQic4ee9dBQEJmOzCx1vNPitwReOsZB7iXbsZ8e44t4SFAhJJh3Wi15Cjc0vyWd7DmeGbsDxpZbmeLxmaO-bVLVWx0APswEG0/s1600/wink.gif',
        ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2bkjH8ttaX_TAh3nho1aup22zNssgc_pSnunNcBSMvs4ceBwNdQpnTVw_Pn9rAvuKKKmtVcizEX8evEHULa-Fl1D8ydkianG9mRqV5k6xwmWjazEe-69iFHrQjntAg5rmaNnb6-p0Ls0/s1600/thumb.gif',
        ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMIKzRapLvqIrHJ25dRWFkh6cHjbSWyrR385_VvghHnhCrwYINUsgw0CrBm4RINhfK_G3aXAp8YttXlcT4WALIMmk-k3iaVvPQKrQUHkZwCWux4IPdL9aJzA2lW1wrcqKfp5M8BIZPKQI/s1600/thumbsup.gif',
        ':p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnTy_khhGq65mST2dop9UPJVxcJL8Wa6aN-xkqmafsD6KkmczaJetb0HHbMTf_kMGwcqjABTbXt3YwQ_UX8pmQ4JKK1p6JjtOK6O6I5WltD8towlEq5hRbZ3QtcN4cCPPKwolYsVjOMkk/s1600/wee.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 q=\'.W\';3 1a=$(\'#N-Y\').B(\'y\');u 1w(H){3 1h=\' \\n\\r\\t\\f\\2p\\1S\\1T\\1U\\24\\25\\26\\27\\2e\\2h\\2k\\2m\\2n\\2u\\2y\\2z\\2A\\2F\\1L\\1N\\1O\\1P\\1Q\';G(3 i=0;i<H.5;i++){b(1h.g(H.1V(i))!=-1){H=H.d(0,i);11}}C H}$(\'#28 .1B p\').k(u(D,7){b(2r){3 m=\'1g://13.Z.X/1t?v=\';3 8=7.g(m);F(8!=-1){1H=7.d(8);K=1w(1H);3 1c=K.g(\'&\');3 T=\'\';b(1c==-1){T=K.d(m.5)}1e{T=K.d(m.5,1c)}3 1j=\'<1k I="1W" y="1g://13.Z.X/1X/\'+T+\'?1Y=1" 20="0" 21></1k>\';7=7.d(0,8)+1j+7.d(8+K.5);8=7.g(m);b(8==-1){m=\'22://13.Z.X/1t?v=\';8=7.g(m)}}}b(23){3 1d=\'\';3 x=7;G(3 i=0;i<1z.5;i++){3 m=\'.\'+1z[i];3 o=x.E();3 8=o.g(m);F(8!=-1){l=x.d(0,8+m.5);o=l.E();3 w=\'2j://\';3 z=o.g(w);3 L=\'\';F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}w=\'1K://\';o=l.E();z=o.g(w);F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}b(L==\'\'||l.5<6){11}l=L+l;1d+=x.d(0,8+m.5-l.5)+\'<S y="\'+l+\'" I="2s"/>\';x=x.d(8+m.5);o=x.E();8=o.g(m)}}7=1d+x}b(1m){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';8=7.g(A[i]);F(8!=-1){7=7.d(0,8)+V+7.d(8+A[i].5);8=7.g(A[i])}}}b(2G){3 5=U.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){F(1){3 x=7.R();8=x.g(U[i]);b(8!=-1){7=7.d(0,8)+U[i+1]+7.d(8+U[i].5)}1e{11}}}}C 7});$(\'.1M\').k(u(D,7){b(1m){3 5=A.5;b(5%2==1){5--}3 15=\'\';G(3 i=0;i<5;i+=2){3 1C=\'<1F>\'+A[i]+\'</1F>\';3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';15+=\'<M I="1R">\'+V+1C+\'</M>\'}C 15}});$(\'.1f .1B p\').k(u(i,h){10=h.R();D=10.g(\'@<a 12="#c\');b(D!=-1){14=10.g(\'</a>\',D);b(14!=-1){h=h.d(0,D)+h.d(14+4)}}C h});u 1l(j){r=j.g(\'c\');b(r!=-1)j=j.d(r+1);C j}u 1n(j){j=\'&1Z=\'+j+\'#%1o\';1p=1a.1q(/#%1o/,j);C 1p}u 1r(){k=$(q).k();$(q).k(\'\');q=\'.W\';$(q).k(k);$(\'#N-Y\').B(\'y\',1a)}u 1s(e){j=$(e).B(\'16\');j=1l(j);k=$(q).k();b(q==\'.W\'){1u=\'<a 12="#1v" 29="1r()">\'+2a.2b+\'</a><a 2c="1v"/>\';$(q).k(1u)}1e{$(q).k(\'\')}q=\'#2d\'+j;$(q).k(k);$(\'#N-Y\').B(\'y\',1n(j))}17=2f.2g.12;18=\'#N-2i\';19=17.g(18);b(19!=-1){1y=17.d(19+18.5);1s(\'#2l\'+1y)}G(3 i=0;i<O.5;i++){b(\'1A\'2o O[i]){3 j=O[i].1A;3 1b=2q($(\'#c\'+j+\':P\').B(\'1D-1E\'));$(\'#c\'+j+\' .2t:P\').k(u(D,7){3 J=O[i].16;b(1b>=2v.2w){$(\'#c\'+J+\':P .2x\').1G()}3 Q=$(\'#c\'+J+\':P\').k();Q=\'<M I="1f" 16="c\'+J+\'" 1D-1E="\'+(1b+1)+\'">\'+Q+\'</M>\';$(\'#c\'+J).1G();C(7+Q)})}}3 1I=$("#2B");1I.2C(\'.2D S\').2E(u(){3 1J=$(1i).B(\'y\');$(1i).2H().B(\'y\',1J.1q(/\\/s[0-9]+(\\-c)?\\//,"/2I-c/"))});',62,169,'|||var||length||oldhtml|check_index|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||function||http_search|temp_html|src|find_http|Emo_List|attr|return|index|toUpperCase|while|for|str|class|child_id|yt_link|save_http|div|comment|Items|first|child_html|toLowerCase|img|yt_code|Force_Tag|img_html|comment_form|com|editor|youtube|temp|break|href|www|index_tail|newhtml|id|cur_url|search_formid|search_index|Cur_Cform_Url|par_level|yt_code_index|save_html|else|comment_wrap|http|whitespace|this|yt_video|iframe|Valid_Par_Id|Display_Emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|watch|reset_html|origin_cform|trim|comment_emo|ret_id|Replace_Image_Ext|parentId|comment_body|img_code|data|level|span|remove|ht|avatar|ava|HTTPS|u200a|comment_emo_list|u200b|u2028|u2029|u3000|item|x5d|x7c|x7d|charAt|comment_youtube|embed|autohide|parentID|frameborder|allowfullscreen|https|Replace_Image_Link|x3c|x3e|x0b|xa0|comment_block|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|u2001|form_|HTTP|u2002|rc|u2003|u2004|in|x5b|parseInt|Replace_Youtube_Link|comment_img|comment_child|u2005|Config|maxThreadDepth|comment_reply|u2006|u2007|u2008|comments|find|comment_avatar|each|u2009|Replace_Force_Tag|show|s45'.split('|'),0,{}))
    //]]>
</script>
</b:includable>

8. Terakhir, klik Simpan template dan lihat hasilnya.

Gimana mudah bukan ? atau bahkan sobat pusing melihat kode ? kalau pusing itu wajar sekali , karena saya waktu awal obrak - abrik template juga mengalamai hal yang sama , pokoknya tetap semangat dan jangan mudah menyerah , kalau masih gagal ya dicoba lagi sampai bisa , selamat memodifikasi komentar blog yang paling keren. Semoga bermanfaat.