Blogger Yukarı çık butonu animasyonlu

Bu konuda Blogger Yukarı çık butonu animasyonlu nasıl yapılır ufak bir kaç düzenleme ile yapmayı öğreneceğiz blogumuza ekstra bir görünüm ve özellik sağlayan yukarı çık butonu blogumuzu ziyaret eden kullanıcılara kolaylık sağlayacaktır.
Nasıl Yapılır?
Öncelikle blogger blog kontrol paneline giriş yapalım daha sonra Kontrol panelinden Tema Sekmesine tıklayalım,Sağ üst köşede Yedekle / Geri Yükle Butonuna tıklayalım.
Çıkan ekranda Tema indir butonuna tıklayalım

Temamızın bir yedeğini alalım kopyalayıp yedeğini farklı bir klasöre alalım ne olur ne olmaz tekrar geri yüklemek için
Kopya temanın üzerine gelip sağ tıklayın ve Edit With Notepad++ Seçeneğine tıklayalım Sizde Bu seçenek yok ise Notepad++ indir'in ve kurun

Daha sonra
CTRL+F Tuşları ile Notepad++ Programında arama yapalım arama kısmına şu Kodu yazın. 
]]></b:skin>

Bulduğunuz kodun hemen üst kısmına şu kodları yapıştırın

/* Go to top css seotoplulugu.blogspot.com Start */
#yukari{background:#fff;display:none;color:#ccc;border:1px solid #ccc;padding:7px 10px;font-size:24px;transition:all .6s linear}
#yukari:hover{color:#fff;background:#EF4B4B;transition:all .6s linear}
.yukari{-webkit-transform: translateZ(0);cursor:pointer;position:fixed;bottom:30px;right:30px;z-index:90;opacity:0.95}
/* Go to top css seotoplulugu.blogspot.com End*/

Ve daha sonra </body> Kodunu bulalım Hemen üst kısmına şu kodları yapıştıralım

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){ $(window).scroll(function(){ if($(this).scrollTop()&gt;100){$(&#39;#yukari&#39;).fadeIn ();} else{$(&#39;#yukari&#39;).fadeOut(); } });
$(&#39;#yukari&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},600) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:0},50); }); });</script>
<div class='yukari'><a id='yukari' title='Yukarı Zıpla'><i class='fa fa-angle-up'/></a></div>

Ve son olarak </head> kodunu aratın hemen üst kısmına aşağıda verdiğim kodu yapıştırın bu kadar

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Yorumlar