Cara Gampang Memasang Notifikasi Komentar Disqus Di Blog

Cara Praktis Memasang Notifikasi Komentar Disqus di Blog - Setelah beberapa-hari aku tidak membagikan tutorial ataupun template gres di Blog ini sebab terlalu fokus terhadap Jasa ReDesign yang aku buka dan update Template yang sudah pernah aku share sebelumnya. Saya mendapat pandangan gres widget Notifikasi Komentar Disqus ini dari sahabat blogger kita yaitu : Renaldy Rizki Ramadani yang menyarankan semoga aku menciptakan widget notifikasi komentar disqus yang menarik.

Fungsi dan cara kerja widget ini ialah menampilkan komentar-komentar Disqus terbaru pada blog sobat. Yang hadir dalam tampilan simple dan keren dengan pengaruh yang sederhana.

Berikut Tutorial Cara Memasang Notifikasi Komentar Disqus di Blog

1. Masuk ke Blogger > Template > Edit HTML > Kemudian tambahkan aba-aba CSS di bawah ini sempurna di atas aba-aba ]]></b:skin> atau </style>

/* CSS Notifikasi Komentar Disqus */ .header-1 {background:#fff;border-bottom:1px solid #ddd;height:30px;padding:15px;overflow:hidden} .header-1 h4{font-size:15px;float:left;margin:5px;padding:2px;color:#555} .header-1 img{float:right} .notif-show{position:fixed;top:10px;right:10px;z-index:9997;color:#fff!important;background:#444;padding:10px;font-size:13px;border-radius:4px} #disqus-notif.active{right:0} #disqus-notif{position:fixed;background:#fff;z-index:9999;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:9998;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;font-size:12px} #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;margin-top:8px;color:#2e9fff;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:13px;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}}

Selanjutnya tambahkan aba-aba HTML di bawah ini sempurna di bawah aba-aba <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwXOE7the3UBP_t_-OQGSWdvy-lGtHTcFrvHplr3mUG_nWVGLqjbTu1HYQy3oXbz05Z6ThwueyKC54WeojU0XlOR2NMHLLZSGyKV6fukhZWjVhZJl3OFA4OOVLjFzwF9ztNiHWCsHplPpS/s1600/disqus-1.png'/></a></div> <div class='dsq-widget' id='RecentComments'> <script defer='defer' type='text/javascript'> //<![CDATA[ document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://duniablanter.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>

duniablanter ganti dengan user name disqus sobat.

Langkah Terakhir, tambahkan aba-aba Javascript di bawah ini sempurna di atas aba-aba </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>

Jika di Blog sahabat belum terdapat Link Font Awesome, tambahkan stylesheet font awesome di bawah ini sempurna di atas </head>

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

Simpan Template...

Result

Semoga Tutorial ini bermanfaat. Terimakasih.

Sumber https://www.idblanter.com