Home  ›  blog

Cara Mudah Memasang Dua Sistem Komentar Blogger Dan Disqus Di Blog

Cara Mudah Memasang Dua Sistem Komentar Blogger Dan Disqus Di Blog

Pekanan.com- Cara Mudah Memasang Dua Sistem Komentar Blogger Dan Disqus Di Blog | Demi memenuhi kebutuhan visitor terkadang kita harus melakukan apapun semapu kita, karena visitor adalah nyawa dari sebuah website, termasuk blog yang anda kelola, besarnya sebuah blog dibangun oleh para pengunjung, tanpa mereka, website sebesar dan semewah apapun tidak ada nilai jualnya.

Visitor menunjukan kepuasan, kompalin, rikues tutorial dan meminta penjelasan lebih yang diajukan langsung di kolom komentar yang sudah disediakan, sistem komentar menjadi media untuk berinteraksi antara penulis dan visitor disanalah saatnya membangun kedekatan dengan mereka, agar pengunjung terus berkunjung ke blog yang kita kelola.

Memasang sistem komentar yang mudah untuk diakses, akan lebih menarik perhatian visitor untuk berkomentar, oleh karena itu anda harus menyediakan media yang cukup untuk mereka agar blog anda ramai dengan komentar para pengunjung, dan itu menandakan bahwa blog yang anda kelola hidup dan adminnya pun aktif untuk membalas komentar.

Diqus,  akhir-akhir ini menjadi sistem komentar andalan blog besar, selain mudah untuk diakses disqus memiliki design yang menarik dan sangat ringa, sehingga pengunjung bisa dengan mudah untuk berkomentar, namun dengan catatan mereka harus memiliki akun disqus juga.

Karena tidak setiap orang memiliki akun disqus, maka terkadang jika anda hanya memasang satu sistem komentar yaitu dusqus, maka yang tidak memiliki akun disqus mereka tidak akan berkomentar.

Solusinya agar tidak kehilangan keluah visitor, kita harus panda mensiasatinya, dengan cara memasang dua sistem komentar blogger dan disqus, dengan tujuan pengunjung yang tidak memiliki akun disqus tetap berkomentar dengan sistem komentar blogger yang kita sediakan, alasanya mudah, karena hampir setiap orang pada saat ini memiliki akun google, sehingga mereka tidak perlu lagi untuk mendaftar, sehingga tidak mengambil waktu untuk berkomentar.

Dengan sedikit penjelasan diatas, saya kira anda sudah paham maksud dan manfaat untuk membuat dau sistem komentar blog dan disqus. Setelah mengetahui manfaatnya lalu sekarang bagaimana cara memasang dua sistem komentar di blog dengan mudah?
Warning message
Silahkan backup terlebih dahulu template anda, agar jiaka ada kesalahan anda bisa merestorenya.
Ikuti langkah-langkahnya dibawah ini untuk memsanga sisteman komentar disqus dan blogger.

Cara Mudah Memasang Dua Sistem Komentar Blogger Dan Disqus Di Blog


1. Hal yang pertama adalah, anda buka blog sobat menuju ke edit HTML
2. Jika sebelumnya anda sudah menginstall sistem komentar blogger, dan pastinya setiap blogg memiliki kolom komentar, maka yang anda lakukan adalah menghapus terlebih dahulu CSS komentarnya agar tidak bentrok.
3. jika sudah dipastikan sudah tidak ada CSS komen di blog anda, selanjutnya masukan CSS komentar dibawah ini, ditempat CSS komentar yang anda hapus tadi, atau anda bisa memasangnya di diatas kode </Style> atau ]]></b:skin> .

/* COMMENT FORM */
#comments2 {
 clear: both;
 padding: 10px 0;
 margin-top: 0;
 font-family: Lato, 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/AVvXsEgPGVOf7G-kBxG-q6SSs_RawR1EBEFoaQB_7i5o96y7OEd_xsUUtVw-dnq-_oUwz0BxQSIDozKcE9lx1fni3S6IYKFBUI1FTj2pXSK3_Qo9hpMD0-9mw4Fz3z2TmrHxfY0gvAesG3gyf5Y/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 {
 -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: Lato,sans-serif;
 line-height: 1.5em;
 width: 100%;
 border-radius: 3px;
 position: relative;
 box-sizing: border-box;
}
.comment-form p:after {
 content: &quot;&quot;;
 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 {
 font-family: Lato, sans-serif;
 font-weight: 700;
 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 {
 display: inline;
 float: right;
 padding: 5px 10px;
 cursor: pointer;
 background: #fafafa;
}
.disqus-box {
 padding: 15px;
 border: 1px solid #ddd;
 width: 100%;
 box-sizing: border-box;
}
.blogger-bar,
.disqus-bar {
 margin-left: 4px;
 margin-top: 20px;
 border: 1px solid #ddd;
 border-bottom: none;
}
.blogger-box {
 width: 100%;
 padding: 0;
 border-top: 1px solid #ddd;
 box-sizing: border-box;
}
.blogger-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 {
 float: left;
 padding: 5px 10px 5px 0;
 margin-top: 20px;
}
.comment-text:after {
 content: &#39;\f061&#39;;
 font-family: FontAwesome;
 color: #555;
 margin-left: 5px;
}

4. Setelah itu anda cari kode dibawah ini dalam HTML blog anda.


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

Cara Mudah Memasang Dua Sistem Komentar Blogger Dan Disqus Di Blog

lalu anda ganti 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='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>
</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>

5. Kemudian anda cari lagi kode dibawah ini di blog anda

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

Cara Mudah Memasang Dua Sistem Komentar Blogger Dan Disqus Di Blog

Lalu ganti dengan kode 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>

Sampai disini anda sudah berhasil memasang Struktur kode sistem komentar, selanjutnya adalah memasang kode javascript untuk meload sistem komentar disqus. caranya berikut ini:

6. Silahkan kopi kode dibawah ini 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>

Keterangan: Silahkan ganti USERNAME DISQUS dengan shortname anda

Jika anda ingin hosting kode JS, anda bisa menggunakan JS dibawah ini untuk mendeffer file dari hosting, anda bisa menghosting file di github.com.


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

lalu letakan Url hosting di "URL HOSTING JAVASCRPT DI SINI"

Demikian cara memasang dua sistem komentar diblog, harap untuk mengikuti langkah-langkahnya dengan teliti karena jika ada kesalahn beresiko template akan error. oleh karena itu anda harus melakukan backup sebelum mempraktikan tutorial ini. goodluck happy blogging

Subscribe to receive free email updates: