Cara Membuat Simple Disqus Recent Comments di Blogger

Cara Membuat Simple Disqus Recent Comments di Blogger

Cara Membuat Simple Disqus Recent Comments di Blogger - Halo, sobat blogger semua. Apa kabar? pada kesempatan kali ini saya kembali ingin berbagi sebuah tips blogger untuk sobat semua. Tips yang akan saya bagi kali ini cukup sederhana, dan sangat simple sekali namun saya rasa juga cukup penting bagi sobat yang menggunakan kotak komentar disqus khususnya.

Yap, tepat sekali. Pada artikel saya kali ini, saya akan berbagi tips tentang Cara Membuat Simple Disqus Recent Comments di Blogger. Seperti yang sudah kita ketahui bersama, jika para blogger sudah mulai pindah dan banyak menggunakan kotak komentar disqus untuk saling berinteraksi dengan pengunjung disetiap postingan atau artikel blog.

Saya sendiri sekarang sudah mulai menggunakan disqus sebagai kotak komentar. Menurut saya, enaknya jika kita menggunakan kotak komentar disqus yakni mudah dan tidak menyulitkan pengunjung untuk berkomentar. Apalagikan disqus tidak menggunakan captcha, sehingga sangat mudah untuk melakukan komentar secara langsung.

Baiklah, langsung saja. Bagi sobat semua yang juga sudah menggunakan kotak komentar disqus dan ingin tahu Cara Membuat Simple Disqus Recent Comments di Blogger. Sobat bisa mengikuti langkah sederhana dibawah ini.

Cara Membuat Simple Disqus Recent Comments di Blogger


1. Masuk ke blogger
2. Pilih tata letak > add gadget > html/javascript
3. Lalu paste kode dibawah ini kedalam content box widget tersebut.
<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:#aaa}
#RecentComments p.dsq-widget-meta a:hover{color:#ff675c}
#RecentComments li.dsq-widget-item{margin:0;padding:6px 10px 6px 0;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:92%;margin:0;font-weight:400;color:#444;max-width:100%;}
#RecentComments .dsq-widget-item pre{position:relative;background:#ffe4ad;padding-top:0;border-radius:4px;transition:all .3s}
#RecentComments .dsq-widget-item pre:hover {background:#ffe4ad;}
#RecentComments .dsq-widget-item pre code{color:#908575;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:#ebd099}
#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://semuatutorialkublog.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>

4. Simpan widget, selesai.

Catatan: Jangan lupa untuk mengganti ID Disqus dengan milik sobat.

Nah, saya rasa itu saja yang bisa saya bagikan untuk kesempatan kali ini. Semoga artikel singkat dan sederhana ini bisa bermanfaat untuk sobat semua. Selamat mencoba!

#Tags

Tidak ada komentar untuk *Cara Membuat Simple Disqus Recent Comments di Blogger!

Silahkan berkomentar sesuai topik artikel diatas dan jangan buang waktu anda hanya untuk membuat komentar SPAM disini.