Blogger

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.

İlgili Makaleler

Bir Yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu