Cara Simple Memasang Notifikasi Komentar Disqus Di Blog - Tips blogger kali ini akan membahas tentang recent Disqus comment yakni bagaimana cara membuat notifikasi komentar disqus pada blogspot. Tips memasang notifikasi disqus di blogger ini telah dikembangkan oleh idblanter. Maka dari itu widget notifikasi comment disqus bisa digarap dengan tampilan design yang menarik.
Tujuan memasang notifikasi recent comment disqus ini adalah menampilkan sejumlah komentar terbaru yang telah dipublikasikan oleh pengunjung melalui disqus comment system. Desain dari tampilannya pun sangat sederhana dan tentunya juga menarik untuk dipandang.
Berikut langkah-langkah pemasangan notifikasi disqus comment di blog dengan mudah.Cara Simple Memasang Notifikasi Komentar Disqus Di Blog:
1. Langkah pertama, silahkan login dan masuk ke dashboard blogger anda. Kemudian pilihlah menu Template > Edit HTML.
2. Langkah kedua, tambahkan kode css di bawah ini tepat di atas kode </style> atau ]]></b:skin>
/* 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}}
3. Langkah ketiga, tambahkan juga kode HTML di bawah ini tepat di atas kode </body>
3. Langkah ketiga, tambahkan juga kode HTML di bawah ini tepat di atas kode </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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOoXJ83kglaq2EyEd86R2aWSKk3CF2ib3oaigP_7pyL0AVFwWgVvT9pWy8zHdGRAqbJShc1Vc6-6FwqFessdyHJwio8uyTCx1hMh6QTowP2daDrcZ0q93is2G6NeRigJEMvE013P6TVedD/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://USERNAME.disqus.om/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>
Lalu Gantilah kode script yang saya tandai diatas menggunakan username disqus anda agar pada saat widget komentar disqus tampil berisikan semua data komentar-komentar pada disqus anda.
4. Langkah keempat, tambahkan juga kode script 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>
Jika, widget tidak tampil atau widget tersebut berantakan maka, pastikan template blog anda terpasang font-awesome.
&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>
Lalu Gantilah kode script yang saya tandai diatas menggunakan username disqus anda agar pada saat widget komentar disqus tampil berisikan semua data komentar-komentar pada disqus anda.
4. Langkah keempat, tambahkan juga kode script 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>
Jika, widget tidak tampil atau widget tersebut berantakan maka, pastikan template blog anda terpasang font-awesome.
Jika tidak terdapat font ini maka tambahkan kode script di bawah ini tepat diatas kode </head>.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"></link>
5. Langkah Kelima Simpan template anda dan lihat hasilnya.
Nah sobat Demikianlah Langkah langkah Cara Simple Memasang Notifikasi Komentar Disqus Di Blog . selamat mencoba dan Semoga bermanfaat.
5. Langkah Kelima Simpan template anda dan lihat hasilnya.
Nah sobat Demikianlah Langkah langkah Cara Simple Memasang Notifikasi Komentar Disqus Di Blog . selamat mencoba dan Semoga bermanfaat.
Belum ada tanggapan untuk "CARA SIMPLE MEMASANG NOTIFIKASI KOMENTAR DISQUS DI BLOG"
Post a Comment