Animasyonlu Fonksiyonel Sayfa Kaydırma Butonları Blogger

[XFB] Konu Bilgileri

Kategori Adı Çeşitli (HTML & CSS)
Konu Başlığı Animasyonlu Fonksiyonel Sayfa Kaydırma Butonları Blogger
Konbuyu başlatan Bayram
Başlangıç tarihi
Cevaplar
Görüntüleme
İlk mesaj tepki puanı
Son Mesaj Yazan Bayram

Bayram

TeamStar
Yönetici
Blogger Animasyonlu Fonksiyonel Sayfa Kaydırma Butonları


Blogger siteleri pratik eklentiler ile daha kullanışlı oluyor ve blog sayfalarının görüntüleme sayısını da artırıyor. Bu yazımızda fonksiyonel özeliklere sahip aşağı ve yukarı kaydırma butonları ile tıkla aç-kapat Disqus son yorumlar widget tasarımını paylaşacağım.

aşağı ve yukarı sayfa kaydırma butonları ile tıkla aç-kapat Disqus son yorumlar widget'ını daha önceki yazılarımızda paylaşmıştık. Bu eklentileri tekrardan paylaşmamın nedeni, bir önceki özelliklerinde ve biraz da tasarımında farklı olmasından ve kurulum bilgilerini daha iyi anlatmak için paylaşıyorum.

HTML:
<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: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 === */
.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>


<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><img alt='Disqus Logo' src='https://idd.coldfrm.com/files/v610A9.png' title='ColdFrm'/></h4></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>

</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>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<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>
 
Üst