Cara Menampilkan Jumlah Komentar Disqus Template Fletro Pro

Inputekno
0
Menampilkan Jumlah Komentar Disqus di Blog

Ada banyak artikel yang membahas cara menampilkan jumlah komentar disqus, tapi kali ini saya akan fokus membahas cara menampilkan tautan jumlah komentar disqus di blogger yang menggunakan template fletro pro.

Template ini sendiri memberikan 3 opsi sistem komentar dalam template, yang pertama komentar blogger, facebook dan disqus. Pengguna template bisa memilih ingin menggunakan anatara ketiga itu.

Secara default template fletro pro menggunakan sistem komentar blogger, dimana optimasi komentar sudah dibuat oleh developernya, seperti menampilkan icon dan jumlah komentar. Lalu bagaimana dengan sistem komentar disqus di fletro pro?

Menampilkan Jumlah Tautan Komentar Disqus di Fletro Pro

Download Fletro Pro v6.1 Premium Template Blogger - InpuTekno
Download Template Fletro Pro v6.0 Premium Blogger secara Gratis.
www.inputekno.comwww.inputekno.com
Download Fletro Pro v6.1 Premium Template Blogger - InpuTekno

Jika kita memilih merubah tampilan komentar dari blogger ke disqus, icon atau jumlah komentar di template fletro pro tidak akan muncul.

Dimana jika kita ingin memunculkan tautan jumlah komentar harus merubah kode komentar blogger menjadi kode komentar disqus untuk memunculkan icon atau tautan jumlah komentar disqus.

Contoh tampilan kalian bisa melihat di halaman beranda atau postingan ini.

Lalu bagaimana cara memunculkan icon dan tautan jumlah komentar disqus blogger di template fletro pro? Berikut panduannya:

Menyesuaikan Teks Tautan Jumlah Komentar Disqus

Pertama kamu harus menyesuaikan kalimat tautan disqus, secara default akan menampilkan seperti ini "0 Komentar".

Disini kita hanya memerlukan jumlahnya saja, yaitu "0". Maka yang perlu dilakukan adalah sesuaikan di halaman Admin Disqus.

Jumlah Tautan Komentar Disqus Blogger
  1. Masuk akun disqus
  2. Lanjut ke halaman Admin Disqus > Pengaturan > Komunitas
  3. Kemudian sesuaikan setelannya seperti berikut
    • Zero comments: 0
    • One comment: 1
    • Multiple comments: {num}
  4. Terakhir klik save

Setelah selesai, sekarang lanjut ketahap menampilkan jumlah komentar disqus di bloggernya.

Menampilkan Jumlah Komentar Disqus di Blogger

  1. Masuk ke halaman draft.blogger.com
  2. Lanjut Klik Tema > klik Drop down > Edit HTML
  3. Cari kode </body>, Ctrl + F mempercepat pencarian

  4. Lanjut Copy kode di bawah, lalu Paste tepat di atas </body>

    <script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = 'USERNAME_DISQUS';
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
      var s = document.createElement('script');
      s.async = true;
      s.type = 'text/javascript';
      s.src = '//' + disqus_shortname + '.disqus.com/count.js';
      (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
</script>

    Ubah username nya menjadi username disqus kalian

  5. Lanjut cari kode ]]></b:skin>, Ctrl + F mempercepat pencarian

  6. Lanjut Copy kode CSS di bawah, lalu Paste tepat di atas ]]></b:skin>

    /* Edit Jumlah Komentar Disuqs Fletro Pro */
/* Home Page Disqus */
.iFxd .cmnt::before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M87.49 380c1.19-4.38-1.44-10.47-3.95-14.86a44.86 44.86 0 00-2.54-3.8 199.81 199.81 0 01-33-110C47.65 139.09 140.73 48 255.83 48 356.21 48 440 117.54 459.58 209.85a199 199 0 014.42 41.64c0 112.41-89.49 204.93-204.59 204.93-18.3 0-43-4.6-56.47-8.37s-26.92-8.77-30.39-10.11a31.09 31.09 0 00-11.12-2.07 30.71 30.71 0 00-12.09 2.43l-67.83 24.48a16 16 0 01-4.67 1.22 9.6 9.6 0 01-9.57-9.74 15.85 15.85 0 01.6-3.29z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E");margin:0 2.5px;opacity:.7;height:16px;width:16px}
.pIc .disqus-comment-count{font-size:10px;padding-bottom:15px;}
/* Post Page Disqus */
.pInf .pIc .cmnt::before{content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Cpath d="M87.49 380c1.19-4.38-1.44-10.47-3.95-14.86a44.86 44.86 0 00-2.54-3.8 199.81 199.81 0 01-33-110C47.65 139.09 140.73 48 255.83 48 356.21 48 440 117.54 459.58 209.85a199 199 0 014.42 41.64c0 112.41-89.49 204.93-204.59 204.93-18.3 0-43-4.6-56.47-8.37s-26.92-8.77-30.39-10.11a31.09 31.09 0 00-11.12-2.07 30.71 30.71 0 00-12.09 2.43l-67.83 24.48a16 16 0 01-4.67 1.22 9.6 9.6 0 01-9.57-9.74 15.85 15.85 0 01.6-3.29z" fill="none" stroke="%2308102b" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"/%3E%3C/svg%3E');width:20px;height:18px;margin:0 2.5px;padding-top:6px;position:relative}
.drK .pInf .pIc .cmnt::before{content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Cpath d="M87.49 380c1.19-4.38-1.44-10.47-3.95-14.86a44.86 44.86 0 00-2.54-3.8 199.81 199.81 0 01-33-110C47.65 139.09 140.73 48 255.83 48 356.21 48 440 117.54 459.58 209.85a199 199 0 014.42 41.64c0 112.41-89.49 204.93-204.59 204.93-18.3 0-43-4.6-56.47-8.37s-26.92-8.77-30.39-10.11a31.09 31.09 0 00-11.12-2.07 30.71 30.71 0 00-12.09 2.43l-67.83 24.48a16 16 0 01-4.67 1.22 9.6 9.6 0 01-9.57-9.74 15.85 15.85 0 01.6-3.29z" fill="none" stroke="%23fffdfc" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"/%3E%3C/svg%3E');width:20px;height:18px;margin:0 2.5px;padding-top:6px;position:relative}

Berikutnya kita akan merubah markup komentar blogger dengan kode yang akan menampilkan jumlah komentar disqus.

Silakan cadangkan dulu template kamu sebelum mengikuti tahap ini, takut terjadi kegagalan

Jumlah Tautan Komentar Disqus Blogger

  1. Cari kode berikut

    <b:includable id='postCommentsLinks'>
  <b:if cond='data:post.allowComments and data:post.numberOfComments &gt; 0'>
    <a class='cmnt' expr:aria-label='data:messages.comments' expr:data-text='data:post.numberOfComments' expr:href='data:post.url.canonical fragment &quot;comment&quot;' role='button'>
     <b:include name='chat-icon'/>
    </a>
  </b:if>
</b:includable>

  2. kemudian ganti semua kode di atas dengan kode di bawah ini

    <b:includable id='postCommentsLinks'>
  <b:if cond='data:post.allowComments '>
    <a class='disqus-comment-count cmnt' expr:aria-label='data:messages.comments' expr:data-disqus-url='data:post.url' expr:href='data:post.url fragment &quot;#disqus_thread&quot;' role='button'>
    </a>
  </b:if>
</b:includable>

  3. Kedua cari kode berikut

    <b:includable id='postCommentsUrl'>
  <b:if cond='data:post.allowComments and data:post.numberOfComments &gt; 0'>
    <a class='cmnt' expr:aria-label='data:messages.comments' expr:data-text='data:post.numberOfComments' expr:href='data:post.url.canonical fragment &quot;comment&quot;' role='button'>
      <b:class cond='data:view.isSingleItem' name='tIc'/>
      <b:include name='chat-icon'/>
    </a>
  </b:if>
</b:includable>

  4. kemudian ganti semua kode di atas dengan kode di bawah ini

    <b:includable id='postCommentsUrl'>
  <b:if cond='data:post.allowComments'>
    <a class='cmnt' expr:aria-label='data:messages.comments' expr:data-disqus-url='data:post.url' expr:href='data:post.url fragment &quot;#disqus_thread&quot;' role='button'>
    <b:class cond='data:view.isSingleItem' name='tIc'/>
    </a>
  </b:if>
</b:includable>

  5. Ketiga cari kode berikut

    <b:includable id='postCommentsLabel'>
  <b:if cond='data:post.allowComments and data:post.numberOfComments &gt; 0'>
    <label class='cmnt' expr:data-text='data:post.numberOfComments' for='forComments'>
      <b:class cond='data:view.isSingleItem' name='tIc'/>
      <b:include name='chat-icon'/>
    </label>
  </b:if>
</b:includable>

  6. Kemudian ganti semua kode di atas dengan kode di bawah ini

    <b:includable id='postCommentsLabel'>
  <b:if cond='data:post.allowComments'>
    <a class='disqus-comment-count cmnt' expr:aria-label='data:messages.comments' expr:data-disqus-url='data:post.url' expr:href='data:post.url fragment &quot;#disqus_thread&quot;' role='button'>
    </a>
  </b:if>
</b:includable>

  7. Keempat cari kode berikut

    <b:includable id='postCommentsLabela'>
  <b:if cond='data:post.allowComments and data:post.numberOfComments &gt; 0'>
    <label class='cmnt' expr:data-text='data:post.numberOfComments' for='forComments'>
      <b:class cond='data:view.isSingleItem' name='tIc'/>
      <b:include name='chata-icon'/>
    </label>
  </b:if>
</b:includable>

  8. kemudian ganti semua kode di atas dengan kode di bawah ini

    <b:includable id='postCommentsLabela'>
  <b:if cond='data:post.allowComments'>
    <label class='disqus-comment-count cmnt' expr:data-disqus-url='data:post.url' for='forComments' title='Comments'>
      <b:class cond='data:view.isSingleItem' name='tIc'/>
     </label>
  </b:if>
</b:includable>

Semua markup 1 sampai 4 tersebut berurutan, jadi tidak sulit mencarinya, kamu tinggal ubah semua markup tersebut dengan kode di atas masing-masing.

Berikutnya cari kode tag class iFxd seperi di bawah ini, kemudian hapus bagian kode yang di tandai.

<b:tag class='iFxd' cond='data:post.allowComments and data:post.numberOfComments &gt; 0 or data:post.labels any (label =&gt; label.name in [ &quot;Sponsored&quot; ])' name='div'>

Ada 3 kode tag class iFxd, hapus bagian kode yang di tandai di ketiga tag class iFxd tersebut.

Terakhir, cari kode seperti di bawah ini <span><data:messages.joinTheConversation/></span> dan edit menjadi seperti berikut :

<span>(<label class='disqus-comment-count' expr:data-disqus-url='data:post.url' for='forComments'>0</label>) <data:messages.joinTheConversation/></span>

Penutup

Nah itu tadi Cara Menampilkan Jumlah Komentar Disqus Template Fletro Pro. Semoga artikel ini bisa bermanfaat. Jika ada pertanyaan silakan diskusi dikomentar atau melalui halaman forum.

Inputekno
#Keep Reading and Keep Working
Anda mungkin menyukai postingan ini
0 comments