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.

TOKUÇ

Merhabalar ben TOKUÇ 2013 yılından beri teknoloji türevi grupları üyesiyim. Teknoloji alanında paylaşımlar yapmayı ve yenilikler öğrenmeyi hedefliyorum ne kadar bilgi o kadar iyidir bu yüzden öğrendiğim ya da görmüş olduğum yararlı uygulama, web site hazırlama gibi konuları sizlerle paylaşmaya çalışıcam.

İlgili Makaleler

Bir cevap yazın

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

Başa dön tuşu
Kapalı