Cara Memasang Notifikasi Komentar Disqus Di Blog
Cara Memasang Notifikasi Komentar Disqus di Blog - Disqus merupakan salah satu platform sistem komentar terpopuler ketika ini.
Disqus memiliki tampilan yang Responsive dimana Responsive yaitu tampilan yang sanggup menyesuaikan ukuran layar yang di gunakan oleh pengguna. Selain tampilanya Disqus menunjukkan fitur-fitur yang menarik diantaranya yaitu sistem moderasi dan edit komentar.
Masih banyak Fitur- Fitur dan Keunggulan lain yang ditawarkan Disqus, namun disini saya akan membuatkan bagaimana Cara Memasang Notifikasi Komentar Disqus di Blog di blog sobat.
Fungsi atau cara kerja widget notifikasi komentar Disqus ini yaitu untuk menampilkan komentar terbaru baik dari pengunjung maupun admin yang mengomentari artikel atau postingan di blog.
Cara pasangnya cukup gampang hanya Lima langkah gampang yang akan kita lakukan.
Bagi yang tertarik, Silakan disimak langkah berikut :
1. Buka Blogger, kemudian pindah ke hidangan Tema selanjutnya Edit HTML.
2. Salin isyarat CSS dibawah ini dan letakkan sempurna di atas isyarat ]]></b:skin> atau </style>.
3. Tambahkan isyarat HTML di bawah ini sempurna di bawah isyarat <body> atau <body.
4. Tambahkan isyarat Javascript di bawah ini sempurna di atas isyarat </body>.
Pastikan blog sahabat sudah terdapat link Font Awesome. Jika di Blog sahabat belum terdapat Link Font Awesome, tambahkan stylesheet font awesome di bawah ini sempurna di atas </head>
5. Simpan Tema dan lihat Hasilnya...
Sebagai tumpuan hasil tutorial di atas sanggup di lihat melalui link dibawah ini.
Cukup gampang bukan? Sekian tutorial Cara Memasang Notifikasi Komentar Disqus di Blog jangan lupa di coba ya... Salam Blogger!! Sumber https://www.denylistianto.com/
Disqus memiliki tampilan yang Responsive dimana Responsive yaitu tampilan yang sanggup menyesuaikan ukuran layar yang di gunakan oleh pengguna. Selain tampilanya Disqus menunjukkan fitur-fitur yang menarik diantaranya yaitu sistem moderasi dan edit komentar.
Masih banyak Fitur- Fitur dan Keunggulan lain yang ditawarkan Disqus, namun disini saya akan membuatkan bagaimana Cara Memasang Notifikasi Komentar Disqus di Blog di blog sobat.
Fungsi atau cara kerja widget notifikasi komentar Disqus ini yaitu untuk menampilkan komentar terbaru baik dari pengunjung maupun admin yang mengomentari artikel atau postingan di blog.
Cara pasangnya cukup gampang hanya Lima langkah gampang yang akan kita lakukan.
Bagi yang tertarik, Silakan disimak langkah berikut :
Tutorial Cara Praktis Memasang Notifikasi Komentar Disqus di Blog
1. Buka Blogger, kemudian pindah ke hidangan Tema selanjutnya Edit HTML.
2. Salin isyarat CSS dibawah ini dan letakkan sempurna di atas isyarat ]]></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 isyarat HTML di bawah ini sempurna di bawah isyarat <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz3fIZOMGOJu4z0CD9EJotFsqk31O_Wzs8ZHSnND0haLVBipLv6ie_yc0B1nGaYssvhFXddpcoeezMqPz6mo3kosjG8VX4sAbM_rURYyw6dtii3a2oKR-bTuH4-5eMw3YcEfcct9xdWRUl/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 isyarat Javascript di bawah ini sempurna di atas isyarat </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 sahabat sudah terdapat link Font Awesome. 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'/>5. Simpan Tema dan lihat Hasilnya...
Sebagai tumpuan hasil tutorial di atas sanggup di lihat melalui link dibawah ini.
Cukup gampang bukan? Sekian tutorial Cara Memasang Notifikasi Komentar Disqus di Blog jangan lupa di coba ya... Salam Blogger!! Sumber https://www.denylistianto.com/