Cara Memasang Recent Comment Disqus Dengan Tombol Back To Top
Snippet Tips Blogger
iNDZGN - Menggunakan tombol back to top bagi sebuah blogger tentu sangat bermanfaat. Apalagi sekarang banyak template blog yang menggunakan tombol back to top. Nah, untuk kamu yang mempunyai template blogger terlebih dengan menggunakan komentar dari Disqus, kamu bisa mencoba menerapkan tutorial ini ke dalam blog pribadi kamu.
Untuk lebih lengkap mengenai tutorial Cara Memasang Recent Comment Disqus Dengan Tombol Back To Top, simak penjelasannya di bawah ini.
Cara Memasang Recent Comment Disqus Dengan Tombol Back To Top
Langkah 1
Langkah pertama yang bisa kamu lakukan adalah Login ke Blogger>Klik Tema>Edit Tema, kemudian letakan kode dibawah ini tepat diatas </head> atau </head><!--<head/>-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* Notifikasi Disqus by www.indzgn.blogspot.com */
.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}#scrollToTop .notif-show{color:#54a0ff;transition:all .6s}#scrollToTop .notif-show:hover{color:#2e86de}.notif-show:hover i{animation:rubberBand 1s}#disqus-notif{position:fixed;background:#fff;z-index:999;width:23.5%;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-1{position:fixed;margin-left:-40px;margin-top:16px;color:#fff;transition:all .3s}#disqus-notif .close-1 i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}#disqus-notif .close-1:hover i{transform:rotate(360deg)}#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:2px solid rgba(0,0,0,0.08)}#RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:400;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:#f1f2f6;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;padding:0}#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}#RecentComments .dsq-widget-comment p a{color:#3498db}#RecentComments .dsq-widget-comment p a:hover{color:#2980b9}
@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:500;color:#fff}}
.kotak_iklanpost{margin:20px auto;text-align:center}#st-4{z-index:70!important}.kotak_iklanpost img{margin:auto;-webkit-touch-callout:initial;-webkit-user-select:initial;-khtml-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:auto;pointer-events:auto;width:100%}
/* Go Up and Down by www.indzgn.blogspot.com */
#scrollToTop{display:none;list-style:none;font-size:0;position:fixed;bottom:49%;right:0;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}#scrollToTop a{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;font-size:.9rem;margin:0 auto;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.1)}#scrollToTop a:hover{color:#747d8c}#top{position:absolute;top:0}#scrollToTop li:nth-child(1){animation:slideInTop .5s}#scrollToTop li:nth-child(2){animation:slideInRight .5s}#scrollToTop li:nth-child(3){animation:slideInDown .5s}
</style>
</b:if>Langkah 2
Copy kode dibawah ini tepat di atas </body> atau untuk kamu menggunakan template yang ada footernya, untuk lebih rapi letakan di bawah kode </footer>
<b:if cond='data:blog.pageType == "item"'>
<div id='overlay-1'/>
<div id='disqus-notif'>
<a class='close-1' href='javascript:;' title='Close'><i class='fa fa-times'/></a>
<div class='header-1'><h4>Notifications</h4><img alt='Disqus Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dcD0Wx-NsrNAqaAm4VNcVFZOdpwRrd024iZdu-aUL_-ewE11E9GiKUWYVFFqcwj1iajidxyOy8OWlBE42uhmj1CyMkCIzbwrb3b3UQwxGKa8eRsUdaj_YgkO5HurpYb-l6T35Zc-p2xX/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://indzgn.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>
<ul id='scrollToTop'>
<li><a class='ripplelink' href='#top' title='Go up'><i class='fa fa-chevron-up'/></a></li>
<li><a class='notif-show ripplelink' href='javascript:;' title='Open Disqus Notifications'><i class='fa fa-bell'/></a></li>
<li><a class='ripplelink' href='#bottom' title='Go down'><i class='fa fa-chevron-down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>
</b:if>Cari dan ganti https://indzgn.disqus.com dengan link Disqus kamu.
Langkah 3
Letakan code di bawah ini tepat di atas kode </body> atau <!--</body>--></body>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
// Notif 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>Langkah 4
Simpan template dan lihat hasilnya.
Update CSS Terbaru.
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* Notifikasi Disqus by www.indzgn.blogspot.com */
.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}#scrollToTop .notif-show{position:relative;color:#222;transition:all .6s}#scrollToTop .notif-show:hover{color:#222}.notif-show:hover i{animation:rubberBand 1s}#disqus-notif{position:fixed;background:#fff;z-index:999;width:23.5%;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-1{position:fixed;margin-left:-40px;margin-top:16px;color:#fff;transition:all .3s}#disqus-notif .close-1 i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}#disqus-notif .close-1:hover i{transform:rotate(360deg)}#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:2px solid rgba(0,0,0,0.08)}#RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:400;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:#f1f2f6;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;padding:0}#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}#RecentComments .dsq-widget-comment p a{color:#3498db}#RecentComments .dsq-widget-comment p a:hover{color:#2980b9}
@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:500;color:#fff}}
.kotak_iklanpost{margin:20px auto;text-align:center}#st-4{z-index:70!important}.kotak_iklanpost img{margin:auto;-webkit-touch-callout:initial;-webkit-user-select:initial;-khtml-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:auto;pointer-events:auto;width:100%}
/* Go Up and Down by www.indzgn.blogspot.com */
#scrollToTop{display:none;list-style:none;font-size:0;position:fixed;bottom:49%;right:2%;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}#scrollToTop a{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:0 auto;padding:12px 14px;border:1px solid rgba(0,0,0,0.05)}#scrollToTop li:nth-child(1) a{border-radius:99em 99em 0 0;border-bottom:0}#scrollToTop li:nth-child(3) a{border-radius:0 0 99em 99em;border-top:0}#scrollToTop a:hover{color:#747d8c}#top{position:absolute;top:0}#scrollToTop li:nth-child(1){animation:slideInTop .5s}#scrollToTop li:nth-child(2){animation:slideInRight .5s}#scrollToTop li:nth-child(3){animation:slideInDown .5s}#scrollToTop .notif-show .sindicat{display:block;font-size:16px;background:#FFBA00;position:absolute;top:10px;right:10px;width:10px;height:10px;border-radius:10px}.sindicat{animation:sindicat 1s ease infinite}
</style>
</b:if>Sekian dulu artikel kali ini, semoga bermanfaat. Apabila masih kurang paham, tinggalkan komentar di bawah. Terima kasih.
