Cara Memasang Widget Recent Comments Disqus Di Blog

Dengan membuat widget recent comments disqus di blogger maka secara otomatias widget ini akan membantu dan mempermudah pengunjung untuk mengetahui semua komentar disqus terbaru yang pada blog anda. Sebenarnya widget ini tidak begitu penting, namun widget ini juga mempunyai sebuah manfaat yang bagus untuk blog alasannya adalah  sistem komentar disqus tidak memberikan notifikasi komentar pada dashboard blog anda maka dari itu apabila anda menggunakan disqus comments pada blogspot, widget ini sangat cocok untuk blog yang dikelola.

Cara Memasang Widget Recent Comments Disqus Di Blog

Melalui artikel widget komentar terbaru ini, saya akan memberikan tips bagaimana cara memasang komentar baru disqus di sidebar blog seperti yang digunakan pada blog mediababe.net ini. Namun jika anda tidak menggunakan disqus pada blog anda, maka tutorial ini jangan anda terapkan pada blog karena widget ini hanya berfungsi untuk komentar disqus. Selain komentar disqus, misalkan komentar blog tidak akan terlihat pada widget komentar ini.

Untuk kalian yang ingin memasang recent comments bawaan blogger di sidebar blog, mungkin lain hari saya akan membahasnya pada pertemuan yang akan mendatang. Jadi tetap pantau saja blog mediababe.net ini ya guys.

Pada dasarnya menerapkan widget recent comments disqus di sidebar blog sangat mudah kita hanya perlu menambahkan widget baru beserta kode scriptnya ke dalam kolom html. Lalu bagaimana cara pemasangan widget recent comments disqus di blog? langsung saja simak caranya pada berikut ini.


Cara Membuat Widget Komentar Terbaru Disqus Di Sidebar Blogspot

Langkah pertama, Silahkan login dan masuk ke dashboard blogger anda.
Langkah kedua, pilihlah menu Tata Letak pada menu opsi dibilah kiri, kemudian tambahkanlah gadget/widget html javascript pada widget sidebar blog anda.
Langkah ketiga, Setelah anda berhasil menambahkan gadget baru maka tambahkan kode script di bawah ini tepat pada kolom html 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://USERNAME.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>

Ganti kode script username yang sudah ditandai pada kode script diatas menggunakan username disqus blog anda.

Langkah keempat tambahkan juga script di bawah ini tepat diatas kode </head> pada edit html di menu Template.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

Simpan template dan lihat hasilnya.

Demikianlah artikel Cara Memasang Widget Recent Comments Disqus Di Blog Semoga bermanfaat.


Gambar Gravatar
"Seseorang Informan yang baru belajar"

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *