Memasang Komentar Disqus, Blogger, Facebook Dengan Show Hide Dan Defer JS

Memasang Komentar Disqus, Blogger, Facebook Dengan Show Hide Dan Defer JS

Bola Hero Gawai

Memasang Komentar Disqus, Blogger, Facebook Dengan Show Hide Dan Defer JS

Memasang Komentar Disqus, Blogger, Facebook Dengan Show Hide Dan Defer JS
Sebenarnya saya pernah membuat beberapa postingan tentang pemasangan beberapa sistem komentar dengan show hide, namun kali ini saya membuat show hide komentar Disqus, Blogger, dan Facebook yang sedikit berbeda karena menggunakan javascript yang berbeda dari sebelumnya serta kali ini kita juga mendefer js komentarnya agar loadingnya tidak mengganggu loading blog.

Untuk demonya seperti pada gambar animasi gif di atas atau bisa dicoba di blog ini yang sepertinya akan terus saya gunakan.

Bagi yang ingin mencobanya juga silahkan ikuti langkah-langkahnya di bawah ini.

1. Kode CSS
Silahkan simpan kode CSS ini di atas kode </head>. Jika sebelumnya sudah memasang komentar blogger silahkan hapus kode CSS komentar blogger sebelumnya.


<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_header{margin-left:5px}
.comment_avatar{height:48px;width:48px;background:url(//2.bp.blogspot.com/-KjVxDap0Bzs/Uc7Jfm_9VWI/AAAAAAAAEqs/jD56hYNIm88/s48/anon48.gif) center center no-repeat #F0F0F0;float:left;margin-top:-1px;margin-right:10px;margin-left:-5px;overflow:hidden;border-radius:3px}
.comment_admin .comment_author_flag,.comment_reply,a.comment-delete{border-radius:3px;text-decoration:none}
.comment_name{line-height:19.5px;display:inline-block;text-decoration:none;position:relative;margin-top:-3px}
.comment_name a{text-decoration:none;font-weight:500}
.comment_name a:hover{color:#0088b2;text-decoration:none}
.comment_service{margin-right:10px;margin-top:2px;position:relative;line-height:1em}
.comment_body p{font-size:16px;color:#444;line-height:1.3em;font-weight:300;margin:5px 0}
.comment_body p img{vertical-align:middle}
.comment_body{margin:-12px 0 10px 47px;padding:0 10px 10px;position:relative;z-index:1}
.comment_date{color:#999;font-style:italic;font-size:11px;line-height:1.2em;cursor:pointer;font-weight:400;margin-right:20px}
.comment-set{margin-bottom:30px}
.comment_child .comment_body{margin-top:-5px;margin-bottom:10px;margin-left:39px}
.comment_child .comment_wrap{padding-left:50px}
.comment_reply{cursor:pointer;color:#f1f1f1!important;font-size:12px;font-weight:500;margin-top:5px;margin-right:10px;padding:3px 5px;float:left;background:#666}
.comment_reply:hover,a.comment-delete:hover{text-decoration:none;background:#888!important}
.unneeded-paging-control{display:none}
.comment_reply_form{padding:0 0 0 48px}
.comment_reply_form .comment-form{width:100%}
.comment_reply,.comment_service a{display:inline-block}
.comment_avatar *{max-width:1000%!important;display:block;max-height:1000%!important;width:48px!important;height:48px!important;margin-right:10px}
.comment-form,.comment_img,.comment_youtube{max-width:100%!important}
.comment_child .comment_avatar,.comment_child .comment_avatar *{width:40px!important;height:40px!important;float:left;margin-right:10px}
.comment_form{margin-top:-20px}
.comment_form a{color:#444;text-decoration:none;font-size:16px;font-weight:700}
.comment_form a:hover{color:#fff}
.comment_author_flag{display:none}
.comment_admin .comment_author_flag{background-color:rgba(34,59,74,.3);display:inline-block;color:#fff;font-family:arial;font-size:10px;font-weight:700;padding:2px 5px;line-height:1em;position:absolute;top:2px;right:-51px}
a.comment-delete{color:#f1f1f1!important;font-size:12px;font-weight:500;margin:5px 0 0;padding:3px 5px;float:left;background:#666}
#comment-editor{width:100%!important;background:url(data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7) 50% 30% no-repeat #fff;margin-top:10px;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.blogger-box,.comment-form p,.disqus-box,.facebook-box{-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.comment-form{margin-top:25px!important}
.comment_emo_list .item{float:left;text-align:center;height:40px;width:41px;margin:10px 0 0}
.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444}
.comment_youtube{width:400px;height:225px;display:block;margin:auto}
.comment-form p{background:#666;padding:10px 10px 5px;margin:5px 0;color:#eee;font-weight:300;font-size:16px;font-family:Roboto,sans-serif;line-height:1.3em;width:100%;border-radius:3px;position:relative;box-sizing:border-box}
.comment-form p:after{content:"";width:0;height:0;position:absolute;bottom:-15px;left:15px;border:8px solid transparent;border-color:#666 transparent transparent}
.deleted-comment{display:block;color:#efefef;font:italic 13px Arial;margin-top:-10px;background:#DB6161;padding:10px}
.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}
.small-button a{color:#f1f1f1!important}
.small-button a:hover{color:#fff!important}
.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>

Namun kadang tampilannya ada yang sedikit berbeda karena tiap blog memiliki kode-kode yang berbeda-beda juga, jadi jika tampilannya kurang pas maka sesuaikan pada kode CSS-nya.

2. Kode HTML
Pada langkah-langkah ini kita akan mengganti kode HTML komentar blogger dan menyimpan kode-kode komentar Disqus dan Facebook, jadi saya harap Anda teliti pada langkah ini agar kodenya berjalan dengan baik.

Silahkan cari kode yang seperti di bawah ini atau seperti pada gambar 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>

Kode-kode komentar Blogger

Kemudian silahkan ganti semua kode di atas dengan kode 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'>
      <p><data:blogCommentMessage/>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'><i class='fa fa-smile-o'/></a></span><span id='hide-emo' style='display:none'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'><i class='fa fa-smile-o'/></a></span>
</span>
  </p>
<div id='emo-box' style='display:none'>
  <div class='comment_emo_list'/>
</div>
      <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>
      </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'>
        <b:if cond='data:post.allowComments'>
         <h3 id='total-comments'><data:post.commentLabelFull/></h3>            
         <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 comment-set' data-level='0' 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_area'>
             <div class='comment_header'>
             <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
              <div class='comment_name'>
               <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
               <b:else/>
                <data:comment.author/>
               </b:if>
               <b:if cond='data:comment.author == data:post.author'>
                  <span class='comment_author_flag'>Admin</span>
               </b:if>
              </div>          
              <div class='comment_service'>
               <a expr:href='data:comment.url' rel='nofollow' title='permalink'><span class='comment_date'><data:comment.timestamp/></span></a>            
              </div>
              <div class='clear'/>
             </div>
             <div class='comment_body'>
              <b:if cond='data:comment.isDeleted'>
               <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
               <p><data:comment.body/></p>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'><i class='fa fa-reply'/> Balas</a>            
               <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' expr:title='data:top.deleteCommentMsg'><i class='fa fa-trash'/></a>                                               <div class='clear'/>                                        
              </b:if>                                      
             </div>
              <div class='clear'/>
            &lt;/div&gt;
            <div class='clear'/>
            </div>
            <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' id='comment-form'>        
       
          <b:if cond='data:post.embedCommentForm'>
           <b:if cond='data:post.allowNewComments'>                                                      
            <b:include data='post' name='threaded-comment-form'/>
           <b:else/>
            <data:post.noNewCommentsText/>
           </b:if>
          <b:else/>
           <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
           </b:if>
          </b:if>
         </div>
        </b:if>
       </div>            
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}
       //]]>
       </script>    
       <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 = {&quot;maxThreadDepth&quot;:&quot;0&quot;};
        </b:if>
       //<![CDATA[
function downloadJSAtOnload2(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/js/master/comment-hack.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload2,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload2):window.onload=downloadJSAtOnload2;      //]]>
         </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>
              <b:includable id='disqus-comment' var='post'>
            <script type='text/javascript'>
                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
            </script>
            </b:includable>
              <b:includable id='fb-comments' var='post'>
            <div class='fb-comments' data-colorscheme='light' data-numposts='5' expr:data-href='data:post.url' id='fb-comment'/>
            </b:includable>

Kemudian cari lagi kode yang seperti di bawah ini atau seperti gambar di bawah ini.


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

Kode-kode threaded komentar Blogger

Kemudian silahkan ganti semua kode di atas dengan kode 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'>
      <p><data:blogCommentMessage/>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'><i class='fa fa-smile-o'/></a></span><span id='hide-emo' style='display:none'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'><i class='fa fa-smile-o'/></a></span>
</span>
  </p>
<div id='emo-box' style='display:none'>
  <div class='comment_emo_list'/>
</div>
      <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>
      </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://cdn.rawgit.com/KompiAjaib/js/master/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>

3. Kode Javascript
Silakan simpan kode javascript di bawah ini di atas kode </body>


<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>

Silahkan ganti kode USERNAME DISQUS dengan username Disqus blog Anda. Setelah itu silahkan hosting kode javascript yang ada di antara kode //<![CDATA[ dan kode //]]>. Jika tidak memiliki hosting sendiri maka Anda bisa menggunakan Google Drive untuk menghosting javascript-nya. Setelah meng-hosting javascript silahkan gunakan javascript defer sehingga hasil akhirnya akan seperti di bawah ini.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="URL HOSTING JAVASCRPT DI SINI",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

Silahkan ganti kode URL HOSTING JAVASCRPT DI SINI dengan url hosting javascript tadi.

Harap disimak dengan teliti langkah-langkah di atas agar penerapannya benar dan bisa berjalan. Namun sebaiknya sebelumnya Anda harus mem-backup template Anda dulu agar jika ada kesalahan bisa kembali ke kode semula dengan mudah. Dan pada komentar ini ikonnya menggunakan font awesome, jadi pastikan Anda sudah memasang font awesome pada blog Anda.

Selamat mencoba dan semoga bermanfaat.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

81 Comments Add Comment

Test penulisan kode
function cdClear() {
var wtarea = document.getElementById('codes');
wtarea.value = '';
wtarea.focus();
document.getElementById('cvrt').disabled = false;
}

Balas

tes juga
function cdClear() {
var wtarea = document.getElementById('codes');
wtarea.value = '';
wtarea.focus();
document.getElementById('cvrt').disabled = false;
}

Balas

Bener2 ajaib keren

Balas

tapi kena error ya mas pada kodenya

Balas

Hehehe makasih mas-mas :)

Balas

Sudah saya betulkan mas :) Siahkan dicoba lagi.

Balas

kok ada tulisan gini ya gan, itu knp ya ?
Kesalahan saat mengurai XML, baris 1634, kolom 3: The element type "link" must be terminated by the matching end-tag "< / link >".

Balas

Pada kode di atas tidak ada kode <link ....
Mungkin dari kode template sebelumnya, bisa screenshot kode yang bermasalahnya pada baris tersebut? :)

Soalnya udah saya coba pasang pada blog dummy tidak ada masalah :)

Balas

di bagian html ( ending code )
https://4.bp.blogspot.com/-YDOHW_E8zso/Vs_TJkL1vRI/AAAAAAAAB_k/QqVi2Hw8M6o/s1600/Untitled2.png

Balas

Cari semua kode dengan awalan kode <link kemudian periksa pada akhiran kodenya, pastikan memiliki penutup dengan kode garis miring /
Sebagai contoh penulisan kode link yang benar di dalam edit HTML seperti di bawah ini.
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>

Di bawah ini penulisan yang salah dan menyebabkan error
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'>

Balas

kok ada tulisan gini lagi gan ? :(
The widget with id "Blog1" cannot contain element: "script". A widget can only contain b:includable elements.

Balas

Itu jelas ada kesalahan penyimpanan kode mas. :)

Balas

aku pakai template bawaan blogger
Dynamic Views

Balas

Sepertinya ada kesalahan penempatan kode javascript mas :)
Coba mas sebelumnya menyimpan kode javascript apa? Silahkan pindahkan ke atas kode </body>

Balas

Kalo javascript nya tidak di hosting bisa ngga mas?

Balas

Bisa saja cuman loading Disqus, Facebook, dan komentar Blogger akan mengganggu loading blog.

Balas

Ya udah deh. Sudah saya pasang mas. Cuma belum saya hosting javascriptnya. Mungkin ntar kalo ada waktu ke warnet untuk menghosting. Kalo via hp ngga ngerti ngambil link js di google drive. Hehe.

Balas

nice info gan, sangat bermanfaat

Balas

kenapa setelah pasang widget ini, fan fb jadi hilang. Bisa kasih solusinya kang, terimakasih.

Balas

Coba kode js fb dan ID fb-root yang sebelumnya dihapus.

Balas

saya selalu bingung kalau sudah masuk ke
silahkan hosting kode javascript yang ada di antara kode //. Jika tidak memiliki hosting sendiri maka Anda bisa menggunakan Google Drive untuk menghosting javascript-nya. Setelah meng-hosting javascript silahkan gunakan javascript defer sehingga hasil akhirnya akan seperti di bawah ini...
simpan menyimpan...hosting...google drive...
tutor yang inipun...mentoknya disitu kang....padahal templatenya nggak tak bek-ap dulu...hadeuh...kumaha yeuh?

Balas

gimana caranya dapetin URL HOSTING JAVASCRPT DI SINI pake google drive nya kang...
cing bantukeun lah...lieur bari jeung lemot koneksi teh ah

Balas

udah jadi kang....ngan kitu tea hasilna, teu sampurna euy

Balas

Cobi ulem abdi kang janten admin blog, cuang diberesan ku abdi. ieu emailna kompiajaib@gmail.com

Balas

Kalau image trash (Kotak sampah) tidak begitu besar/tidak kelihatan gambar tong sampahnya kenapa gan? apa yang salah?

Balas

Gambar tong sampahnya itu pakai font awesome mas.

Balas

Coba pakai font awesome terbaru

Balas

Kode font awesomenya apa gan? Ane sudah masukkan gan tapi tetap saja?

Balas

Iya gan ane cari dulu kode font awesome terbarunya. Makasih gan.

Balas

Kang, saya mau pake template dari arlinadzgn(dot)com yang sejak awal gunakan disqus untuk berkomentar, dan komentar blogger nya di hilangkan.

Nah, di kondisi begini, apakah tutorial ini masih bisa dignakan?

Balas

Bisa saja mas, asal kita jeli dalam menyimpan kode-kodenya.

Balas

Admin, Please let me know How can I replace default comment system from disqus tab to blogger tab??

Balas

Change this css
.blogger-box,.facebook-box{display:none}
with this css
.disqus-box,.facebook-box{display:none}

And this html code move to down and add code btncurrent to the class
<div class='blogger-bar commentbtn' onclick='toggleVisibility(&apos;blogger-box&apos;)'>
Blogger
</div>


And delete code btncurrent from this code
<div class='disqus-bar commentbtn btncurrent' onclick='toggleVisibility(&apos;disqus-box&apos;)'>
Disqus
</div>

Balas

Kang adhy , kok di blog saya mah gabisa di klik ya malah tampilannya doang oke,
mohon solusinya . terima kasih

Balas

thanks kang, alhamdulillah berhasil.
cuman sayangnya blog ane dlu pake +Google comment, jadi setelah pake cara di atas, komentar lama tidak muncul pada form komentar blogger. Mohon solusinya kang (y)
Hatur Nuhun..

Balas

terima kasih banyak gan.. sangat bermanfaat

Balas

Wah ini yang ane cari. Asik ketemu. Makasih ya mas udah mau berbagi. Semoga ilmu nya bermanfaat ammin. Kunjungi blog saya masih baru build dari bootstrap juga. http://miscss-us.blogspot.com 😂😂😂

Balas

Kang, Saya Mau nanya, kok komentar google saya tidak bisa ya? padahal yang lain bisa?
sebelumnya thx kang, ilmunya sangat bermanfaat!
blog saya: www.mrrfly.xyz

#help kang :v

Balas
This comment has been removed by the author.

Nggak work, cuma mucul tab-tab tapi nggak muncul kolom untuk komentar. Kenapa ya ?

Balas
This comment has been removed by the author.

kalau enggak ada kode HTML pada langkah kedua kayak mana Mas?

Balas

Alhamdulillah tiasa, nuhun pisan akang Adhy .. Sing barokah elmuna

Balas

Om, ini kan button default yang muncul adalah komentar Disqus, cara ganti biar ke komentar Blogger gimana ya? Jadi urutan button nya: Blogger->Disqus->Facebook
Makasih sebelumnya.

Balas

Salam, Punyaku komen facebook nya gak kebuka! Kenapa Yah sieragolf dot com

Balas
This comment has been removed by the author.
This comment has been removed by the author.

as saya tambahkan kode yang trakhir di atas , jadi kayak gini bang...

https://3.bp.blogspot.com/-fHbhA63RWOw/V6jpJ0JHwxI/AAAAAAAABRE/2d9VaEaog_4kp3xT5nMOURjh8MkKvvZAwCLcB/s1600/Kritik.png

Mohon dikasih solusi bang! Terima kasih banyak

Balas

Pas saya tambahkan code terakhir diatas < / b o d y > . Jadi kayak gitu bang.

Balas

mas, kalau saya mau nampilkan ke staticpage komentar nya, apa harus buat CSS baru lagi dengan tag static_page atau cukup tambahin aja, misalnya seperti ini
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
.........................
</b:if></b:if>

Balas

Yup... betul...... :)

Balas

sudah coba mas, malah gk nampil komentar nya hahaha ...

Balas

Coba pakai kode ini <b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>

Balas

makash mas, sudah bisa akhirnya, tapi saya pake ini
<b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
Salam support (y) :)

Balas

masa adi itu komentar facebook nya ga mau muncul, punya ane juga sama. kenapa ya?

Balas

Coba URL sdk.js Facebook ganti dengan yang baru kang,
Yang ini
//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3
Dan coba ganti dengan ini
//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7

Balas

udah di ganti tapi tetep ga mau muncul mas adhy ,

Balas

di template mas adhy juga ga muncul, sok geh lihat komentar fb nya,

Balas

cara buat komentar disqus dan blogger aja gimana bang?

Balas

coba lihat di komentar disqus gan udah mas adi jawab,

Balas

function downloadJSAtOnload(){var d=document.createElement("script");d.src="URL HOSTING JAVASCRPT DI SINI",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;


maksud nya ini script buat gantiin yang sebelumnya..?
di letakan di atas body.

sebelumnya sudah ada script yang 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;


Balas

Betul, hosting javascript pada langkah ketiga kemudian gunakan kode javascript yang function downloadJSAtOnload()

Balas

Kalau kode javascrip atau html untuk menampilkan comment counter (Facebook, Blogger, dan Disqus) itu apa ya mas?

Balas

Mas mau nanya nih. saya berhasil menerapkan semua langkah diatas. masalahnya adalah ketika ada komentar di model blogger, komentar ini muncul di atas form multi komentar sehingga formatnya jadi berubah. Kalau komentar facebook dan disqus komentarnya masih di dalam form. Pertanyaan saya adalah bagaiama mengatasi masalah ini atau bagaimana cara membuang komentar bloggernya saja (jadi tinggal facebook dan disqus)

Balas

tes penulisan code itu apa maksudnya ya mas,
mohon bantuannya ..

Balas

Kalo kayak gini, gimana nih ?
http://image.prntscr.com/image/905a531c66cb43d1b7f808ff314434f4.jpg

Balas

Kesalahan penempatan kode kayaknya.

Balas

kan sebelumnya saya pernah pasang komentar yang pake 2 tab blogger dan facebook, udah lama sekali sih. setelah itu diganti ama tutor yang sampean beri tau.

Balas

Jika mengikuti tutorial di atas dengan benar, tidak akan ada kesalahan seperti itu. :)

Balas

mas, kalo cara menambahkan tab baru [untuk disqus] dari bentuk komentar yang seperti ini gimana ya?
gambar:
http://image.prntscr.com/image/efd9c4dd53174c77bd096c052272c04b.jpg

sebelumnya saya ucapkan terimakasih. :)

Balas

http://i.hizliresim.com/6mXZ57.png HELP

Balas

hi can i ask if i change my comment with disqus,facebook,blogger if the visitors of the website posted a link or backlink its automatic nofollow and if automatic converted the link in the comment into a regular text. it is possible to make a link into a regular text?

Balas

kang kalo mau ikutin tutorial ini, kita harus masang disqus terlebih daluhu ya?

Balas

Ikuti aja semua langkahnya di atas, itu otomatis menambahkan disqus. Mungkin maksu mas, harus buat akun disqus untuk blognya ya? Iya harus buat akun disqus untuk blognya untuk digunakan disqus_shortname nya.

Balas

done kang, tapi komentar blogger dan facebook gabisa di klik euy :(
mohon bantuannya kang, hatur nuhun ^_^

Balas

Coba javascript-nya jangan di-host di google drive. Coba di github, simak di sini http://www.kompiajaib.com/2016/05/cara-hosting-file-js-css-html-di-github.html

Balas

terus letak yang onload itu di atas body lagi mas ?

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×