Cara membuat halaman khusus komentar disqus

Pada blog goinsan.com ini menyediakan dua tipe kolom komentar yaitu kolom komentar bawaan blogger dan kolom komentar disqus. Namun yang diprioritaskan adalah kolom disqus sehingga pada saat halaman artikel dicroll ke bawah kolom disqus yang akan terlihat. Untuk mengakses kolom komentar bloger sendiri cukup dengan mengklik tombol blogger yang tersedia.

Menggunakan dua kolom komentar sekaligus sebenarnya bisa dibilang mubazir, namun mengingat bahwa tidak semua pengunjung yang datang memiliki akun blogger atau sebaliknya. Padahal jika dipikir, penggunaan dua jenis "threaded comment system" ini memiliki efek negatif juga, seperti pada masalah konsistensi serta masalah penurunan kecepatan blog.

Disqus sendiri merupakan sebuah "sistem berkomentar" yang banyak digunakan, bahkan mayoritas blogger yang yang sering kunjungi menggunakan disqus sebagai sistem komentar default dan menyembunyikan sistem komentar bawaan. Fleksibilitas dan tampilan yang lebih baik mungkin menjadi alasan mengapa disqus menjadi pilihan.

Namun entah kenapa sistem komentar disqus pada blog ini mengalami masalah. Masalahnya adalah setiap ada komentar baru yang masuk maupun balasan, sistem tidak menunjukkan notifikasi. Entah karena ada pengaturan khusus yang saya lewatkan atau apa. Hal ini cukup merepotkan karena komentar maupun balasan komentar baru akan terabaikan kecuali jika saya harus membuka artikel pada blog ini satu per satu.

Sebenarnya saya bisa mencoba membuat nama diskusi yang baru dan memasangnya di blog ini namun hal tersebut akan berimbas hilangnya komentar yang sudah ada. Belum banyak sih tapi tetap saja sayang. Daripada mengganti saya mendapatkan ide lain yaitu dengan membuat sebuah laman khusus (mandiri) yang akan menampilkan recent comment alias komentar terbaru dari disqus.

Konsepnya adalah saya membuat sebuah laman baru kemudian memasang script recent comment dari disqus sehingga laman tersebut akan memunculkan komentar-komentar yang ada pada blog ini. Selanjutnya saya cukup membookmark halaman ini pada browser sehingga membutuhkan satu klik saja untuk mengaksesnya. Cukup simpel bukan. Lalu apa keuntungan dengan menerapkan konsep ini? Pastinya ada beberapa keuntungan antara lain yaitu:

• Sangat mudah diakses.
• Kita bisa langsung melihat SEMUA komentar terakhir yang dipublis di blog kita, tampa harus mebuka artikel di blog.
• Kita bisa melihat komentar langsung tanpa membuka halaman utama disqus.
• Terletak pada halaman independen yang hanya menapilkan kolom recent comment saja, sehingga tidak akan terlalu membebani blog.

Selain keuntungan tetap aja ada sisi minusnya, antara lain:

• Hanya menampilkan komentar saja.
• Aksi lain seperti reply maupun upvote, downvote, falgging, maunpun share tidak tersedia. Kecuali link ke halaman artikel di buka.
• Seperti poin diatas, ujung-ujungnya laman artikel dibuka juga.

Lalu bagaimana untuk mengaplikasikan Disqus recent comment ini? Caranya cukup mudah. Bagi yang ingin memasangnya juga silahkan ikuti langkah-langkah berikut.

1. Buat halaman baru
   
   
   
   
2. Pilih mode html lalu copy dan paste kode script disqus's recent comment dan css di bawah pada halaman yang dibuat sebelumnya.
   
   
   
   

   <div class="dsq-widget" id="recent_comments">
   <script src="https://goinsan.disqus.com/recent_comments_widget.js?num_items=18&amp;hide_mods=0&amp;hide_avatars=0&amp;avatar_size=32&amp;excerpt_length=120" type="text/javascript">
   </script></div>
   <style>
   #recent_comments{display:block;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
   #recent_comments ul.dsq-widget-list{text-align:left;overflow:auto}
   #recent_comments ul.dsq-widget-list::-webkit-scrollbar {height:8px;width:8px;background:#f5f5f5}
   #recent_comments ul.dsq-widget-list::-webkit-scrollbar-thumb {background-color:#e2e2e2;}
   #recent_comments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;clear:both;display:block}
   #recent_comments p.dsq-widget-meta{clear:both;font-size:85%;margin-top:5px;font-weight:400;font-style: italic;}
   #recent_comments p.dsq-widget-meta a{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aaa}
   #recent_comments p.dsq-widget-meta a:hover{color:#E9A12F;text-decoration:underline}
   #recent_comments li.dsq-widget-item{margin:0;padding:10px 0;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#999;font-weight:400;line-height:1.3em!important}
   #recent_comments li.dsq-widget-item:last-child{border-bottom:none}
   #recent_comments a.dsq-widget-user {display:table;color:#010101;font-weight:700;}
   #recent_comments a.dsq-widget-user:hover{color:#E9A12F;}
   #recent_comments .dsq-widget-comment p{font-size:92%;margin:0;font-weight:400;color:#444;/*! max-width:100%; */}
   #recent_comments .dsq-widget-item pre{position:relative;background:#ffe4ad;padding-top:0;border-radius:4px;transition:all .3s}
   #recent_comments .dsq-widget-item pre:hover {background:#ffe4ad;}
   #recent_comments .dsq-widget-item pre code{color:#908575;font-size:82%}
   #recent_comments .dsq-widget-item pre:before{content:&#39;&#39;;position:absolute;padding:initial;font-size:initial;text-indent:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#ebd099}
   #recent_comments .dsq-widget-item pre:after{content:&#39;&#39;;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>

3. Ganti "goinsan" dengan nama disqus kalian lalu simpan.
4. Bookmark pada browser dengan cara buka halaman recent coment tersebut tadi lalu pada area bar bookmark, klik kanan dan "add page" untuk chrome, dan cukup drag and drop untuk firefox.
   
   
   

Result

Refrensi:
Disqus.com
www.bungfrangki.com/2017/06/cara-memasang-disqus-recent-comment.html