Blogger Başa Dön Düğmesi Ekleme SVG


Bu anlatımızda ise blogger için hafif SVG başa dön düğmesi eklemeyi göstereceğim.
Başa dön düğmesi uzun yazılı sayfalar için iyi bir eklentidir çünkü bazı zamanlar başa dönmek eziyet olacağı için bu eklenti sayesinde başa kolay bir şekilde geri döneceksiniz.

İlk olarak, Blogger'ı açın > Temalar menüsüne tıklayınız > HTML'yi Düzenleye tıklayınız > Hemen ardından aşağıdaki kodu </head> yazısının üstüne ekleyiniz.


<style>
/* Back To Top */
.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style>
Ardından </body> satırı üzerine aşağıdaki iki kodu ekleyiniz.
<div class='backtotop hide'><svg viewBox='0 0 24 24'>
  <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div>
<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>
Bunları uyguladıktan daha sonra temayı kaydedin ve sonuçları blog adresinizde görünüz.

Yorum Gönderme

0 Yorumlar