Ads 728x90

» » Cara Membuat Komentar Disqus,Blogger,Facebook bersamaan
Dede Ubed 14 Agustus 2 komentar Read
adscblog
Mungkin para blogger pernah atau bahkan sering melihat komentar Disqus di blog atau juga komentar Facebook yang terpasang di bawah postingan blog,banyak cara ke kreatipan para blogger agar para pengujung blog semakin betah di blog mereka,dahkan mereka memudahkan para pengujung untuk meninggalkan jejak mereka dengan cara berkomentar di salah satu artikel yang mereka cari

Ada yang memasang Komentar Facebook di bawah postingan blog agar mereka para pengujung berasal dari Facebook yang mungkin tidak mempunyai akun google,maka dengan terpasang nya komentar facebook memudah kan nya untuk memberikan tanggapan terhadap salah satu artikel tersebut
Namun lain lagi bagi mereka yang mempunyai Akun Disqus,saya pikir mereka yang mempunyai akun Disqus mereka yang sering berselancar di dunian Internet khusus nya blogging,mereka yang keseharian nya selalu di hadapan komputer

Maka dari itu tidak aneh jika di suatu blog atau ada blog yang sengaja memasang komentar Disqus,Blogger atau juga Facebook secara bergandengan,dan temtu nya tiga komentar tersebut selain terlihat rapi juga dengan ada nya ketiga kotak komentar tersebut akan semakin memudahkan para pengujung untuk selalu meninggalkan jejak dari ketiga plat form tersebut

Cara Memasang komentar Disqus,Blogger,Facebook bersamaan di postingan blog

Namun untuk anda para blogger yang tertarik dengan trik memasang kotak komentar antara Disqus,Blogger dan juga Facebook secara bersamaan di bawah postingan blog,sobat blogger bisa mengikuti langkah langkah penerapan ketiga kotak komentar tersebut di bawah ini
  • Silahkan unuk masuk ke Dashboard Blogger dengan email dan juga Pasword nya
  • Setelah itu silahkan sobat klik Template yang berada di bagian kiri Dashboard blogger
  • Kemudian klik edit html
  • Setelah berada di bagian edit html,silahkan sobat cari kode kode </head> untuk memudah kan pencarian nya silahkan tekan tombol Ctrl+F secaa bersamaan kemudian letakan kode berikut sebelum kode </head> 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0oL6f5QI8aYs3y39rfkBg8f397Ix_aSlVwoTgGCz1e__JrKDTpuPmGYHDyDHQ_y9jTHGXgtRXEDwLSXI6KHILGuDJi07rew7R-s4vM68KadSgmmFN5z5a6DC-yCIhP-S-8vIlex0Xpc/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}
.disqus-bar {padding:5px 10px 6px;margin-bottom:-1px;background:#444;color:#fff}
.blogger-bar {padding:5px 10px 6px;margin-bottom:-1px;background:#ff4500;color:#fff}
.facebook-bar {padding:5px 10px 6px;margin-bottom:-1px;background:#05A0FF;color:#fff}
        .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}
        .facebook-bar .btncurrent{background:#000;color:#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 selanjut nya silahkan sobat cari lagi kode berikut
<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 kode tersebut ketemu,silahkan anda ganti kode di atas dengan kode berikut
<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://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/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>
  • Setelah itu silahkan sobat cari lagi kode berikut
<b:includable id='threaded-comment-form' var='post'>...</b:includable>
<b:includable id='threaded_comment_js' var='post'>...</b:includable>
  • Setelah ketemu,silahkan sobat ganti kode tersebut dengan kode berikut
<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://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/threaded-comment.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload3,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload3):window.onload=downloadJSAtOnload3;      //]]>
      </script>
    </b:includable>
  • Langkah terakhir,silahkan sobat letakan kode berikut sebelum kode </body>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <script type='text/javascript'>
    //<![CDATA[
    var disqus_shortname="infotrens-com";
    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>
  • Kemudian Save template dan lihat Hasil nya 
Catatan :  var disqus_shortname="infotrens-com"; silahkan anda ganti dengan akun disqus anda

Nah itulah cara memasang ketiga kotak komentar Disqus<blogger dan juga Facebook secara berdekatan di bawah postingan blog,semoga artikel nya bisa membantu sobat blogger semua,selamat mencoba,dan salam blogger
adscblog

Recommendation Apps
ads1
Posted by Dede Ubed, Published at 14 Agustus and have 2 komentar
Dede Ubed

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

2 komentar

avatar
ahmad salim muttaqin 09/11/17, 10.29
✖

Mantep, dari kemarin susah maumasukin komentar blog lagi, karena bawaan template cuman pakai disqus, tapi setelah baca ini malah semua jenis bisa komen :)

Balas
avatar
Dede Ubed 09/11/17, 15.19
✖

Yap...Betul Gan..

Balas

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi

Ads 728x90