Cara Mudah Pasang Dua Sistem Komentar Disqus Dan Blogger Di Blog

Senin, 14 Agustus 2017

Cara Mudah Pasang Dua Sistem Komentar Disqus Dan Blogger Di Blog

Posted By: Agustus 14, 2017 Leave a Reply
Demi memenuhi kebutuhan visitor terkadang kita harus melakukan apapun semapu kita, karena visitor adalah nyawa dari sebuah website, termasuk blog yang sobat kelola, besarnya sebuah blog dibangun oleh para pengunjung, tanpa mereka, website sebesar dan semewah apapun tidak ada nilai jualnya.

Cara Mudah Pasang Dua Sistem Komentar Disqus Dan Blogger Di Blog

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 sobat harus menyediakan media yang cukup untuk mereka agar blog sobat ramai dengan komentar para pengunjung, dan itu menandakan bahwa blog yang sobat 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 sobat 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 pandai 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 sobat 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 sobat, agar jiaka ada kesalahan sobat 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, sobat buka blog sobat menuju ke edit HTML

2. Jika sebelumnya sobat sudah menginstall sistem komentar blogger, dan pastinya setiap blogg memiliki kolom komentar, maka yang sobat lakukan adalah menghapus terlebih dahulu CSS komentarnya agar tidak bentrok.

3. jika sudah dipastikan sudah tidak ada CSS komen di blog sobat, selanjutnya masukan CSS komentar dibawah ini, ditempat CSS komentar yang sobat hapus tadi, atau sobat bisa memasangnya di diatas kode 


 /* 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/AVvXsEjC6xFa0l8KwmAyExpUWSYUudRa3mi4YJ-tw17zIL4PojnDnQQorPr4qMoqSc6qgrdUt24tgAM75xRCWd3YUpkzG1VI42LqyXzxeABFICvi6e5-hnJo9opY73odsos2Ljk98_wnrKQbDSE/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: "";
 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: '\f061';
 font-family: FontAwesome;
 color: #555;
 margin-left: 5px;
}

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

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


Lalu sobat 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. Lalu sobat ganti dengan kode dibawah ini:

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


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

Keterangan: Silahkan ganti USERNAME DISQUS dengan shortname sobat.

Akhir kata sobat

Itulah cara mudah pasang dua sistem komentar Disqus dan Blogger di Blog. Bagaimana menurutmu? mudah bangetkan? Silakan di coba sobat? Janggan lupa komentar dibawah ya, dan Silakan share artikel ini sobat.

Terimakasih

0 komentar: