Jumat, 25 November 2016

Mudahnya Melihat Komentar Terbaru dari Disquss yang Hanya Tampil Disetiap Artikel

Template kamu sudah menggunakan Platform Disquss?

Disquss adalah sebuah Platform yang menyediakan Sistem Komentar yang sudah sangat populer sampai saat ini.

Untuk memasang platform ini kedalam template blog, sebelumnya kamu memang harus memiliki akun Disquss terlebih dulu.

Nah kali ini saya anggap kamu sudah memasang sistem komentar disquss ini kedalam template yang saat ini kamu gunakan ya, karena trik yang akan saya bahas kali ini tentang Mudahnya Melihat Komentar Terbaru dari Disquss yang Hanya Tampil Disetiap Artikel.

Mudahnya Melihat Komentar Terbaru dari Disquss yang Hanya Tampil Disetiap Artikel

Platform Blogger memang memiliki jutaan fitur, seperti widget recent post, popular post, recent comments dan masih banyak lagi.

Tapi sayangnya blogger tidak menyediakan Widget khusus untuk Menampilkan Komentar Disquss pada tab Tata Letak.

Lalu bagaimana caranya agar kamu dan semua pengunjung blog kamu juga bisa melihat komentar terakhir dari disquss yang tampil di blog kamu dalam 1 widget?

Yups.. Jawabannya adalah Widget Recent Comments dari Disquss, yuk ikuti langkah-langkahnya dibawah ini.

Kamu bisa mulai login dulu kedalam akun blogger kamu, lalu buka tab Tata Letak dan pilih Tambahkan Gadget pada salah satu Sidebar yang ada.

Setelah itu akan muncul beberapa pilihan yang disediakan oleh blogger, silahkan kamu pilih HTML/JavaScript lihat gambar dibawah ini.

tambah widget

Selanjutnya akan muncul dialog box, lalu silahkan kamu salin kode dibawah ini, lalu tempel kode pada dialog box tadi.
<style scoped="scoped" type="text/css">
#RecentComments{display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;}
#RecentComments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto;}
#RecentComments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444}
#RecentComments p.dsq-widget-meta a:hover{color:#ff675c}
#RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600}
#RecentComments li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600;}
#RecentComments a.dsq-widget-user:hover{color:#999;}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:88%;margin:0;font-weight:400;color:#444}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
#RecentComments .dsq-widget-item pre:hover {opacity:1}
#RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}
#RecentComments .dsq-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}
#RecentComments .dsq-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}
</style>
<div id="RecentComments" class="dsq-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://kangwira.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div>

Rubah ID kangwira yang sudah saya tandai berwarna merah pada kode diatas dengan ID Disquss kamu, lalu simpan Widget tersebut dan lihat hasilnya.
Kode Recent Comment yang kamu terapkan tadi akan menampilkan Widget Komentar Terbaru disetiap artikel dan akan tampil juga pada halaman utama blog

Untuk Menempatkan Widget Komentar Terbaru dari Disquss yang Hanya Tampil Disetiap Artikel saja, kamu bisa menggunakan fungsi tag kondisional. Perhatikan Langkahnya dibawah ini.

Baca juga: Fungsi Tag Kondisional


Langkah Pertama, Buka kembali Widget Komentar Terbaru yang tadi kamu buat. lalu lihat URL terakhir pada kolom URL yang ada pada dialog box tersebut.

Perhatikan URL yang sudah saya tandai pada gambar dibawah ini.
url widget

Pada Widget Komentar Baru yang saya gunakan kali ini memiliki ID HTML7 seperti yang saya tandai pada gambar diatas.

Untuk selanjutnya silahkan kamu buka tab Template dan pilih edit HTML dan Pilih Tab Loncat Ke Widget > HTML7.

html7

Selanjutnya kamu salin kode dibawah ini dan tempel setelah kode <b:includable id='main'> pada HTML7 tadi.
 <b:if cond='data:blog.pageType == &quot;item&quot;'>

Konten Widget Komentar Terbaru (jangan diedit)

</b:if>

Lihat Gambar berikut ini untuk memperjelas trik memasang Widget Komentar Terbaru dari Disquss yang Hanya Tampil disetiap Artikel saja.

tag kondisional

Jika ada pertanyaan, silahkan berikan komentar kamu pada sistem komentar disquss yang saya gunakan dibawah artikel ini.

Semoga Trik Mudahnya Melihat Komentar Terbaru dari Disquss yang Hanya Tampil Disetiap Artikel ini mudah dipahami.
Maaf apabila ada kekurangan atau kesalahan dalam penulisan.