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 teman blogger pernah lihatkan? Widget ini berfungsi untuk memudahkan visitor dikala membaca postingan di blog kita atau menggulirkan mouse kebawah dan keatas secara gampang nantinya visitor teman tinggal mengklik widgetnya saja.

Selain itu di widget ini juga sudah di sisipi sajian notifikasi komentar yang sedang terkenal di disqus jadi ini widget cukup manis juga buat kau pasang di blog kesayangan kamu.

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

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

#2. Tambahkan aba-aba 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 aba-aba javaScript berikut ke </body>blok aba-aba 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 aba-aba HTML berikut di atas baris aba-aba 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/AVvXsEiorBu7fXR8d-kMD8u6Uqli8OdJb1H703FmmDACLx4SHKHjVc36KibNM2uK5Nr10izFmt53IV-2FIGcr_9nJ70stL7eHHM0Wi3d6ngwb390U-cay26yPO2x0H2lgM58vXoCYeatfJh_OuuA/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 kau gunakan untuk komentar Disqus ke lokasi yang ditentukan dalam aba-aba di atas. Setelah menuntaskan langkah-langkah instalasi, simpan template dan periksa blog kamu.
Sumber https://www.bloggerszones.com/

Berbagi :