Blogger Yukarı çık butonu eklentisi

Blogger Yukarı çık butonu eklentisi -Merhaba arkadaşlar bu yazımda sizlere blogger (ve ya herangi bir site) için yukarı çık butonu eklentisini göstericem.

Yukarı çık butonu eklentisi

1. Bu eklenti için bize Jquery kütüpanesi ve Font Awesome lazım olucak. İlk önce Blogger hesabınızadan Şablon>HTML'yi düzenle diyicez ve aşağıdakı kodu bulucaz:

</head>

2.Buldukdan sonra hemen üstüne şu kodu ekliyicez. Not: eğer varsa eklemenize gerek yok:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

3. Kodu yazdıkdan sonra aşağıdakı kodu taratıcaz:

</body>

4. Hemen üstüne şu kodu yazıcaz:

<style>
#yukari {
display: none;
border-style: hidden;
padding: 10px;
position: fixed;
max-width: 19px;
height: auto;
bottom: 25px;
background-color: rgb(98, 98, 98);
overflow: hidden;
right: 15px;
cursor: pointer;
-webkit-transform: translateZ(0);
border-radius: 2px;
transform: translateZ(0);
z-index: 99;
text-align: center;
}
a#yukari {
text-decoration:none;
color:#fff;
}
#yukari:hover{
transition: all 0.5s;
background-color:#75b6df;
}
</style>
 <script>
$(document).ready(function(){
 // Goster
 $(window).scroll(function(){
  if($(this).scrollTop() > 200){
   $('#yukari').fadeIn(200);
  }else{
   $('#yukari').fadeOut(200);
  }
 });
 
 // Animasya
 $('#yukari').click(function(event) {
  event.preventDefault();
  
  $('html, body').animate({scrollTop: 0}, 500);
 })
});
</script>
<a id="yukari" href="#" ><i class="fa fa-chevron-up"></i></a>

Blogger Yukarı çık butonu eklentisi

Yukarı çık butonu eklentisi

Senan

ilgili Makaleler