02 September 2017

Cara Membuat Widget Komentar Terbaru Disqus di Blog

Komentar Disqus adalah sistem komentar yang paling banyak di gunakan oleh situs-situs besar seperti CNN, ataupun blog-blog yang sudah terkenal seperti Arlina Desing. Komentar disqus sebelumnya adalah komentar yang tidak di kenal, namun semenjak banyaknya perbaikan pada sistem komentar ini, kini sistem komentar disqus adalah komentar yang paling sering digunakan. Pada tutorial kali ini saya akan membagikan cara membuat widget komentar terbaru disqus di blog.
Cara Membuat Widget Komentar Terbaru Disqus di Blog

bagi agan-agan yang ingin belum menggunakan widget komentar terbaru ini, silahkan ikuti cara ini. Namun bagi yang belum memasang komentar disqus di blog, silahkan lihat dulu caranya di sini.

(Baca juga : Cara Memasang Komentar Disqus di Blogger dengan Mudah)

Widget komentar terbaru disqus ini akan menampilkan beberapa komentar yang ada, baik dari admin maupun pengunjung yang berkomentar di blog. Nah, langsung saja untuk cara memasang widget komentar terbaru disqus di blog, ikuti cara dari saya berikut ini.

Cara Memasang Widget Komentar Terbaru Disqus di Blog

  • Langkah pertama silahkan masuk ke akun Blogger agan
  • pilih menu Tata Letak, pilih posisi penempatan widget yang agan inginkan, pilih Tambahkan Gadget, pilih HTML/JavaScript, masukan Judul widget, kemudian masukan script widget komentar disqus di bawah ini tepat di kolom Konten
  • <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://tutorialumum.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>
  • Pengaturan :
  • Setelah selesai mengatur, silahkan pilih Simpan
  • Sekarang lihat blog agan, jika berhasil maka widget akan muncul seperti ini.
    Cara Memasang Widget Komentar Terbaru dari Disqus


Cara Mengetahui URL Admin Komentar Disqus

  1. Langkah pertama login akun Disqus agan
  2. Di pojok kanan atas klik thumbnail gambar disqus agan, pilih View Profile
    Cara Membuat Widget Komentar Disqus di Blog
  3. Masih di arah pojok kanan atas klik icon Settings, pilih Admin
    Cara Mudah Memasang Kolom Komentar Disqus di Blogspot
  4. Jika sudah masuk, sekarang pilih menu Your Sites, pilih admin yang sesuai dengan admin blog agan
    Cara Memasang Widget Komentar Terbaru Disqus
  5. Sekarang lihat URLnya, itu adalah URL Admin Disqus-nya.
    Menampilkan Widget "Komentar Terbaru" DisQus


Demikian tutorial dari saya mengenai cara membuat widget komentar terbaru disqus di blog. Jika ada pertanyaan mengenai cara pemasangannya, ataupun cara melihat URL admin disqus, silahkan agan masukan kedalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel ini bermanfaat untuk agan dalam membangun sebuah blog. Untuk tutorial yang lainnya dari saya mengenai widget blogger, tutorial blogger, dan tutorial yang lainnya, silahkan tetap kunjungi blog Tutorial Umum.

2 comments

Lebih simple ini ya ternyata. thank.

simple dan mudah digunakan, disqus mantap...

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon