Blogger İçin Yukarı Çık ve Aşağı İn Butonu

Share:
blog-için-yukarı-çık-ekleme
Yukarı Çık ve Aşağı İn Butonu

  Blog sayfalarında kullanışlı bulduğum ve gerekli gördüğüm güzel bir kod yönlendirme butonu. Genelde çoğu blog sayfasında sadece yukarı çık şeklinde kullanılsa da aşağı in ile aynı anda kullanıldığında daha iyi bir görüntü ve işlev kazanıyor. Kodu ekledikten sonra yukarı çıkmanız ve aşağı inmeniz bir tıklamayla olacak. Seo ayarlarını iyi yapan blog sayfalarında ana sayfada çok yazı görmeyiz ya da devamını oku gibi özellikler ekleyerek aşağı doğru çok uzamaması gerektiğini iyi bilirler. Ne yazık ki herkes bu konuda yeterince bilgi sahibi olamayabiliyor. Bloglar yukarı çık ve aşağı in şeklinde kod eklerse bu tür sorunları bir nebze aşmış olurlar. Mobil uyumlu olduğunu bloga uyarlamasının çok kolay olduğunu belirtmek istiyorum.

Blog'a Yukarı Çık ve Aşağı İn Butonu Nasıl Eklerim?

  Öncelikle Tema> HTML'yi düzenle yolunu takip ederek kodlarınızın olduğu alanda Ctrl+F yardımıyla ]]></b:skin> kodunu bulun ve üstüne aşağıdaki kodları ekleyin.
/* Up and Down Buttons with jQuery----------------------------------------------- */.button_up{padding:7px; /* Distance between the border and the icon */background-color:white;border:1px solid #CCC; /* Border Color */position:fixed;background: whiteurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE7-rAZyWH3_Ip3jfuO6xcP6swnLZ12wFDtQCJ4HysmH4ja6MTOFW5gB0UL0FjQvkSsN0p6i8-Vflua4hLojDFr2fJxELSjkVrteICPa6Di32hUZSLtyD_tUj9Gh9UDHLHjreEcP88jSE/s16/arrow_up.png) no-repeat top left;background-position:50% 50%;width:20px; /* Button's width */height:20px; /* Button's height */bottom:280px; /* Distance from the bottom */right:5px; /* Change right to left if you want the buttons on the left */white-space:nowrap;cursor: pointer;border-radius: 3px 3px 3px 3px;opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}.button_down{padding:7px; /* Distance between the border and the icon */background-color:white;border:1px solid #CCC; /* Border Color */position:fixed;background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBnauGWb2ALt2VG3PB5B_ut9EX5C5AdjfsYuxuQTG593HcW9rDGsBRqsLXZk5pf6VNUIZVSxZVT0XkqFB0MwCdPwH-zij_mYfp7NiuO4aDch8nPP9GTiZo0uFsaeFyl3n285aZxIxFYjA/s16/arrow_down.png) no-repeat top left;background-position:50% 50%;width:20px; /* Button's width */height:20px; /* Button's height */bottom:242px; /* Distance from the bottom */right:5px; /* Change right to left if you want the buttons on the left */white-space:nowrap;cursor: pointer;border-radius: 3px 3px 3px 3px;opacity:0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
   Yukarıdaki kod içerisinde white rengini değiştirebilirsiniz. Ayrıca diğer değişiklikler için kod içindeki yeşil renkli alanları inceleyebilirsiniz. Şimdi diğer kodu eklemek için Ctrl+F yardımıyla </body> kodunu bulun ve üstüne aşağıdaki kodu yapıştırın ve temayı kaydedin.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/><div class='button_down' id='button_down' style='display:none;'/>
<script>//<![CDATA[(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {var $elem = $('body');$('#button_up').fadeIn('slow');$('#button_down').fadeIn('slow'); $(window).bind('scrollstart', function(){$('#button_up,#button_down').stop().animate({'opacity':'0.2'});});$(window).bind('scrollstop', function(){$('#button_up,#button_down').stop().animate({'opacity':'1'});});$('#button_down').click(function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);} );$('#button_up').click(function (e) {$('html, body').animate({scrollTop: '0px'}, 800);} );});//]]></script>

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵

6 yorum:

  1. Çok faydalı bir yazı olmuş..Teşekkürler :)

    YanıtlaSil
  2. Bu teknik işleri hiçççç sevemedim ben yaaaa :(

    YanıtlaSil
    Yanıtlar
    1. Teknik detaylar çok gerekmiyor aslında..Yavaş yavaş eklentilerle tanışmak ve eklemeye çalışmak daha iyi olur. İşine yaramayan hiçbir şeyi eklememek lazım.

      Sil

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösterin.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat edin.
3) Kullandığınız üslubun sizi yansıttığını unutmayın.
4) Yorum yaparken link eklemeyin.

Seo Teknikleri ve Blog ipuçlarını alarak daha fazla ziyaretçi ve en yüksek verimi hedefleyin.