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

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(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/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(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/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>

YAZIYI PAYLAŞ

BENZER YAZILAR

SONRAKİ
« Prev Post
ÖNCEKİ
Next Post »

6 yorum

yorum YAZ
27 Temmuz 2017 15:48 delete

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

Cevap Ver
avatar
27 Temmuz 2017 20:50 delete

Kullanışlı eklenti umarım işe yarar.

Cevap Ver
avatar
19 Ağustos 2017 15:37 delete

Bu teknik işleri hiçççç sevemedim ben yaaaa :(

Cevap Ver
avatar
19 Ağustos 2017 19:52 delete

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.

Cevap Ver
avatar

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

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösteriniz.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat ediniz.
3) Kullandığınız üslubun sizi yansıttığını unutmayınız. EmoticonEmoticon