Cara Memasang Komentar Blogger, Disqus, Dan Facebook Show Hide

15:23:00
Cara Memasang Komentar Blogger, Disqus Dan Facebook Show Hide

Selamat datang agan atau aganwati kali ini saya akan berbagi tips blogging yaitu cara memasang komentar blogger, disqus, dan facebook dengan efek show hide, artikel ini saya mendapat referensi dari blog +Kompi Ajaib , nah di tutorial ini saya hanya ingin mengubah sedikit pada bagian komentar blogger default yang akan saya ubah menjadi threaded comment blogger, nah langsung saja kita mulai tutorialnya;


Demo

Cara Memasang Komentar Blogger, Disqus, Dan Facebook Show Hide


Untuk Threaded Comment
Cara Memasang Komentar Blogger, Disqus, Dan Facebook Show Hide


Langkah

1. Login pada blog anda masing-masing,

2. Setelah itu pada menu dashboard pilih menu template lalu edit template,


3. Lalu cari kode </head>  setelah itu copy script di bawah ini,

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
#comments2{clear:both;padding:10px 0;margin-top:0;font-family:Roboto,Arial,sans-serif}
#comments2 h3{margin:0;font-size:18px;font-weight:500;color:#666;padding-bottom:10px;border-bottom:1px solid #ddd}
#comment_block{padding-top:25px}
.comment-avatar { width : 42px; height : 42px; background : rgba(0, 0, 0, 0.4); box-shadow : 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2); padding : 5px; 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(&#39;http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/s1600/anon.jpg&#39;) no-repeat; } 
.comment_name a { font-family : &quot;Oswald&quot;, Arial, Sans-serif; padding-bottom : 10px; font-size : 14px; text-decoration : none; font-weight : normal; } 
.comment-admin .comment_name { font-family : &quot;Oswald&quot;, Arial, Sans-serif; padding-bottom : 10px; font-size : 14px; text-decoration : none; font-weight : normal; } 
.comment-admin .comment_name:after{ padding : 0; margin : 0 0 0 10px; } 
.comment-admin .comment_date { font-weight : normal; font-size : 11px; } 
.comment_name { font-family : &quot;Oswald&quot;, 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 : #fff; border : #bdc3c7 solid 1px; padding : 15px; color : #555; } 
div.comment-inner.comment-admin { background : #999; border-bottom:0;} 
.comment_body p { line-height : 1.5em; margin : 5px 0 0 0; color : #666; font-size : 13px; overflow-wrap : break-word; padding-bottom : 10px; } 
.comment-inner { padding : 15px; margin : 5px 0 5px 0; background-color : #666; border-bottom:0;} .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 : rgba(0, 0, 0, 0.3); box-shadow : 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2); font : 11px/18px sans-serif; transition : background-color 1s 0s ease-out; } 
.comment_reply:hover { text-decoration : none !important ; background : rgba(0, 0, 0, 0.6); box-shadow : 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2); } 
.unneeded-paging-control { display : none; }
#comment-editor { width : 100% !important ; background : url(&#39;http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif&#39;) 50% 30% no-repeat #e1e3e6; border-radius : 5px; margin-bottom : 20px; position : relative; } 
.comment-form { max-width : 100% !important ; } 
.comment_form a { text-decoration : none; text-transform : none; font-weight : bold; font-family : &quot;trebucet ms&quot;, 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 : 5px 5px 5px 5px; height : 40px; width : 55px; color : #fff; } 
.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; } 
.avatar img { width : 42px; height : 42px; background : url(http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/s1600/anon.jpg) no-repeat; } 
.comment-delete { display: block; background: rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4) inset, 0px 1px 0px rgba(255, 255, 255, 0.2); color: #fff !important; font: 11px/18px sans-serif; text-align: center; margin: 4px -4px 0px -5px; padding: 1px 0px; border-radius: 2px; transition: background-color 1s ease-out 0s; }
.comment-delete:hover { background: rgba(0, 0, 0, 0.6); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2); }
.deleted-comment { position: relative; display: block; background: url(&#39;https://scontent-sin.xx.fbcdn.net/hphotos-prn1/t39.1997-6/p128x128/851556_690521150961758_1331014687_n.png&#39;) 10px center no-repeat scroll #333; color: #fff; margin: 10px 0; padding: 45px 20px 45px 100px; border-radius: 5px; border-bottom: 1px solid rgba(0,0,0,.1); font-weight: bold; text-align: right; } 



.comment-form p { background :#e1e3e6; padding : 15px 15px 14px 15px; margin : 5px 0 5px 0; color : #555; font-size : 13px; line-height : 20px; border-radius : 5px; position : relative; } 
div.avatar img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] { content : url(&#39;http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s45-c/gravatar.png&#39;); } 
div:target .comment-inner { background : #e74c3c; border-bottom:3px solid #c0392b; transition : all 15s ease-out; } 
div:target .comment_child .comment_wrap .comment-inner { background : #9b59b6; border-bottom:3px solid #8e44ad; transition : all 15s ease-out; } 
iframe { border : none; overflow : hidden; } 
.thanks {float: right; margin-top: -68px; margin-right: 15px; padding: 6px 12px; border: 1px solid #ddd; border-radius: 3px; position: relative; background: #f8f8f8; font-size: 13px; color: #000;}
.blogger-box,.comment-form p,.disqus-box,.facebook-box{-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.blogger-bar,.comment-text,.disqus-bar,.facebook-bar{font-family:Roboto,Arial,sans-serif;font-weight:500;color:#555}
iframe.blogger-iframe-colorize{max-height:250px}

.blogger-bar,.disqus-bar,.facebook-bar{display:inline;float:right;padding:5px 10px;cursor:pointer;background:#eee}
.blogger-bar,.disqus-bar{margin-left:5px;margin-top:20px;border-radius:3px 3px 0 0;border:1px solid #ddd;border-bottom:none}
.facebook-bar{margin:20px 20px 0 5px;border-radius:3px 3px 0 0;border:1px solid #ddd;border-bottom:none}
.blogger-box,.disqus-box,.facebook-box{width:100%;padding:0;border-top:1px solid #ddd;box-sizing:border-box}
.blogger-box,.facebook-box{display:none}
.fb-comments,.fb_iframe_widget iframe,.fb_iframe_widget span{width:100%!important}
.fb-comments{padding:0!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.btncurrent{padding:5px 10px 6px;margin-bottom:-1px;background:#fff}
.comment-text{display:inline;float:left;padding:5px 10px 5px 0;margin-top:20px}
.comment-text:after{content:'\f061';font-family:FontAwesome;color:#555;margin-left:5px}
/*]]>*/
</style>
</b:if> 

4. Paste script tersebut tepat di atas kode </head>,


5. Setelah itu cari script seperti di bawah ini,

 <b:includable id='comment-form' var='post'>...</b:includable>
<b:includable id='commentDeleteIcon'var='comment'>...</b:includable>
<b:includable id='comment_count_picker'var='post'>...</b:includable>
<b:includable id='comment_picker'var='post'>...</b:includable>
<b:includable id='comments' var='post'>...</b:includable> 

Cara Memasang Komentar Blogger, Disqus, Dan Facebook Show Hide
6. Setelah itu ganti semua script yang sudah anda cari dengan script di bawah ini,

             <b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' expr:title='data:postCommentMsg' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
<div id='threaded-comment-form'>
      
              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
      </div>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&quot;<data:post.appRpcRelayPath/>&quot;, &quot;<data:post.communityId/>&quot;);
    </script>
  </div>
</b:includable>
            <b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
    <b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <b:else/>
      <a class='comment-delete' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' title='delete comment'><i class='fa fa-trash'/></a>
    </b:if>
  </span>
</b:includable>
            <b:includable id='comment_count_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>
    </span>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>
      </span>
    <b:else/>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
        <data:post.commentLabelFull/>:
      </a>
    </b:if>
  </b:if>
</b:includable>
            <b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
    <b:else/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='comments'/>
      <b:else/>
        <b:include data='post' name='comments'/>
      </b:if>
    </b:if>
  </b:if>
</b:includable>
            <b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='facebook-bar commentbtn' onclick='toggleVisibility(&apos;facebook-box&apos;)'>
Facebook
</div>
<div class='blogger-bar commentbtn' onclick='toggleVisibility(&apos;blogger-box&apos;)'>
Blogger
</div>
<div class='disqus-bar commentbtn btncurrent' onclick='toggleVisibility(&apos;disqus-box&apos;)'>
Disqus
</div>
<div class='comment-text'>
Pilih Sistem Komentar Yang Anda Sukai
</div>
<div class='clear'>
</div>
<div class='disqus-box' id='disqus-box'>
<div class='comments' id='comments'>
<b:include data='post' name='disqus-comment'/>
</div>
</div>
<div class='blogger-box' id='blogger-box'>
<div class='comments' id='comments2'>
    <a name='comments'/>
 <b:if cond='data:post.allowComments'>
<h3><b:if cond='data:post.numComments == 0'> 0 Comments </b:if><b:if cond='data:post.numComments == 1'> 1 Comments </b:if> <b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> Comments </b:if></h3>
<b:if cond='data:post.commentPagingRequired'>
 <span class='paging-control-container'>
  <a class='Thumbtooltip' expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
  &#160;
  <a class='Thumbtooltip' expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
  &#160;
  <data:post.commentRangeText/>
  &#160;
  <a class='Thumbtooltip' expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
  &#160;
  <a class='Thumbtooltip' 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 <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == &quot;true&quot;'><data:label.name/></b:if></b:loop></b:if>&#39;&gt;
    </b:if>
    <div class='comment-header'>
     <div class='comment-avatar'>
      <div class='avatar'>
       <img class='ThumbTooltip' expr:alt='data:comment.author' 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='Reply Comments'>Balas</a>
<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' title='Delete Comments'>Hapus</a>
     </div>
<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='nofollow' target='_blank'><data:comment.author/></a>
   <b:else/>
  <data:comment.author/> 
</b:if>
        <span class='comment_date'><data:comment.timestamp/></span>
      </div> 
<b:if cond='data:comment.isDeleted'>  
<span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
      <p><data:comment.body/></p>
<b:if cond='data:post.numComments == 1'>  <div expr:class='&quot;item-control &quot; + data:comment.adminClass' style='margin-top:10px;margin-bottom:15px;border:1px solid #c94a36;background:#e55e48;padding:5px 10px;color:#FFF;border-radius:3px'>Selamat <b><data:comment.author/></b> Anda menjadi komentator pertama pada artikel ini, beri komentar terus agar jadi Top Komentator..!!!</div></b:if>
<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'>   
   <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>
  <b:if cond='data:post.allowComments'>
<b:include data='post' name='threaded_comment_js'/>
  </b:if>

                    
       <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 = true;//Embed video YouTube, ketik "false" untuk mendisable
        Replace_Image_Link = false;//Auto replace link image,  ketik "false" untuk mendisable.
                                Replace_Force_Tag = true;//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 = [
        ':thumbup'	,'https://googledrive.com/host/0B7H_GQEvKCj1SmIxOXhHalV2ZVE/jempol1.gif',
':2thumbup'	,'https://googledrive.com/host/0B7H_GQEvKCj1SmIxOXhHalV2ZVE/jempol2.gif',
':iloveindonesia'	,'https://googledrive.com/host/0B7H_GQEvKCj1SmIxOXhHalV2ZVE/I-Luv-Indonesia.gif',
':ilovekaskus'	,'https://googledrive.com/host/0B7H_GQEvKCj1SmIxOXhHalV2ZVE/s_sm_ilovekaskus.gif',
':nohope'	,'https://googledrive.com/host/0B7H_GQEvKCj1SmIxOXhHalV2ZVE/nohope.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>
</div>
<div class='facebook-box' id='facebook-box'>
<div class='comments-fb'>
<b:include data='post' name='fb-comments'/>
</div>
</div>
</b:if>
</b:includable> 


7. Kemudian cari script di bawah ini,

 <b:includable id='threaded-comment-form' var='post'>...</b:includable>
<b:includable id='threaded_comment_js' var='post'>...</b:includable> 

Cara Memasang Komentar Blogger, Disqus, Dan Facebook Show Hide

8. Setelah itu ganti semua script tersebut dengan script di bawah ini,

 <b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
<div id='form-wrapper'>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
    <b:else/>
<div id='threaded-comment-form'>
 
              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
      </div>
    </b:if>
</div>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&quot;<data:post.appRpcRelayPath/>&quot;, &quot;<data:post.communityId/>&quot;);
    </script>
  </div>
</b:includable>
            <b:includable id='threaded_comment_js' var='post'>
  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;
       //<![CDATA[
function downloadJSAtOnload3(){var d=document.createElement("script");d.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/threaded-comment.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload3,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload3):window.onload=downloadJSAtOnload3;      //]]>
  </script>
</b:includable> 


9. Setelah itu cari kode </body>, lalu copy script di bawah ini

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
var disqus_shortname="USERNAME DISQUS";
var disqus_url = disqus_blogger_current_url;

(function () {
    "use strict";
    var get_comment_block = function () {
        var block = document.getElementById('comments');
        if (!block) {
            block = document.getElementById('disqus-blogger-comment-block');
        }
        return block;
    };
    var comment_block = get_comment_block();
    if (!!comment_block) {
        var disqus_div = document.createElement('div');
        disqus_div.id = 'disqus_thread';
        comment_block.innerHTML = '';
        comment_block.appendChild(disqus_div);
        comment_block.style.display = 'block';
        var dsq = document.createElement('script');
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.body).appendChild(dsq);
    }
})();

!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");

    var divs = ["disqus-box", "blogger-box", "facebook-box"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }

$(".commentbtn").click(function (e) {
$(this).addClass("btncurrent").siblings().removeClass("btncurrent");
});
//]]>
</script>
</b:if> 

Ganti USERNAME DISQUS dengan username Disqus anda!


Nah itu saja dari saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar anda, terima kasih




Referensi script http://www.kompiajaib.com/

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • 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.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

9 Comments

Dionimouz 28 May 2016 at 09:10

test

Vin Vellicia 11 June 2016 at 17:19

gagal gan

Renaldy Ramadani 29 June 2016 at 15:58

coba liat linknya :D

Agung Media 13 September 2016 at 16:19

gagal gan..

Renaldy Ramadani 24 September 2016 at 14:03

coba liat linknya gan

Agung Media 14 January 2017 at 18:11
This comment has been removed by the author.
Agung Media 14 January 2017 at 18:20

http://kios-movie.blogspot.com

Renaldy Ramadani 20 January 2017 at 13:22

kayaknya templatenya ga support gan

Sugeng Hariyanto 14 August 2017 at 14:16

kalau ngerubah ukuran di css nya yang mana profil