Thread Comment Blogger Mirip Google Plus


Pada kesemptan kali ini admin akan membagikan cara membuat thread comment blogger mirip dengan thread comment menggunakan google plus. Penasaran bagaimana bentuknya ? berikut sreen shoot thread commentnya :

Thread Comment Blogger Mirip Google Plus


Untuk mengunakan blogger threaded comment ini, seperti biasa masuk ke Dasbor -> Template -> Edit HTML.
Cari semua kode ini :
<b:include data='post' name='threaded_comments'/>
Ganti dengan code ini :
<b:include data='post' name='comments'/>
Simpan kode ini di atas ]]></b:skin>
#comments{line-height:1.4em;margin:0;position:relative;background:white;border:3px solid #378;padding:25px 0 0 0}
#comments h3{font-size:18px;font-weight:normal;left:0;background:#f5f5f5;color:#262626;padding:18px 20px 18px 25px;margin-bottom:5px;margin-top:-25px}
#comments .blog-admin{border-bottom:1px solid #e5e5e5;padding:20px 15px 0 15px}
.comment_avatar_wrap{width:46px;height:46px;text-align:center;margin-bottom:20px}
#comments .avatar-image-container{float:left;margin:0 10px 0 0;width:46px;height:46px;max-width:46px;max-height:46px;padding:0;margin-bottom:10px}
#comments .avatar-image-container img{width:46px;height:46px;max-width:46px;max-height:46px;border-radius:100px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR6Bgmm_8ZP8td7bSjz7kpI6wJRk6x0qSFwndziDeJCb0NLTWPpsYwvOrZQzk44QUJGJM8YZuTLp9QvfOZgmiQCdJx_RhqwQqnp7zXXdA9wOTEANh3gKqSv_Bpvz980KBcGqi-unAUWJae/s1600/anon.jpg) no-repeat}
.comment_name{padding-bottom:3px;font-size:14px;font-weight:bold}
.comment_name a{padding-bottom:3px;font-size:13px;text-decoration:none;font-weight:bold;color:#26262c}
.comment_name a:hover{text-decoration:underline}
.comment_admin .comment_name{padding-bottom:10px;font-size:14px;text-decoration:none}
.comment_admin .comment_date{font-weight:normal;font-size:11px}
.comment_service{margin-top:5px
float:right}
.blog-admin .comment_service{opacity:1;position:absolute;left:0;bottom:-30px}
.comment_child .comment_service{visibility:hidden;top:0;right:0}
.comment_child .comment_body:hover .comment_service{visibility:visible}
.blog-admin .comment_body{margin-bottom:45px}
.blog-admin .comment_child .comment_body{margin-bottom:-5px}
.blog-admin .comment_reply{border:1px solid #d9d9d9;padding:1px 7px;border-radius:2px}
.blog-admin .comment_child .comment_reply{border:none}
.comment_date{color:#999;position:relative;font-size:11px;font-weight:normal;padding-left:10px}
.comment_date a{color:#a9a9a9;font-size:11px;font-weight:normal}
.comment_date a:hover{color:#a9a9a9;text-decoration:none}
.comment_body{margin-top:-72px;margin-left:60px;color:#26262c;position:relative;font-size:13px}
.comment_body p{line-height:1.4em;margin-top:-3px;color:#402f26;font-size:13px;font-weight:normal;word-wrap:break-word;padding-bottom:10px}
.comment_child .comment_body{margin-left:50px}
.comment_inner{padding:10px;margin-top:-5px}
div.comment_inner.comment_admin{background:none}
.blog-admin .comment_child{padding-left:7%}
.comment_wrap .comment_child{padding-left:0}
.comment_reply{font-weight:300!important;color:#222!important;font-size:11px!important;float:right}
.comment_reply:hover{text-decoration:underline;color:#5b81c8}
.comment_reply a{color:#222}
.comment_reply a:hover{text-decoration:underline;color:#5b81c8}
.unneeded-paging-control{display:none}
#comment-editor{width:100%!important;background:#e5e5e5 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3dJu1wlV51Z3SUcZDWgq7zyBCOMNDnTZQpwHnHkD5fCE3BcCVR6vSR7cPfu72nvWj_cWeSwTwLcEy9bwxJAApixQJT0M7eNJBA3rs2NL8M1YObfMNcW6c8BKChGaNm9DN2jfWuUwKKk/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;clear:both;width:100%}
.comment_emo_list .item{float:left;text-align:center;margin:10px 5px 0 0;height:40px;width:55px;color:#999}
.comment_emo_list span{display:block;font-weight:normal;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:46px;height:46px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR6Bgmm_8ZP8td7bSjz7kpI6wJRk6x0qSFwndziDeJCb0NLTWPpsYwvOrZQzk44QUJGJM8YZuTLp9QvfOZgmiQCdJx_RhqwQqnp7zXXdA9wOTEANh3gKqSv_Bpvz980KBcGqi-unAUWJae/s1600/anon.jpg) no-repeat;border-radius:100px;margin-top:-8px}
.comment_child .comment_avatar img{width:28px;height:28px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR6Bgmm_8ZP8td7bSjz7kpI6wJRk6x0qSFwndziDeJCb0NLTWPpsYwvOrZQzk44QUJGJM8YZuTLp9QvfOZgmiQCdJx_RhqwQqnp7zXXdA9wOTEANh3gKqSv_Bpvz980KBcGqi-unAUWJae/s1600/anon.jpg) no-repeat;border-radius:3px;margin-top:0}
.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/AVvXsEh3gsnV-wwYYM8A2HL6Po1UOgq5TRHuZOZOemjGuWZNxHqI_8OI0yC6fNVke4s_M4zE36-RfPNCrNViGJ9gF_QFi9pDj9ytNNHKire31OSz5DA4gEuko17ekVIXAtB5jfBOuDuhmyBxKxg/s1600/tempat-sampah.png) no-repeat 2% 50%;color:#efd4d4;line-height:22px;border:1px solid #c44d4d;padding:8px 15px 8px 45px;margin:-15px 0 5px 0;display:block;font-size:13px}
.comment-form p{background:#999;padding:15px 15px 14px 15px;margin:5px 0 5px 0;color:#f4f4f4;font-size:13px;line-height:20px;position:relative}
div.comment_avatar img[src='http://img1.blogblog.com/img/openid16-rounded.gif']{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlMPqZKTpycxkcDQa7szcJu8vwDvgbXajRxkYljpURSxhqJ23TOcmgL_VfUMvEXb3AKwJ5CqMF1jXIgv8DSxQ9TymW1JEEOjVpHPnzxVJDU9F7l4hhZSNj5bW91OduDkR8KdEGVRyqDx8/s45-c/gravatar.png)}
div:target .comment_inner{background:none;transition:all 15s ease-out}
div:target .comment_child .comment_wrap .comment_inner{background:none}
iframe{border:none;overflow:hidden}
.center{text-align:center}
img.cm-prev{max-width:400px;margin:10px auto;page-break-after:always;display:block;text-align:center!important}
.comment-note{padding:15px 20px 0 20px;height:100px;width:auto;border-bottom:1px solid #eaeaea}
.comment-noteright{width:50px;margin-right:18px}
.comment-noteleft{color:#aaa;display:block;padding:10px;border:1px solid #d5d5d5;border-radius:2px;position:relative;height:60px;width:86%;font-size:13px;float:right;margin-right:10px}
.comment-noteleft:before{content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpsRtrjLTkppChOBYGZogGQhr_rPx19-KMKjMg_jqkE3LfV8FgJNGXKg9GWj9wiysqC13KQxtJVVB1OAQY5ta1E0yR6O_cboObIVM_wvd8QKC_ZtCWGqI4uIif4XK5CaYMhyorr-KLSqM/s1600/top-cat.png');position:absolute;top:-4px;left:-12px}
.go-form{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-8HkH5s4uJsPXZ2CSbSEiO1F7Aur0651G75Cq2p_Uy3ca_0JBCjULb7cWojRRtlvROhIZFmU-XMCvTGUU1BFoyKZWhlbVU0VqqPy1tWNF_2EUKvlNF13zgnHkjrK44B8mwmkT3Zk32X8/s1600/gplus1.png)no-repeat right center;height:60px;border-top:1px solid #eee;margin-bottom:20px;position:relative}
.go-formbutton{padding:6px 38px 6px 18px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGgYupnT-o0xxg3On1CTF-LuplOzM8nSnHDrV4mAEBjB8EomkKgxBht62-akUjDgK22fZOyndJjUqALHIB5njyZ0M_8j0G7oPDv0F_LkXPd1tP4FA7f922LDkv40o6BPkETubsNtroCwI/s1600/gplus2.png)no-repeat right center;border:1px solid #d9d9d9;color:#26262c;font-size:13px;font-weight:normal;border-radius:3px;position:absolute;top:13px;left:20px}

Kemudian ganti code :
<b:includable id='comments' var='post'>...</b:includable>
dengan code berikut :
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<h3 id='comment-post-message'>
 <b:if cond='data:post.allowComments'>
              <b:if cond='data:post.numComments == 0'> Belum ada komentar </b:if> <b:if cond='data:post.numComments == 1'> 1 Komentar </b:if> <b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> Komentar </b:if>
           </b:if>
</h3>
<div class='comment-note'>
<span class='comment-noteright'>
<img src='//lh6.googleusercontent.com/-bd53NQ1I1ds/AAAAAAAAAAI/AAAAAAAAABs/gHAAl4G126g/s45-c/photo.jpg'/>
</span>
<span class='comment-noteleft'>
Silahkan berkomentar seusuai dengan tema Artikel di atas.
  </span>
</div>
<div class='go-form'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><span class='go-formbutton'>
Ke kolom komentar
  </span></a>
</div>
 <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'>
 <!--blacklist-->
<b:if cond='data:comment.authorUrl != &quot;http://www.blogger.com/profile/07892426638502951005&quot;'>
<b:if cond='data:comment.authorUrl != &quot;http://www.blogger.com/profile/06475674612387335141&quot;'>
<!--blacklist-->
   <div data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.isDeleted'>
<b:else/>
      <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>
     </div>
<script>
$(document).ready(function() {
    $(&#39;.comment_reply&#39;).click(function() {
        $(&#39;.cancel&#39;).show();
    });
});
</script>
     <div class='clear'/>
    </div>

    <div class='comment_body'>
     <div class='comment_name'>
      <b:if cond='data:comment.authorUrl'>
     <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='dofollow' target='_blank'><data:comment.author/></a>
       <b:else/>
       <data:comment.author/>
      </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/AVvXsEhjpq7JrDxvM3Kow5ZGrH89zU6XK9uvSw2cFcNKZgR3otGpjMgfCvWEu8P00QiQjD8Iee0cdM4vPaKTB-ikCMwx8u6rDdHeuNp5WgfjMO9BODKoaz2FqJj3w1Mn4rdMqEWl0MR2SzbpLDo/s1600/delete4_o.png' title='Hapus Komentar'/>
</a>
<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>
</span>
<span class='comment_date'><a expr:href='data:comment.url' rel='dofollow' title='comment permalink'>
                  <data:comment.timestamp/>
        </a></span>
</div>

   <p><data:comment.body/></p>

    </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'/>
     </b:if>
<b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/> - <data:comment.timestamp/></span>
      <div class='clear'/>
    </b:if>
    </div>
<!--blacklist-->
  </b:if></b:if>
<!--blacklist-->
   </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'>
     <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>
</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 = 4;//How threaded level that you want
                                Display_Emo = true;//Display emoticon or not? set "false" to no display
                                Replace_Youtube_Link = false;//Auto replace youtube link to iframe embedded, choose "false" to disable
                                Replace_Image_Link = false;//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 = [
                                ':)'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-tHA0kk_4jl1jEQByz95xtNYE97q4yCO-uYaKkETaOEId0t1LPFHkAGA6ZasMfC8ZsIcTD93FQL3BO5aRGcGkEcc9LCCUcJCbXwB5nDHnC3ySzS_p3oym7BvCp2T4Gfd2Qgxppg6CPg/s1600/smile1.gif',
                                ':('        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLv3VHdcdBepnDHNCA3vr4oS4zA-UZ80D8s_1-ehlJUaXAAyUF6X07uJ2A8KvzD2DhoYK7D_IjkFbbLrUpo4oP4st5POuMnI7lUjE-5TJIs01VkF_GaJ3PnzfITTve45wawZwjjnKtoc/s1600/sad.gif',
                                '=('        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd-c6z02FacqY4_cwH_hKZ-Uvp3nth-TaRfPcyhXs7tbbuDwq07yYA0hmJPQhbSvSkBTTB_VJo3Nad8fmNQefBclnp1eIPnDqvfzK5LSb3Nk4lmXvyOQdc1n6Ow-kil5couRJnueoo4sY/s1600/sadanimated.gif',
                                '^_^'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbdZ8j2exZ4ODxT-R5RYInAm21nVi25DgOnTpP3PvFA0NAlrWhyphenhyphentMYiuGSIp5XjaCVUNktP5hktDZQAVppAJJa7rI3cZu9tz9qCXOxu4JAn0XYap30SnB1BWt507CwkdPhsCGW2uh6T_w/s1600/smile.gif',
                                ':D'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfTxVwMsKltOUr5p7_gOrQKgH_dHTrGJ4G8zHp9yegGIEyTq710I7lWhhvVRoqkIamuojZ5xQBwcu-9hNHa0DyRfIV1GT43vq6eJ25zWFrOg8usbcXH3XQf1pNkkGm_1Xq6e-3E_v4tZ0/s1600/icon_smile.gif',
                                '=D'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZutyg49DbD5IHkh2s2AKr8Zi8nnWq06dyplenqth3CDyUYEru9_Ok2sGt0hrhXJSHdjIO3WM0ArLUs1dSAn4Cxu3ohpNvV2bVGPxTGQZi87kw7fxlNsuDo5cTeIhc8uVL4wRDxrj7B_Y/s1600/hihi.gif',
                       '|o|'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbIV0zkAMn7ratNPMqp9WDjVwKNd9t8l56Ar86BAJ_czz0rzny2AUT8smTSVmbQXeEV4ui6rWHxzKkeOxc28JHCAF_JAondCAAvMKZMpwELKRNirtZaTqLPakgx9RVpGYVs7JgPsJStXs/s1600/applause.gif',
                                '@@,'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNT6u6X18rLgFT0RokmUGJM8eX9VqorHT4WTdGS2BdEz8l19hmOoa22yCcCxZQUy_QNZV8FA1co0RTP8UNOs5cC47zWIHcBYwdvEpDZN6ZSzcjUoG1wggYJP4XdBW-mlfIQGUuE14I43Y/s1600/rolleyes.gif',
                                ' ;)'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjssLC0tV_QyRLUWb03mHamdkZZA1H1JpAZUmLU2nFg_XeAuVLmZ_IsHITO6o3OB2LKFioxbf-um9QqGQSgqEtsTDjpmwkw2qhycDRICT6LHoMAwETBHBBp1FT1RaZ_Khoxx4cXICenGm4/s1600/wink.gif',
                                ':-bd'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzCr_j0EZMXiTnj-G3CK43PE2c6XMCkAsCMJoIOppEEpCj4WyQaNLIwaYPzO7Z1h4tQnAv74w_QTqNJ1bSfFb1snjmaZl5cN6is5wUAOHiM7HlecKgrvSYwpTznjwGhTP5a0d5d81ZRnI/s1600/thumb.gif',
                                ':-d'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-s0Qc3I3QgelocrhDeQhXvU_bETQ7tQdHhZbOkaeu951LONZKJEEQpyLAflBvmcdxudQSYw_hCIMUe1uxR8rz54FIUE3xAE5nNDJZ_SFlJf5pMkZFDX25skZWM1stfNy4jXFVzj4CpU/s1600/thumbsup.gif',
                                                  ':P'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDara2jXf0hLQSh7zffvwa75CbftzWfyGMOlf6YR-hvok3uS0sVAgavlI78Pg3N1OhA7Ho56i5rk1KXUqPXSZlzk6qUSrTe4qDrd8hGM48vp9oMHpTVjmoWC1Atq85hkmJ6nLj__S9MAs/s1600/wee.gif',
                       ':hah:'        ,'http://www.freesmileys.org/smileys/smiley-laughing021.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='.X';3 Z=$('#J-W').D('y');w 1E(F){3 1G=' nrtf1V1W1X292a2c2i2n2q2r2t2v2C2D2I2J1L1N1O1P1Q1S1T';G(3 i=0;i<F.5;i++){b(1G.g(F.28(i))!=-1){F=F.d(0,i);1e}}C F}$('#2l .1y p').k(w(B,8){b(2B){3 m='1f://13.11.10/1h?v=';3 7=8.g(m);H(7!=-1){1u=8.d(7);K=1E(1u);3 Y=K.g('&');3 P='';b(Y==-1){P=K.d(m.5)}15{P=K.d(m.5,Y)}3 1A='<1r E="1Y" y="1f://13.11.10/1Z/'+P+'?21=1" 22="0" 23></1r>';8=8.d(0,7)+1A+8.d(7+K.5);7=8.g(m);b(7==-1){m='24://13.11.10/1h?v=';7=8.g(m)}}}b(27){3 18='';3 u=8;G(3 i=0;i<1i.5;i++){3 m='.'+1i[i];3 o=u.I();3 7=o.g(m);H(7!=-1){l=u.d(0,7+m.5);o=l.I();3 x='2o://';3 z=o.g(x);3 M='';H(z!=-1){M=x.V();l=l.d(z+x.5);o=l.I();z=o.g(x)}x='2L://';o=l.I();z=o.g(x);H(z!=-1){M=x.V();l=l.d(z+x.5);o=l.I();z=o.g(x)}b(M==''||l.5<6){1e}l=M+l;18+=u.d(0,7+m.5-l.5)+'<U y="'+l+'" E="2x"/>';u=u.d(7+m.5);o=u.I();7=o.g(m)}}8=18+u}b(1g){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 R='<U y="'+A[i+1]+'" E="1k"/>';7=8.g(A[i]);H(7!=-1){8=8.d(0,7)+R+8.d(7+A[i].5);7=8.g(A[i])}}}b(1K){3 5=Q.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){H(1){3 u=8.V();7=u.g(Q[i]);b(7!=-1){8=8.d(0,7)+Q[i+1]+8.d(7+Q[i].5)}15{1e}}}}C 8});$('.1M').k(w(B,8){b(1g){3 5=A.5;b(5%2==1){5--}3 12='';G(3 i=0;i<5;i+=2){3 1v='<1w>'+A[i]+'</1w>';3 R='<U y="'+A[i+1]+'" E="1k"/>';12+='<O E="1R">'+R+1v+'</O>'}C 12}});$('.1B .1y p').k(w(i,h){14=h.V();B=14.g('@<a 16="#c');b(B!=-1){17=14.g('</a>',B);b(17!=-1){h=h.d(0,B)+h.d(17+4)}}C h});w 1j(j){r=j.g('c');b(r!=-1)j=j.d(r+1);C j}w 1l(j){j='&20='+j+'#%1m';1n=Z.1o(/#%1m/,j);C 1n}w 1p(){k=$(q).k();$(q).k('');q='.X';$(q).k(k);$('#J-W').D('y',Z);$('.25').26()}w 1q(e){j=$(e).D('19');j=1j(j);k=$(q).k();b(q=='.X'){1s='<a E="2b-J" 16="#1t" 2d="1p()">'+2e.2f+'</a><a 2g="1t"/>';$(q).k(1s)}15{$(q).k('')}q='#2h'+j;$(q).k(k);$('#J-W').D('y',1l(j))}1a=2j.2k.16;1b='#J-2m';1c=1a.g(1b);b(1c!=-1){1x=1a.d(1c+1b.5);1q('#2p'+1x)}G(3 i=0;i<T.5;i++){b('1z'2s T[i]){3 j=T[i].1z;3 1d=2u($('#c'+j+':N').D('1C-1D'));$('#c'+j+' .2w:N').k(w(B,8){3 L=T[i].19;b(1d>=2y.2z){$('#c'+L+':N .2A').1F()}3 S=$('#c'+L+':N').k();S='<O E="1B" 19="c'+L+'" 1C-1D="'+(1d+1)+'">'+S+'</O>';$('#c'+L).1F();C(8+S)})}}3 1H=$("#2E");1H.2F('.2G U').2H(w(){3 1I=$(1J).D('y');$(1J).2K().D('y',1I.1o(//s[0-9]+(-c)?//,"/1U-c/"))});',62,172,'|||var||length||check_index|oldhtml|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||temp_html||function|http_search|src|find_http|Emo_List|index|return|attr|class|str|for|while|toUpperCase|comment|yt_link|child_id|save_http|first|div|yt_code|Force_Tag|img_html|child_html|Items|img|toLowerCase|editor|comment_form|yt_code_index|Cur_Cform_Url|com|youtube|newhtml|www|temp|else|href|index_tail|save_html|id|cur_url|search_formid|search_index|par_level|break|http|Display_Emo|watch|Replace_Image_Ext|Valid_Par_Id|comment_emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|iframe|reset_html|origin_cform|ht|img_code|span|ret_id|comment_body|parentId|yt_video|comment_wrap|data|level|trim|remove|whitespace|avatar|ava|this|Replace_Force_Tag|u2008|comment_emo_list|u2009|u200a|u200b|u2028|item|u2029|u3000|s45|x5b|x5d|x7c|comment_youtube|embed|parentID|autohide|frameborder|allowfullscreen|https|cancel|hide|Replace_Image_Link|charAt|x7d|x3c|add|x3e|onclick|Msgs|addComment|name|r_f_c|x0b|window|location|comment_block|form_|xa0|HTTP|rc|u2000|u2001|in|u2002|parseInt|u2003|comment_child|comment_img|Config|maxThreadDepth|comment_reply|Replace_Youtube_Link|u2004|u2005|comments|find|comment_avatar|each|u2006|u2007|show|HTTPS'.split('|'),0,{}))

                            //]]>
                              </script>
</b:includable>

Setelah itu tinggal simpan template agan. Lihat hasilnya.

Sekian artikel tentang cara membuat thread comment blogger mirip google plus, jika ada pertanyaan silakan bertanya :)

Share this:

Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Show Parser Box

Disqus CommentsLoadHide