Cara membuat komentar multi tab di blogger Disqus,blogger,facebook

hai sobat - sobat sekalian apa kabar kali ini saya akan memposting tutorial Cara membuat komentar multi tab di blogger Disqus,blogger,facebook , mungkin di antara sobat-sobat sekalian ada yang belum paham dan tau gimana cara membuatnya ok gak usah banyak basa basi lagilangsung ke tutorialnya 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>

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>

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.

PENTING :

Gooogle Drive Hosting sudah di tiadakan jangan takut kalian masih bisa menggunakan github untuk caranya bisa lihat di cara membuat file hosting js , html ,dan lainnya di github.

11 comments:

UnknownJanuary 2, 2017 at 10:37 PM
bagus nih, tapi bagaimana menerapkan ini ke wordpress? @@,
Hafid Ali MJanuary 2, 2017 at 10:38 PM
terima kasih gan sangat membantu
Musafir IlmuJanuary 2, 2017 at 10:46 PM
Wah ok juga tutorialnya.
Izin mencoba tutorialnya ya gan
Musafir IlmuJanuary 2, 2017 at 10:47 PM
Wah ok juga tutorialnya.
Izin mencoba tutorialnya ya gan
UnknownJanuary 21, 2017 at 9:40 PM
artikelnya sangat bermanfaat, bagus kalau diterapkan di blog saya.
ryan1154January 22, 2017 at 12:56 PM
ijin coba pak
max simthMarch 13, 2019 at 5:57 AM
I read a article under the same title some time ago, but this articles quality is much, much better. How you do this.. Buy 1 Star Facebook Reviews
MiaApril 8, 2020 at 1:09 PM
The motivation behind why Facebook fills in as a marketing medium is on the grounds that clients CHOOSE to be there. So when you make a Facebook Page,Facebook video downloader it's WITHIN the possibility's picked condition.
Balinet NawadwipaMarch 18, 2021 at 11:42 PM
Jasa Pembuatan Website Profesional Bali Terbaik No 1, Bayar DP-nya Sisa Setelah Jadi. Website Instansi, Hospital, Property, Profil, Mobil, Sales, Marketing, Pengacara, Bunga, Berita, Jasa SEO, Dll. Gratis SSL. Website Bagus Profesional. Website Bergaransi.
Toko Komputer Online Terpercaya di IndonesiaJune 8, 2021 at 4:05 AM
Makasih untuk sharing info ini ya...
Ditunggu kunjungan baliknya ke tulisan terbaru saya di Rekomendasi Software Edit Video untuk Laptop atau Cek Toko Komputer Online Terpercaya
Arya gitaJanuary 13, 2022 at 9:22 PM
saya sudah coba di blog saya, tp tidak mau ya. bisa tolong di bantu untuk solusinya. atau ada yang salah, untuk linknya : sewa motor di bali 2022

Breaking

Monday, January 2, 2017

Cara membuat komentar multi tab di blogger Disqus,blogger,facebook

11 comments:

Follow Us

Facebook

Popular Posts

Recent

Comments

Blog Archive

Tags

Recent Post

Recent In DesainWeb

Popular