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.
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 :
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>.
3. Tambahkan kode HTML di bawah ini tepat di bawah kode <body> atau <body.
4. Tambahkan kode Javascript di bawah ini tepat di atas kode </body>.
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>
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 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.
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'>×<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!!
