Cara Memasang Recent Comments Disqus Terbaru Di Blogger

Recent comments disqus ini merupakan widget yang menampilkan komentar yang terbaru di blog kalian. Namun kalian harus memasang sistem komentar disqus terlebih dahulu sebelum menggunakan widget ini. Karena jika belum maka widget ini tidak akan menampilkan komentar apa-apa termasuk komentar dari default blogger.

Dengan memasang widget ini akan memudahkan pengunjung untuk mengetahui komentar terbaru di blog kalian. Selain itu juga bisa meningkatkan page views blog kita. Karena selain bisa melihat komentar terbaru maka pengunjung juga bisa mengetahui artikel yang dikomentari tersebut sehingga ia mungkin ingin ikut berkomentar juga hehe.

Cara Memasang Recent Comments Disqus Terbaru Di Blogger, bermanfaat untuk meningkatkan SEO blog serta page views blog sehingga bounce rate bisa turun. Dan posisi di search engine bagus bisa page one google.

Bagaimana banyak manfaatnya bukan? Langsung saja yuk pasang widget recent comment disqusnya. Tapi karena widget ini memakai font awesome untuk mempercantik tampilan maka kita perlu memasang script font awesome terlebih dahulu. Dibawah ini adalah script font awesomenya, salin dan pastekan diatas kode </head> di template blog.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Cara Memasang Recent Comments Disqus

1. Pertama
Silakan buka Blogger, pilih Tema → Edit HTML

2. Kedua
Salin kode CSS dibawah ini lalu pastekan diatas kode </head>

<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:16px;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:25%;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:14px;position:relative;right:15px;top:-7px;visibility:hidden;opacity:0;transition:all .5s}
#disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:6px;font-size:35px;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:95%;overflow:auto;overflow-x:hidden}
#RecentComments img.dsq-widget-avatar{margin:0 10px 0 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:#ced6e0;font-size:12px}
#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:20px 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{background:#535c68;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:700;color:#fff}#disqus-notif .close-text{display:none}}
</style>

3. Ketiga
Salin lagi kode dibawah ini lalu pastekan diatas kode </body>

<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>Notifications</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://anggasaveblog.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180\"></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>

Ganti kode yang berwarna kuning dengan username disqus blog sobat

Terakhir simpan template dan lihat hasilnya.

Bagaimana keren bukan? Cukup sekian artikel yang bisa saya bagikan semoga bisa membantu dan bermanfaat. Jika ada pertanyaan tanyakan saja di kolom komentar ya.

Subscribe to receive free email updates:

3 Responses to "Cara Memasang Recent Comments Disqus Terbaru Di Blogger"

  1. Syukron gan, rencana mau buat recent koment discuss ni,, hehehe

    Oya Gan maaf mau nanya ni n lari dari pembahasan, membuat unit iklan seperti puna agan ni melayang di sebalah kanan gak melanggar tos adsns atau mlanggar gan,,?? thnkyou sblumnya ya...

    ReplyDelete
    Replies
    1. Sejauh ini masih aman mas, saya belum pernah dapat peringatan dari GA. Iklannya aman dari invalid click jadi aman.

      Delete
    2. owgh.. iya gan makasih infonya.. saya pasang juga iklan gitu.. jdi nanya" dulu.. thax yak

      Delete

Jangan ada link aktif di komentar karena komentar anda di moderasi!