Blogger Yukarı çık butonu animasyonlu

Yardımcı Editör
0
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 kapalipansiyon.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 kapalipansiyon.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'/>

Yorum Gönder

0 Yorumlar

Yorum Gönder (0)
3/related/default

Made with Love by

Speedily Template is Designed Theme for Giving Enhanced look Various Features are available Which is designed in User friendly to handle by Edgy Developers. Simple and elegant themes for making it more comfortable
To Top