Top Commentator And Recent Comments Disqus

IwanBerbagi.com – Sebagai penghargaan saya kepada pengunjung blog cupu saya ini yang sudah menyempatkan berkomentar maupun berdiskusi ihwal artikel. Maka saya sudah buatkan halaman khusus untuk menampilkan Top Commentator dan Recent Comments.

Widget ini saya adopsi dari KompiAjaib, sebab Kang Adhy tidak kunjung membagikan cara membuatnya sebab sibuk ngoprek template AMP Google (kayaknya sih gitu). Makara saya putuskan untuk melihat kodenya eksklusif dan mempelajarinya dari template KompiAjaib. Dan saya coba lihat dan sesuaikan pada template saya. Dan kesudahannya berhasil juga saya adopsi ke blog cupu saya ini.

 Sebagai penghargaan saya kepada pengunjung blog cupu saya ini yang sudah menyempatkan ber Top Commentator and Recent Comments Disqus

Jika kau tertarik memasangnya juga pada blog kamu, kau dapat memasangnya dengan mudah. Kamu hanya perlu mengikuti step singkat berikut ini.

Membuat Halaman Static Baru
Karena widget ini akan kita tempatkan pada halaman tertentu biar tidak memberatkan loading blog dan juga akan menjadi satu halaman aja antar Top Komentator dan Recent Comments Disqusnya. Untuk lebih jelasnya kau lihat lagi deh demonya yah. Buat Halaman Static gres menyerupai berikut :

 Sebagai penghargaan saya kepada pengunjung blog cupu saya ini yang sudah menyempatkan ber Top Commentator and Recent Comments Disqus

Jika sudah kau dapat masuk pada mode HTML dan kau copy dan paste semua instruksi berikut ini pada mode HTML tersebut dan baca baik-baik beberapa pengaturan yang harus kau lakukan.

<style> #topcommenters,#RecentComments{display:block;width:100%;margin:0 auto;padding:10px 0 0;border-top:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:auto} .dsq-widget ul.dsq-widget-list{padding:0!important;margin-right:-30px!important;text-align:left} img.dsq-widget-avatar{margin:0 10px 7px 0!important;width:58px!important;height:58px!important;padding:0!important;float:left;border-radius:3px!important} .dsq-widget-comment p{font-size:12px;line-height:1.2em!important} .dsq-widget-comment{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px!important} p.dsq-widget-meta a{display:inline-block!important;width:48%;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap} li.dsq-widget-item{margin:0 3% 12px 0!important;padding:0 0 4px!important;list-style-type:none;clear:none!important;border-bottom:1px solid #ddd;display:inline;float:left;width:30.333333%} a.dsq-widget-user{font-weight:700;display:block!important;margin-bottom:5px} .clear{clear:both} .post-body {font-size:14px;line-height:1.2em!important} pre,code{margin:0;font-family: Roboto,Arial,sans-serif;} @media screen and (max-width:800px){li.dsq-widget-item{width:47%} .dsq-widget ul.dsq-widget-list{margin-right:0!important;} } @media screen and (max-width:414px){li.dsq-widget-item{width:97%} } #topcommenter:target {    display: block;    margin-top: -20px;    height: 20px;    visibility: hidden;  } .post-body h3{font-size:22px} </style>  <span id='topcommenter'></span> <h3>Top Commentators:</h3> <div id="topcommenters" class="dsq-widget"> <script type='text/javascript'> //<![CDATA[ document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://bloggerberbagi.disqus.com/top_commenters_widget.js?num_items=21&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=80\"></scr" + "ipt>"); //]]> </script> <div class="clear"></div> </div> <br/> <br/> <h3>Recent Comments:</h3> <div id="RecentComments" class="dsq-widget"> <script type='text/javascript'> //<![CDATA[ document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://bloggerberbagi.disqus.com/recent_comments_widget.js?num_items=21&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=80\"></scr" + "ipt>"); //]]> </script> <div class="clear"></div> </div> <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script> <script type='text/javascript'> //<![CDATA[ $("#topcommenters a,#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank'); //]]> </script>


Pengaturan Widget
Perhatikan warna pada script tersebut, dan mulai sesuaikan menyerupai berikut :

Baca Juga:  Pengumuman Beasiswa S2 Untuk Guru, Pengawas Sekolah, Kepsek
Warna Keterangan
Warna Hijau Ini merupakan username disqus yang kau gunakan, nah pada pola ini kan memakai username disqus yang saya gunakan pada blog ini. Sesuaikan aja yah..
Warna Kuning Sesuaikan dengan jumlah komentar dan jumlah recent comments yang ingin kau tampilkan pada halaman static Top Commentator pada widget ini.
Warna Merah Kita tahu setiap template pada umumnya sudah memakai Jquery. Namun ada beberapa template yang sudah dioptimasi dan menghindari penggunaan Jquery ini, maka dari itu perhatikan template kau apakah sudah memakai Jquery atau belum, jikalau sudah hapus script yang saya tandai warna merah tersebut.

Untuk posisi halaman static Disqus Commentator pada blog ini sudah saya letakkan pada penggalan footer sebelah kanan. Itu saya rasa posisi paling pas untuk template pada blog ini. Untuk kau sendiri dapat menyesuaikan yah. Semoga Bermanfaat..
Sumber https://www.iwanberbagi.com