Bu makalede, blog yazıcısında disqus.com’un son yorum sistemlerini içeren bu kaydırmayı üst ve alt düğmelere eklemek için bazı adımları izlemeniz gerekecek;
Şimdi gelelim eklentinin nasıl kurulacağına ;
Öncelikle Blogger HTML şablon Düzenle'ye butonuna tıklıyoruz.
HTML şablon editör sayfamızın içinde Ctrl+F yardımıyla </head> kodunu aratıyoruz. Bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekliyoruz.
<style type='text/css'>
body{font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;padding:0 10px}
a {text-decoration:none}
.post_img img{position:relative;width:100%;height:auto;border-radius:16px;overflow:hidden}
/* === 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:;position:fixed;bottom:49%;right:0px;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:10px 14px;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 5px 15px rgba(0,0,0,0.15),0 2px 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 === */
.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>
<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>Daha sonra yine HTML şablon editörümüzün içinde bulunan aynı yöntem ile </body> kodunu aratıyoruz ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki kodları ekliyoruz.
<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>Notifications</h4><img alt="Disqus Logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoBlHDPpNN-9enslDGdYm6C_i4q4asi7KzzfA6XZYp6GvlveQkqPT9V4lifWlUsvfJb7tHPdtstLaKwaqJgE9HzeKrAudIRgtLYs4UdECMh1yzUfukAKwSWEYzJIxhPbYZ7UA8c4CqS_lL/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://https-blogadınız-com.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='Scroll to Top'><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='Scroll to Bottom'><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>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>Şimdi Blogger şablonumuzu kaydediyoruz.
Vermiş olduğum son kodların içerisinde https-blogadınız-com bölümünü kendi Disqus adresinize göre ayarlayabilirsiniz.
Btüün işlemler bu kadar herkese kolay gelsin.
See the Pen gOOwrqv by Serkan Gündoğdu (@serkangundogdu13) on CodePen.