Widget Blogger Terbaru Back To Top dan Notifikasi Komentar Disqus

Cara membuat Back To Top dan Notifikasi Komentar Disqus - Pernah lihat widget ini di blog arlina dezign pastinya sobat blogger pernah lihatkan? Widget ini berfungsi untuk memudahkan visitor saat membaca postingan di blog kita atau menggulirkan mouse kebawah dan keatas secara mudah nantinya visitor sobat tinggal mengklik widgetnya saja.

Selain itu di widget ini juga sudah di sisipi menu notifikasi komentar yang sedang populer di disqus jadi ini widget cukup bagus juga buat kamu pasang di blog kesayangan kamu.

Berikut cara memasang widget Back To Top dan Notifikasi Komentar Disqus di blogger.

#1. Masuk ke akun Blogger kamu dan buka halaman kode templat blog dari blog kamu dengan mengikuti Tema> Edit HTML pada panel kontrol blog yang ingin kamu instal.

#2. Tambahkan kode CSS berikut ke blok </head>kode di blok kamu.

<style type='text/css'>
/* === Animation === */
.ripple_animate{position:relative;overflow:hidden;transition:all 0.2s ease;z-index:0}.ink{display:block;position:absolute;background:rgba(255,255,255,0.3);border-radius:100%;transform:scale(0)}.animate{animation:ripple 0.65s linear}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{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{animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden}to{transform:translate3d(0,0,0)}}@keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden}to{transform:translate3d(0,0,0)}}@keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden}to{transform:translate3d(0,0,0)}}
/* === ToTop CSS === */
#blogToTop{display:none;position:fixed;bottom:49%;right:20px;cursor:pointer;list-style:none;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#blogToTop a{background:#fff;position:relative;overflow:hidden;display:inline-block;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#blogToTop a:hover{box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
#blogToTop li:nth-child(1){animation:slideInTop .5s}
#blogToTop li:nth-child(2){animation:slideInRight .5s}
#blogToTop li:nth-child(3){animation:slideInDown .5s}
.drawer-header{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}
.drawer-header h4{font-size:18px;float:left;color:#fff;margin:0;padding:0}
.drawer-header img{max-width:100%;height:auto;float:right}
#blogToTop .viewport-show{color:#27A0DC;transition:all .6s}
#blogToTop .viewport-show:hover{color:#27A0DC}
/* === Disqus Comments CSS === */
.viewport-show:hover svg{animation:rubberBand 1s}
#disqus_viewport{background:#fff;position:fixed;z-index:999;width:23.5%;top:0;right:-769px;bottom:0;transition:all .5s}
#disqus_viewport.active{right:0}
#drawer_overlay.active{background:rgba(53,58,61,.93);position:fixed;z-index:997;overflow:hidden;width:100%;height:100%;top:0;left:0}
#disqus_viewport .drawer-close{position:fixed;margin-left:-40px;margin-top:16px;color:#fff;transition:all .3s}
#disqus_viewport .drawer-close svg{transform:rotate(180deg);transition:all .3s}
#disqus_viewport .drawer-close:hover svg{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:#5cb767;font-weight:600;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;color:#444;margin:0;font-weight:400;line-height:1.5}
#RecentComments .dsq-widget-item pre{background:#f1f2f6;position:relative;color:#111;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_viewport.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}
#RecentComments .dsq-widget-comment p a{color:#ced6e0}
#RecentComments .dsq-widget-comment p a:hover{color:#a4b0be}
@media screen and (max-width:1080px){#disqus_viewport{width:35%}}
@media screen and (max-width:640px){#disqus_viewport{width:100%}#disqus_viewport .drawer-close{background:#535c68;font-size:35px;font-weight:700;color:#fff;display:block;text-align:left;margin:0;padding:0 15px;position:relative}}
</style>

#3. Tambahkan kode javaScript berikut ke </body>blok kode di blok kamu.

<script type='text/javascript'>
//<![CDATA[
// Blogger blogToTop
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#blogToTop").fadeIn(r):jQuery("#blogToTop").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}})});
// Disqus Comments
$(function(){$(".viewport-show").on("click",function(){$("#disqus_viewport").addClass("active").focus()});$(".drawer-close").on("click",function(){$("#disqus_viewport").removeClass("active")})});
$(function(){$(".viewport-show").on("click",function(){$("#drawer_overlay").addClass("active").focus()});$(".drawer-close").on("click",function(){$("#drawer_overlay").removeClass("active")})});
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow noopener').attr('target', '_blank');
//]]>
</script>

#4. Tambahkan kode HTML berikut di atas baris kode javaScript di atas.

<div id='drawer_overlay'></div>
<div id='disqus_viewport'>
<a class='drawer-close' href='javascript:;' title='Kapat'><svg width="20" height="20" fill="#fff" viewBox="0 0 1792 1792"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/></svg></a>
<div class='drawer-header'><h4>Yorumlar</h4><img alt='Disqus Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHibe5cISvOYZj8nSNiQ-UKGKNTz67B_dQqOGIbo0lZFHlD6KAMxvbC7pyYl5fH-42BhL-BuRTLfjtjepRHuxwiIvXG8jgqboNqZK6V1WTDCBQqduC_vrk6NgKXTKu8FYSn6t6JeNKtUYM/s1600/Disqus.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://perampokgoogle.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>
<ul id='blogToTop'>
<li><a class='ripple_animate' href='#top' title='Yukarı Git'><svg width="16" height="16" viewBox="0 0 1792 1792"><path d="M1683 1331l-166 165q-19 19-45 19t-45-19l-531-531-531 531q-19 19-45 19t-45-19l-166-165q-19-19-19-45.5t19-45.5l742-741q19-19 45-19t45 19l742 741q19 19 19 45.5t-19 45.5z"/></svg></a>
</li>
<li><a class='viewport-show ripple_animate' href='javascript:;' title='Disqus Yorumları Aç'><svg width="16" height="16" fill="#27a0dc" viewBox="0 0 1792 1792"><path d="M912 1696q0-16-16-16-59 0-101.5-42.5t-42.5-101.5q0-16-16-16t-16 16q0 73 51.5 124.5t124.5 51.5q16 0 16-16zm816-288q0 52-38 90t-90 38h-448q0 106-75 181t-181 75-181-75-75-181h-448q-52 0-90-38t-38-90q50-42 91-88t85-119.5 74.5-158.5 50-206 19.5-260q0-152 117-282.5t307-158.5q-8-19-8-39 0-40 28-68t68-28 68 28 28 68q0 20-8 39 190 28 307 158.5t117 282.5q0 139 19.5 260t50 206 74.5 158.5 85 119.5 91 88z"/></svg></a>
</li>
<li><a class='ripple_animate' href='#bottom' title='Aşağı Git'><svg width="16" height="16" viewBox="0 0 1792 1792"><path d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"/></svg></a></li>
</ul>
<div id='top'></div>
<div id='bottom'></div>

#5. Tambahkan nama pengguna yang kamu gunakan untuk komentar Disqus ke lokasi yang ditentukan dalam kode di atas. Setelah menyelesaikan langkah-langkah instalasi, simpan template dan periksa blog kamu.