0
Home  ›  Blog

Cara Menggunakan Komentar Disqus di Template Infastio

"Tutorial Cara Memasang Sistem Komentar dari Disqus di Template Infastio."

Disqus Comment System on Infastio Blogger Template
image: wordpress.org/plugins/disqus-comment-system/

Edit HTML

  1. Cari
    <b:defaultmarkup type='Common'>
  2. Paste kode ini dibawahnya
    <b:includable id='disqus-comment' var='post'>
      <script>
      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>
  3. Cari dan ubah
    <b:include data='post' name='commentPicker'/>
    Menjadi
    <!-- <b:include data='post' name='commentPicker'/> -->
    Paste kode ini dibawahnya
    <b:if cond='data:view.isSingleItem'>
      <div id='disqus_thread'>
      <div id='disqus_empty'/></div>
      <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'><b:include data='post' name='disqus-comment'/></b:if>   
      <script>
      //<![CDATA[
      function load_disqus(e){var t=document.getElementById("disqus_empty"),d=document.getElementById("disqus_thread"),n=document.createElement("script"),s=document.createElement("script"),o=document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0];d&&t&&(n.type="text/javascript",n.async=!0,n.src="//"+e+".disqus.com/embed.js",o.appendChild(n),s.type="text/javascript",s.async=!0,s.src="//"+e+".disqus.com/blogger_item.js",o.appendChild(s),t.remove())}window.addEventListener("scroll",function(e){var t=document.scrollingElement.scrollTop,d=document.getElementById("disqus_thread");d&&t>d.getBoundingClientRect().top-150&&(load_disqus("catatandroid"),console.log("Disqus loaded."))},!1);
      //]]>
      </script>
    </b:if>
    Perhatikan load_disqus("catatandroid"), ganti catatandroid dengan username disqus kalian.
  4. Cari dan ubah
    <i><data:post.numberOfComments/></i>
    Menjadi
    <!-- <i><data:post.numberOfComments/></i> -->
  5. Cari dan ubah
    <b:include name="ic-chat"/><b:message name='messages.numberOfComments'> <b:param expr:value='data:post.numberOfComments' name='numComments'/> </b:message>
    Menjadi
    <b:include name="ic-chat"/><data:messages.postAComment/>

Widget Layout

  1. Pada infastio settings ubah var recentComment menjadi false. var recentComment = false;
  2. Tambahkan css ini di widget additional css
    .comment-info { display: none; }

Perhatian

  • Widget Disqus ini berjalan secara lazy on scroll, akan muncul jika ada aktifitas scroll pada layar.
  • Widget Disqus ini tidak termasuk fitur recentComment dan totalComment

Post a Comment
Search
Menu
Theme
Share
Admin CS Support
Halo, Ada yang bisa kami bantu? ...
Kirim