Tips Cara Memasang 3 Jenis Komentar Facebook, Disqus, Blogger Bersebelahan di Blog

Tips Cara Memasang 3 Jenis Komentar Facebook, Disqus, Blogger Bersebelahan di Blog


Tips Cara Memasang 3 Jenis Komentar Facebook, Disqus, Blogger Bersebelahan di Blog. Tutoral ini sudah sangat lama pula saya bagikan di blog saya www.pi-sang.com, namun saya akan re-posting postingan tersebut di blog saya yang ini yaitu www.ndrie.com. Di postingan ini adalah tutorial cara memasang 3 jenis komentar di blog yaitu Facebook, Blogger, dan Disqus.

Untuk demonya kalian bisa melihat gambar GIF yang sudah saya lakukan dan berhasil saya uji coba sendiri di blog saya ini dan hasilnya berhasil. Bagi kalian yang berminat memasang 3 Jenis komentar blog ini bisa mengikuti langkah-langkahnya dibawah ini:



Tips Cara Memasang 3 Jenis Komentar Facebook, Disqus, Blogger Bersebelahan di Blog

Langkah Pertama, silahkan tambahkan kode 'css' ini tepat diatas kode </head> . Apabila kalian menggunakan CSS komentar blogger pada blog kalian silahkan hapus kode tersebut.

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

Langkah Kedua, tambahkan juga kode HTML ini agar bisa menampilkan 3 Jenis komentar blog seperti yang kalian inginkan secara bersebelahan disetiap postingan blog di blog yang kalian miiki. Pada langkah ini kalian perlu menambahkan dan mengganti kode-kode yang sudah terdapat pada blog kalian sendiri. Silahkan tambahkan dan ganti kode secara teliti agar tidak terjadi error pada template blog kalian.

Silahkan cari kode dibawah ini yang sama persis seperti kode dibawah 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>
Setelah kalian berhasil menemukan kode diatas tersebut, ganti semua kode diatas itu dari mulai Comment-form sampai dengan var='post tersebut dengan kode dibawah 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> 

Langkah Ketiga Cari kode dibawah ini yang mirip atau persis dengan kode yang ada di blog kalian, cari kode HTML dibawah ini

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

Kemudian ganti kode diatas menggunakan kode HTML dibawah 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> 

Langkah Keempat, silahkan kalian juga tambahkan kode script dibawah ini tepat diatas 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 Username disqus dengan username disqus milik kalian sendiri. Tekan CTRL + F lalu cari teks Username Disqus lalu tekan enter.

SELESAI
Nah, demikianlah Tips Cara Memasang 3 Jenis Komentar Facebook, Disqus, Blogger Bersebelahan di Blog, Silahkan terapkan tutorial ini dengan teliti dan benar agar tidak terjadi error didalam template blog kamu. Untuk menjaga-jaga sebaiknya backup data template kamu terlebih dahulu agar sesuatu yang tidak diinginkan tidak terjadi.

T E R I M A K A S I H !
Catatan 'Penting' Sebelum Berkomentar:
  • 1. Harap berkomentar sesuai dengan judul artikel.
  • 2. Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • 3. Tidak perlu tulis link di komentar, yang sudah komentar pasti akan saya kunjungi balik lewat profil kamu.
  • 4. Terima Kasih sudah berkunjung, untuk hubungi saya bisa melalui 'Halaman Kontak'
  • *Berkomentarlah dengan baik, Kepribadian kamu tercemin saat berkomentar.

13 comments

Kalau saya sementara ini nyaman dengan disqus :D

Balas

bisa dicoba soalnya klo pasang discus komentar ilang semua

Balas

Pernah kepikiran sih pingen pasang komentar disqus dan fb di blog, tapi setelah aku pikir2 lebih nyaman pakai komentar blogger.

Balas

Wah, agak rumit juga ya? Kalau udah main kode-kode an gitu, ampuuun aku nyeraah, ahahahaha

Balas

Gak ngerti kenapa orang pada pake disqus, padahal komen form bawaan dari blogger udah kece parah

Kan ribet, jadi mesti register dulu lah, login dulu lah :(

Balas

boleh disimpen nih kodenya, buat bendahara kode komentar, makasih mas tutorialnya

Balas

aku ngunjungi nya udah larut, aku bookmark dulu yaa, kalau aku sih kepikiran nambahin tab coomment buat fb aja, kan lumayan, sekalian ke share di wall orang

Balas

Ingin bertanya mas, apa sih untungnya memasang tiga comment form di atas sekaligus? Karena hingga saat ini saya belum pernah memasang comment form disqus dan FB di blog. Terima kasih jika ada jawabannya mas hehe :D

Salam kenal mas Andrie :)

Balas

saya cuman pake komen bawaan aja, lagian saya justru sebel kalo liat yang dari disqus, ribet

Balas

Saya dulu juga sempat menggunakan tiga kolom komentar. Tapi loadingnya lumayan berat. Sekarang saya lebih suka dan lebih mantap menggunakan bawaan blogspot saja. Lebih praktis dan tidaklah rumit.

Balas

keren juga yah kalau ada 3 kolom komentar. Pasang gak yah, tapi enakan disqus sih.

Balas

kalo saya lebih suka bawaan saja sih mas. takutnya loadingnya berat. yg ada juga udah berat.
tapi ini jadi solusi suapaya semua bisa komentar top banget deh mas

Balas

Waaaaa aku suka artikel ini :D aku juga punya disqus tp blm dipasang-pasag :D Tapi liatnya agak agak bikin pusing yah :D :D

Balas

Notification
Yuk Gabung menjadi member Diskusi Komunitas Blogger Indonesia yang tersebar di seluruh wilayah Indonesia, silahkan dipilih

- Forum Diskusi Blogger Indonesia
- Diskusi Komunitas Adsense Indonesia
- Komunitas Tutorial Blogger Indonesia

Terima kasih
Done