Cara Memasang Notifikasi Komentar Disqus di Blog - Deny Listianto

June 5, 2018

Cara Memasang Notifikasi Komentar Disqus di Blog

Cara Memasang Notifikasi Komentar Disqus di Blog - Disqus merupakan salah satu platform sistem komentar terpopuler saat ini.

Disqus mempunyai tampilan yang Responsive dimana Responsive adalah tampilan yang dapat menyesuaikan ukuran layar yang di gunakan oleh pengguna. Selain tampilanya Disqus menawarkan fitur-fitur yang menarik diantaranya adalah sistem moderasi dan edit komentar.

Notifikasi Komentar Disqus di Blog

Masih banyak Fitur- Fitur dan Keunggulan lain yang ditawarkan Disqus, namun disini saya akan berbagi bagaimana Cara Memasang Notifikasi Komentar Disqus di Blog di blog sobat.

Fungsi atau cara kerja widget notifikasi komentar Disqus ini adalah untuk menampilkan komentar terbaru baik dari pengunjung maupun admin yang mengomentari artikel atau postingan di blog.

Cara pasangnya cukup mudah hanya Lima langkah mudah yang akan kita lakukan.

Bagi yang tertarik, Silakan disimak langkah berikut :

Tutorial Cara Mudah Memasang Notifikasi Komentar Disqus di Blog


1. Buka Blogger, lalu pindah ke menu Tema selanjutnya Edit HTML.
2. Salin kode CSS dibawah ini dan letakkan tepat di atas kode ]]></b:skin> atau </style>.

/* CSS Notifikasi Komentar Disqus */
.header-1 {background:#03a9f4;border-bottom:1px solid #ddd;height:30px;padding:15px;overflow:hidden}
.header-1 h4{font-size:15px;float:left;margin:5px;padding:2px;color:#fff}
.header-1 img{float:right}
.notif-show{position:fixed;top:10px;right:10px;z-index:10;color:#fff!important;background:#03a9f4;padding:10px;font-size:13px;border-radius:4px}
#disqus-notif.active{right:0}
#disqus-notif{position:fixed;background:#fff;z-index:99;width:30%;border-left:3px solid #e2e2e2;top:0;right:-500px;bottom:0;transition:all .7s ease-in-out}
#overlay-1.active{background:rgba(53,58,61,.9);position:fixed;z-index:90;overflow:hidden;width:100%;height:100%;top:0;left:0}.close-text{display:inline-block;font-weight:700;font-size:14px;position:relative;right:-15px;top:-7px;visibility:hidden;opacity:0;transition:all 250ms ease-in-out}.close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-80px,0,0);transform:translate3d(-80px,0,0)}
.close-1{position:fixed;margin-left:-50px;margin-top:20px;font-size:35px;font-weight:700;color:#fff!important}
#RecentComments{display:block;width:100%;margin:0 auto;padding:10px 0 10px 20px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;}
#RecentComments ul.dsq-widget-list{text-align:left;max-height:90%;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:#2e9fff}
#RecentComments p.dsq-widget-meta a:hover{color:#2e87e7}
#RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#2e87e7;font-weight:600}
#RecentComments li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user {display:table;color:#2e9fff;margin-top:8px;font-weight:700;font-size:14px}
#RecentComments a.dsq-widget-user:hover{color:#2e87e7;}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:80%;margin:0;font-weight:400;color:#444}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
.count-1{background:#ED1E24;padding:2px 5px;font-size:11px;border-radius:3px;position:absolute;top:-8px;left:-20px}
#RecentComments .dsq-widget-item pre:hover {opacity:1}
#RecentComments .dsq-widget-item pre code {color:#444;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:#d8e3b0}
#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}
@media screen and (max-width:480px) {#disqus-notif{width:100%}.close-1{margin:0;color:#444!important}}

3. Tambahkan kode HTML di bawah ini tepat di bawah kode <body> atau <body.

<a class='notif-show' href='javascript:;'><i class='fa fa-comments-o'></i><span class='count-1'>New!</span></a>
<div id='overlay-1'></div>
<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><a href='https://disqus.com' target='_blank' title='Disqus'><img alt='Disqus Logo' src='https://3.bp.blogspot.com/-GxPuYrEWjRA/Wt6bJW3fSbI/AAAAAAAAE1E/gUdQHSaGUXMs_QfK1mIm0JF9qvHd2xFFwCLcBGAs/s1600/Disqusq.png'/></a></div>
<div class='dsq-widget' id='RecentComments'>
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://deny-listianto.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=0&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>
</div>

4. Tambahkan kode Javascript di bawah ini tepat di atas kode </body>.

<script type='text/javascript'>
//<![CDATA[
// Notif Komentar 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")})});
//]]>
</script>

Pastikan blog sobat sudah terdapat link Font Awesome. Jika di Blog sobat belum terdapat Link Font Awesome, tambahkan stylesheet font awesome di bawah ini tepat di atas </head>

<link type='text/css' rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'/>

5. Simpan Tema dan lihat Hasilnya...

Sebagai contoh hasil tutorial di atas bisa di lihat melalui link dibawah ini.


Cukup mudah bukan? Sekian tutorial Cara Memasang Notifikasi Komentar Disqus di Blog jangan lupa di coba ya... Salam Blogger!!
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo