Cara Mudah Membuat Widget Recent Comments Disqus Keren Pada Blogger

Jokam-Informatika.com - Bagi sobat yang memiliki sebuah blog ataupun website pastinya sudah tidak asing dengan komentar para pengunjung, sebuah komentar dari pengunjung sangatlah penting bagi pemilik website karena dapat memberikan indikasi kepada para pengunjung bahwa tulisan yang sudah kita muat telah dibaca dan juga didiskusikan oleh berbagai pengunjung sebelum kita. Namun sebagai admin, pastinya kita mempunyai kewajiban yang besar untuk membalas pertanyaan yang diajukan oleh komentator. Oleh karena itu seharusnya apabila anda sebagai pemilik website maka anda diwajibkan mengetahui satu persatu komentar terbaru yang belum anda jawab. Dengan adanya widget ini maka pekerjaan anda akan terasa lebih ringan dan anda juga bisa terhindar dari ketidaktahuan komentar terbaru. Padahal hal tersebut sangatlah penting untuk dibalas sebagai admin yang baik.

Seperti apakah cara pembuatannya dan apa kelebihannya ?

Simak ulasan berikut ini untuk mengetahuinya,

Widget Komentar - adalah salah satu fitur yang memudahkan admin dalam meninjau komentar yang ditambahkan oleh pengunjung ketika mereka mengalami kendala ataupun sebuah permasalahan pada saat mempelajari konten anda. Dengan memiliki widget ini maka tentunya memudahkan anda pada saat me-moderasi komentar pengunjung. Berikut ini merupakan cara untuk membuatnya :

Masuk pada dashboard Blogger.

KLIK DISINI

Kemudian klik tab "Theme" kemudian klik "Edit HTML".
Lalu cari tulisan dengan cara "CTRL+F" dan tulis "</head>".
Setelah ketemu maka tempatkan kode ini diatas </head> tersebut dengan kode CSS berikut :


/* Widget Recent Comments*/

<style type='text/css'>
/* Animation */
@keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}
/* Recent Comments Disqus */
.header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}
.header-1 h4{font-size:18px;float:left;color:#fff}
.header-1 img{float:right}
.notif-show{position:fixed;top:10px;right:10px;z-index:997;color:#fff!important;background:rgba(0,0,0,0.2);font-size:26px;font-weight:normal;width:auto;padding:6px 8px;cursor:pointer;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:2px;transition:all .6s}
.notif-show:hover{background:#2e9eff;animation:rubberBand 1s}
#disqus-notif{position:fixed;background:#fff;z-index:999;width:30%;top:0;right:-769px;bottom:0;transition:all .5s}
#disqus-notif.active{right:0}
#overlay-1.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0}
#disqus-notif .close-text{display:inline-block;font-weight:700;font-size:15px;position:relative;right:21px;top:-12px;visibility:hidden;opacity:0;transition:all .5s}
#disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:auto;font-size:50px;font-weight:700;color:#fff}
#disqus-notif .close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}
#RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%}
#RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:92%;overflow:auto;overflow-x:hidden}
#RecentComments img.dsq-widget-avatar{margin:0 10px 0 0;width:77px;height:80px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;margin-bottom:15px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:97%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ced6e0;font-size:13px}
#RecentComments p.dsq-widget-meta a:hover{color:#a4b0be}
#RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:1px solid rgba(0,0,0,0.08)}
#RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:700;font-size:14px;margin:7px 0 0 0}
#RecentComments a.dsq-widget-user:hover{color:#2e87e7}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin:75px 10px 10px 0}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444;line-height:1.5}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f8cf82;color:#000;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px}
#RecentComments .dsq-widget-item pre code{color:#000}
#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}
@media screen and (max-width:1366px){#disqus-notif{width:35%}}
@media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{top:60px;right:10px;z-index:997;background:#535c68;text-align:right;margin:0;padding:0 10px;position:absolute;font-size:35px;font-weight:700;color:#fff}#disqus-notif .close-text{display:none}#RecentComments ul.dsq-widget-list{max-height:92%}}
</style>

Kemudian cari lagi dengan cara "CTRL+F" dan tulis "</body>".
Setelah ketemu maka tempatkan kode ini diatas </body> tersebut dengan kode Javascript HTML berikut :


<a class='notif-show' href='javascript:;'><i class='fa fa-bell'/></a>
<div id='overlay-1'/>
<div id='disqus-notif'>
<a class='close-1' href='javascript:;' title='Close'>&#215;<span class='close-text'>Close</span></a>
<div class='header-1'><h4>Comments</h4><img alt='Disqus Logo' src='https://3.bp.blogspot.com/-GxPuYrEWjRA/Wt6bJW3fSbI/AAAAAAAAE1E/gUdQHSaGUXMs_QfK1mIm0JF9qvHd2xFFwCLcBGAs/s1600/Disqusq.png' title='Disqus'/></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://jokam-informatika.disqus.com/recent_comments_widget.js?num_items=189&hide_mods=1&hide_avatars=0&avatar_size=35&excerpt_length=354\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>

<script defer='defer' type='text/javascript'>
//<![CDATA[
// Recent Comments Disqus
$(function(){$(".notif-show").on("click",function(){$("#disqus-notif").addClass("active").focus()});$(".close-1").on("click",function(){$("#disqus-notif").removeClass("active")})});
$(function(){$(".notif-show").on("click",function(){$("#overlay-1").addClass("active").focus()});$(".close-1").on("click",function(){$("#overlay-1").removeClass("active")})});
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow noopener').attr('target', '_blank');
//]]>
</script>

Keterangan :
jokam-informatika = ganti dengan id disqus sobat
num_items = jumlah komentar yang ditampilkan
hide_mods = berguna untuk komentar admin (0 untuk menampilkan, 1 untuk menyembunyikan)
hide_avatars = berguna untuk foto komentator (0 untuk menampilkan, 1 untuk menyembunyikan)
avatar_size = ukuran foto
excerpt_length = karakter huruf yang dimuat

Kemudian save dan terapkan pada blog.
Lalu cek website anda apabila berhasil maka, akan timbul sebuah lonceng di pojok kanan atas website sobat. dan apabila di klik akan menunjukan berbagai komentar terbaru dari website blog sobat.