Yukarı Çık Aşağıya İn Butonu

Site yada blogunuza ekleyeceğiniz bu kod ile uzun sayfalarda yukarı çık / aşağıya in butonlarını tasarımınıza ekleyerek , ziyaretçilerinizin sayfalarda daha rahat gezinmesini sağlayabilirirsiniz.
Bloggerde Yerleşim > Gadget ekle > HTML/Javascript ekle yolunu izleyerek basitçe ekleyebilirsiniz.
Kod ayrıca sadece tek bir sayfa içinde kullanılabilir, eğer uzun bir makale yazdınız yada yorumlar bölümü çok uzun yer kapladı , o zaman sadece bu sayfaya HTML bölümünden kodu eklemeniz yeterli olacaktır.

Yukarı çık , aşağı in kodu

<a name="top">
<style> a.yukari { position:fixed; bottom:15px; right:5px; } </style>
 <a href="#top" _fcksavedurl="#top" class="yukari">
<img src="AŞAĞI RESİM URL"  border="0" title="AŞAĞI İN" />
</a>
<a style="display:scroll;position:fixed; bottom:75px; right:5px;" href="#" title="YUKARI ÇIK"><img src="YUKARI RESİM URL" /></a>
<a name="top">
</a></a>

Aşağı in kodu

<style> a.asagi { position:fixed; bottom:15px; left:20px; font:11px arial; text-transform:uppercase; } </style> <a href="#bottom" class="asagi"><img src="AŞAĞI RESİM URL" border="0" title="Aşağı İn" /></a>

Kod  HTML dilinde yazılmış ve Jquery kullanılmadığından sayfa hızını yavaşlatmaz, reklamsız ve yönlendirmesizdir. Bir gün kendime yukarı çık butonu yaparken örneği sitenin altında kırmızı mücevhere tıklayıp bakabilirsiniz.

Kodun bir yerinde yanlışlık yaptığımı deneyince farkettim normalde bloglarda yukarı çık #top çalışırken aşağıya in #bottom işlemez nedenini bende bilmiyorum. Neyse kodu #top tersten çalış dediğimi farkettim. İnterneti taradığımda böyle bir kod olmadığını görünce şaşırdım , kendime demek ki kimsenin aklına gelmemiş dedim.

Aşağı in /  yukarı çık kodları var ama hepsi şablona ekleniyor ve tüm siteyi etkiliyor , özelleştirlmesi ve değişiklik yapılması zor.

Bir kaç örnek çalışma ikonların yerine istediğiniz resimleri ekleyebilirsiniz.

Jquery ile yazılmış başka bir Yukarı Çık Aşağıya İn Butonu

<style>a#scrlBotm{ background:transparent url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/32x32/rnd_br_down.png) no-repeat top left; position:fixed; bottom:5px; right:5px; width:32px; height:32px; } a#scrlTop{ background:transparent url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/32x32/rnd_br_up.png) no-repeat top left; position:fixed; bottom:40px; right:5px; width:32px; height:32px; }</style><br />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js?ver=1.6.1'></script><br />
<script language='javascript' type='text/javascript'> $(function () { $('#scrlBotm').click(function () { $('html, body').animate({ scrollTop: $(document).height() }, 1500); return false; }); $('#scrlTop').click(function () { $('html, body').animate({ scrollTop: '0px' }, 1500); return false; }); }); </script><a href="#" id="scrlTop" /><a href="#" id="scrlBotm" />

Gadget olarak eklemek için

<div id="navigation_up_down_48221"><script type="text/javascript" src="http://services.webestools.com/navigation_up_down/5-48221-right.js"></script></div>

Özetle  yukarıdaki kodlar geliştirilme aşamasındadır. Kodların çalışıp çalışmadığını kontrol ederek kodları geliştirebilir isteğinize göre uygulayabilirsiniz. Bu kodlar henüz beta aşamasındadır.