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

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/AVvXsEg-v7w3LZxrwP2mcU56_4xnx7b4iznY6Eplz7jEA_OflUDT3SqgjbRxrOziFZOJvuA7xs5PAIiDxv7epyFX9T18Pr2xab0CmEs7WPxujzqwDsp7_OPwLwXxxif8zwWUrqX3NUtyzTavWCA/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/AVvXsEg7DiIfR930qi-zMF4Kz-ir8Scd6YYYia2Cwz_HAyaY0TQLwdOziq66dqwg7jh5eqnNfmkel_SV_2v7p-QD5J4mLTVQF3MyhWPV-hY3Nx7Mx5DXtFPN669RtPoG74ubdkiVxQpaRyP8tUI/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>