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/AVvXsEj0i5b0nAqtRpfxY9AK2Ut0pGcsRzlrtLitGeHx_xr3wkCmcvWNoT1DLPnipifEYuPA0ORPbZtwXAm_qVMuQWIPeTQis0HEaJqKUekaf2SF-soJrio48cA5ixNX2RhoezbIWyXCNE6Tjd5m/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/AVvXsEjUgrqs151F5oXKRFcRTw_IdYVshnT149WaqTRmDfFd1KJXtD3tKxfHhSyH-KT-qQcDdydto-WQ5ubIiIhJS2-0m8R94OYrusrTe_zg0GJEFA_RTXzozXxfCHIIYwTiiKwP77Z9EBYeu4k/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/AVvXsEj0i5b0nAqtRpfxY9AK2Ut0pGcsRzlrtLitGeHx_xr3wkCmcvWNoT1DLPnipifEYuPA0ORPbZtwXAm_qVMuQWIPeTQis0HEaJqKUekaf2SF-soJrio48cA5ixNX2RhoezbIWyXCNE6Tjd5m/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/AVvXsEj0i5b0nAqtRpfxY9AK2Ut0pGcsRzlrtLitGeHx_xr3wkCmcvWNoT1DLPnipifEYuPA0ORPbZtwXAm_qVMuQWIPeTQis0HEaJqKUekaf2SF-soJrio48cA5ixNX2RhoezbIWyXCNE6Tjd5m/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/AVvXsEgYIUuJXhizD1h2dcIAD_Cx6-KH7lfQxXgYoJxlM6df15Z3PJaVdN9qKJjqaN1m8YIZz_3hcoWzGByhMRkMfGh-iS4b5h0ahF4AQX4n5xRpdWWVRsZL1to0nAFsXTNDUPhbjQVq1l40eow/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/AVvXsEhADMdykuaywtV6y1qzRWeDCcHWIueKhSBawGzBgsaHei0aMIVMaC1r7AU6KNO7UnGqSJ8s8OBEXTcWHJbhRRNmmiRUF67t1qzu8hmzy9lNyHIiS4en3QPYWT0VKmayYf_NxScSc8YZs5Y/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/AVvXsEjy9NMNzlXxKKXeXXe69clCmjkBdlQF5-4s7VEZjciL0yb4n0hbpv9RitayALYaUr9zummXxF-ykA8RuZpHmtP8lsQqIoA5GaAgqNbpCMjS4RKiwZESyOVQgGU7vp7pkdOeQnGy1L8RRfM/s1600/top-cat.png');position:absolute;top:-4px;left:-12px}
.go-form{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHI3qsYAZ1gK8A_73Jgs5BcCR9FZSkTYe6hksnifnM5rhvgnThhzCffAateYEAsyvaUbR5VMGse8QqgbjirdZtzXe9vxcEXEmyGTOxQsHm79vu1pnmKVZxcfy_EpdO8gTI57a2EV59wk4/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/AVvXsEhu2PCxTWQmJ1OQ6s_a2AgAK7I753S5IYJXjuI2rTMcWXYNd8mAr-MhbIQRpA046VKwd7zcucPNiXfKLAq8UavM6DAxE9QxDzmhoET20DJGs6K6KwRi3l2hQSCUsCWp8plS3F5la11Pd0s/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/AVvXsEhKUzOhCNcdiO7NZvDeA9kVmR7FD0Z5WZLk2FF-OyegRgboxI_J2bCHtwphyphenhyphenjBxztIKiZZ_B56JVYkjDxeW338a_EgQ6ID9h3mVqgB6i14eBBLQoAKKm4p2T7NRW29G9qKwMb1OhAmp3hQ/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/AVvXsEgcG0krjKzNRVn2wrjvNME-sHowQE4Lyyzc33iBVkjvLwQNru_tL4SQblpR7PjuHKj43q1IdFn8urc1aJI3wrN9cRJ3Ay6My4qAPTZfpXpkUYNZzfmiwPQzazw3k42FloxBrXF4_DMZxCo/s1600/smile1.gif',
                                ':('        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL4kpDP7IVxLxfq8pumU5PRtOFZKgP1cIFUc5thl4PoQTEGUQO6RybiKjEvk-fQCsld5L2fFdcYGlsTtVXBmD8sEFR_54ugIzqofHDkucz33t_KIpgu2gW9cCFfbXu2VHtK0NQRPt1n8U/s1600/sad.gif',
                                '=('        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiCfj5ESsV47LL-JynBdS6gGLcJcX-skcZV3c6tQ1um9eigwleJqC_IDUwU1keNTMyreMRE76Ix2Qryw7cXwBfaEAgJSMpZUyaISYL0KTD6sS0DR-pQMAS4IobblA2lJZI6N54SjamrgA/s1600/sadanimated.gif',
                                '^_^'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAPr70QV39jzVYrYOCgFl15raht6dEwbbSFsotAHnDxKjUlRJmt1Q0yUKMJB6XPxy3frV2zaMuyP-LAbqntMliuiHIQcFBMBEHQ-hyl__BzHGrnPSv5zWePHPYQH_mKvqY6vKpPYx6fog/s1600/smile.gif',
                                ':D'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieX6lpU0iRojLpptzXGVER9-L9Lwkfv38sq6pPynN9ZBEJ575A1bR9Md4WxjtnKqgNvu_iTvw5VG-RuFjgWwKLXnABvr78vs1cjx9PKQ21Lysb9r3x6wIBmqadCW3T8UK5t7X7ufxVRVQ/s1600/icon_smile.gif',
                                '=D'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmJlmxrfBXq17URFI6Vdbua2Du-Nf733FPV4peP71-Kj05b6jNhsHBWQ7HQ7Lnbtxr7jWN99utCxTfEUueFeWYf_UUouOG5ApRMavDBKb-nP9YONqJ0ybaL4NPXbFJqej2aOXRNQ8lyuY/s1600/hihi.gif',
                       '|o|'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif6mTdurBviLZgJ29ksjdBPO8DlhleOgUspO7-anhcrP_ZHeyLeXzArniUEhLCf8fA38lSVVt1dQv46iKcdEyZxj7IpeawGghA1kQ7TJJ7DhLspKPl0r6xIeAxoXMynvVKKNVK9Ehbhi8/s1600/applause.gif',
                                '@@,'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVpObFPf06tz16Vx6ORztLlBh0umhV_NhjprHGpuUQMtdgTkOqtlUN3p6JNyxw3sgvr05Z__auEDZ6zMB7_JRmhT5j_WF2WXhI27z6E0QJLPMZ2Emjucv8LBYGh7Twyw-FAnNsdIUw2U/s1600/rolleyes.gif',
                                ' ;)'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifUQv8hHl6IXzssQhd50dNjtuLdUP3ox7rdLe8JuMLK6E_nonuYhk6IEGrcpAORyKsPMCnmMS9J48EFuVjccLsEs-ktgira6gqmjjhXLLruvudaUx2vsdyx8c3zy7fOQyVjjCvrtMX8ks/s1600/wink.gif',
                                ':-bd'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEAtwBkeAd1dqPDthSfgwozVdIos2E7pT-IXRgGxNuBZZZC4SPjedBbP0qaNUbTtOri_kgw0J2rRmz2dhITcIN-Rj1Ff71_P_XcMNezZFfIkS2p3DlaJxL5ieEHqWMCKYUCA-hvS0vXtk/s1600/thumb.gif',
                                ':-d'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEOiLlsb7qUHal8lCnNVC4UUjCah9xv9SobOW_xVNcazf8g0uDfDMf73cWKXh5FP7nbWIwqB1sGlXfcyS8R9opYmfRrv29CWwQh3u0EJbHzpHwY_VmXBIIWZAHwcPO8GCv2E6af6CC2VI/s1600/thumbsup.gif',
                                                  ':P'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBn6GMlvd_kcQ0SOdskCJa-ldiDdYkDyJI5d__jtahlGlP_d-FUw3T14CdUnkL7aPVnPtKYJTRJ6Gtfc9PbZ2I_9syEyXh2znANkJGVYqj9OSw1uKwjZMIILESYVdus5RZzpDSTGIxsC8/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 :)


4 comments:

  1. gan share cara ada gmbar komentar yang di pojok atas kanan dong yng di smping ( cari disini ) :D

    ReplyDelete
  2. Atau kalau nggak sabar, cari saja di google juga banyak gan..
    "Cara membuat notifikasi komentar ala google plus"

    ReplyDelete
  3. Komentar ini telah dihapus oleh pengarang.

    ReplyDelete

Artikel Terkait

Disqus Comments