Blogger Yukarı Çık Butonu Yapımı

. 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 Yapımı

Hakkında Furkan GÜLER

Related Post