SATRIARYAN22

Informasi Dunia Blogging dan Tutorial

Cara Memasang Recent Disqus Comments di Blog

Di kesempatan sebelumnya sudah saya sharing tentang cara menghapus komentar disqus pada Blog nah untuk postingan saya selanjutnya akan membagikan kepada sobat blogger Cara membuat atau memasang recent comments disqus di blog untuk sobat yang masih kebingungan cara membuatnya bisa ikuti langkah dibawah ini dengan mudah.

Untuk cara membuatnya kalian harus memasang terlebih dahulu font awesome dibawah ini

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Silahkan kalian pasang code diatas tersebut tepat sebelum </head> selanjutnya kalian pasang code berikut ini tepat sebelum </style> atau </b:skin>

/* Animation */
@keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}
/* Recent Comments Disqus */
.header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}
.header-1 h4{font-size:18px;float:left;color:#fff}
.header-1 img{float:right}
.notif-show{position:fixed;top:10px;right:10px;z-index:997;color:#fff!important;background:rgba(0,0,0,0.2);font-size:16px;font-weight:normal;width:auto;padding:6px 8px;cursor:pointer;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:2px;transition:all .6s}
.notif-show:hover{background:#2e9eff;animation:rubberBand 1s}
#disqus-notif{position:fixed;background:#fff;z-index:999;width:25%;top:0;right:-769px;bottom:0;transition:all .5s}
#disqus-notif.active{right:0}
#overlay-1.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0}
#disqus-notif .close-text{display:inline-block;font-weight:700;font-size:14px;position:relative;right:15px;top:-7px;visibility:hidden;opacity:0;transition:all .5s}
#disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:6px;font-size:35px;font-weight:700;color:#fff}
#disqus-notif .close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}
#RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%}
#RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden}
#RecentComments img.dsq-widget-avatar{margin:0 10px 0 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:#ced6e0;font-size:12px}
#RecentComments p.dsq-widget-meta a:hover{color:#a4b0be}
#RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:1px solid rgba(0,0,0,0.08)}
#RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:700;font-size:14px;margin:7px 0 0 0}
#RecentComments a.dsq-widget-user:hover{color:#2e87e7}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin:20px 10px 10px 0}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444;line-height:1.5}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f8cf82;color:#000;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px}
#RecentComments .dsq-widget-item pre code{color:#000}
#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}
@media screen and (max-width:1366px){#disqus-notif{width:35%}}
@media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{background:#535c68;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:700;color:#fff}#disqus-notif .close-text{display:none}}

Jika code CSS diatas sudah terpasang silahkan kalian ikuti langkah selanjutnya letakan code dibawah ini diatara <body> atau </body> bisa juga sebelum </body>

<a class='notif-show' href='javascript:;'><i class='fa fa-bell'/></a>
<div id='overlay-1'/>
<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><img alt='Disqus Logo' src='https://3.bp.blogspot.com/-GxPuYrEWjRA/Wt6bJW3fSbI/AAAAAAAAE1E/gUdQHSaGUXMs_QfK1mIm0JF9qvHd2xFFwCLcBGAs/s1600/Disqusq.png' title='Disqus'/></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://URL_BLOG.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>

dan untuk langkah yang terakhir ini kalian hanya perlu memasang code dibawah ini tepat sebelum code
</body>

<script defer='defer' type='text/javascript'>
//<![CDATA[
// Recent Comments 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")})});
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow noopener').attr('target', '_blank');
//]]>
</script>

Setelah itu silahkan kalian save kembali template yang sudah di edit tadi, demikianlah dari saya tentang cara membuat recent comments diqus selamat mencoba dan semoga bermanfaat.
DONASI VIA DANA Bantu berikan donasi anda jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.satriaryan22.com
Buka Komentar
Tutup Komentar

0 Response

Post a Comment

√ Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel