Cara Memasang Widget Top Komentar Disquss




Cara Memasang Widget Top Komentar Disquss - Tips tutorial blog kali ini bagaimana cara memasang widget top komentar disquss diblog dimana sistem komentar disquss berikut merupakan sistem komentar yang sangat populer didunia. Disaat anda ingin mengetahui cara memasang widget top komentar disquss sangat tepat widget ini ditempatkan pada sidebar blog. Apapun platforms situs yang anda gunakan baik itu blogspot, wordpress, typepad, joomla, squarespace, drupal, moveable, tumblr, weebly, wix, type bisa menggunakan sistem layanan komentar disquss didunia maya untuk diinstall atau dipergunakan bagi anda dengan menerapkannya diblog.
https://www.google.co.id/imgres?imgurl=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fe%2Feb%2FDisqus_logo_official_-_blue_on_white_background.png&imgrefurl=https%3A%2F%2Fcommons.wikimedia.org%2Fwiki%2FFile%3ADisqus_logo_official_-_blue_on_white_background.png&docid=7S5SPTA-hFsKdM&tbnid=kyVPHvECV6h7kM%3A&vet=10ahUKEwjfi-7wn47VAhVINJQKHYizB5IQMwgtKAgwCA..i&w=480&h=120&itg=1&hl=id&safe=images&bih=1530&biw=980&as_q=disquss&ved=0ahUKEwjfi-7wn47VAhVINJQKHYizB5IQMwgtKAgwCA&iact=mrc&uact=8
Dengan mengetahui cara memasang sistem top komentar disquss anda bisa melihat tampilannya terlihat mobile dan seo friendly. Dengan menampilkan widget kolom komentar disquss hasil pengembangan pihak ketiga membuat keleluasaan bagi anda untuk memanage komentar disitus anda.

Cara Memasang Widget Recent Comment Disquss Diblog

Cara Pertama
Masuk ke akun blogger kemudian pilih dashboard blog >> Tema >> Edit Html kemudian cari kode dibawah ini kemudian tempatkan diatas kode </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Kemudian SIMPAN. Disini anda beralih ke TATA LETAK lalu pilih ADD WIDGET pilih HTML/JAVASCRIPT. Masukkan kode dibawah ini ke dalam widget tersebut.

 <style scoped="scoped" type="text/css">

#topcommenters{display:block;width:100%;margin:0 auto;padding:0 10px;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:auto}

.dsq-widget ul.dsq-widget-list{padding:0;margin:0;text-align:left}

img.dsq-widget-avatar{margin:3px 10px 7px 0!important;width:58px!important;height:58px!important;padding:0!important;float:left;border-radius:3px!important}

li.dsq-widget-item{margin:0!important;padding:6px 0 4px!important;list-style-type:none;clear:both;border-bottom:1px solid #ddd}

li.dsq-widget-item:last-child{border-bottom:none}

a.dsq-widget-user{font-weight:700;display:block!important;margin-bottom:5px}

</style>

<div id="topcommenters" class="dsq-widget">

<script type='text/javascript'>

//<![CDATA[

document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://SHORT NAME DISQUS ANDA.disqus.com/top_commenters_widget.js?num_items=5&hide_mods=1&hide_avatars=0&avatar_size=32\"></scr" + "ipt>");

//]]>

</script>

<script type='text/javascript'>

//<![CDATA[

$("#topcommenters a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');

//]]>

</script>

</div>

Anda tinggal mengganti tulisan yang diwarnai diatas dengan SHORT NAME DISQUSS ANDA. Terakhir simpan template anda.

Cara Kedua
Untuk memasang widget top komentar disquss. Anda login terlebih dahulu ke akun blogger seperti cara pertama ketuk Thema >> Edit Html kemudian tempatkan CSS dibawah ini tempatkan diatas pada kode css yang pertama yaitu </style>.

/* Recent Disqus Comments CSS */
#recent_comments{display:block;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;}
#recent_comments ul.dsq-widget-list{text-align:left;max-height:400px;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}
#recent_comments p.dsq-widget-meta a{display:inline-block;width:48%;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;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 span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#recent_comments .dsq-widget-comment p{display:inline-block;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}

Simpan Template

Kemudian lanjutkan ke menu dashboard blog, klik menu TATA LETAK >> ADD WIDGET >> HTML/JAVASCRIPT. Salin kode dibawah ini dan sematkan pada widget html tersebut.

<div id="recent_comments" class="dsq-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://themeindie.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");
//]]>
</script></div>

Anda tinggal mengganti tulisan yang diwarnai diatas dengan ID KOMENTAR DISQUSS ANDA. Terakhir simpan template anda.
Cara Mudah Menghapus Kolom Komentar Bawaan Blogger
Sekian sudah Cara Memasang Widget Top Komentar Disquss. Semoga bermanfaat.
Previous Post
Next Post

post written by:

10 20 komentar:

adi pradana said...

saya masih pake coment bawaan blogspot...

yanto cungkup said...

akan saya coba bila nanti saya sudah memakai komentar disqus mas.
makasih telah berbagi

Nama Blog Tekno said...

Nice info joss om kalo pake disquss

Nurdin Akbar said...

mantap nih widget disquss komentar jadi lebih efisien

CARA BUAT said...

wah pengen pasang juga tapi masih berat blog kebanyakan widget .. next pasti pasang juga ...

Bayu Gunawan said...

Izin praktek gan..
Nice info..

Uwan Urwan said...

Aku masih pake komen bawaan blogger sih mas... Hihi... Ini disqus kelebihannya apa sih selain banyak dipqke di seluruh dunia?

Kalo di detik sih udah ada komen disqus...

Febryan Ari Rusda said...

Apa sih keuntungan dari memasang sistem komentar disqus mas?
Mohon pencerahannya.

Btw makasih atas tutor yang diberikan.

Adi Jaya said...

Bisa membalas komentar tanpa masuk ke blog, adanya kolom komunitas sebagai akun follower bagi blogger lain yang ingin mengetahui update artikel bagi pemilik akun disquss.

Klik Danbo said...

klo dipake diblog saya. apakah gak terlalu berat diloading ke artikel?