Blogger'da yukarı çık butonu yapımı ile ilgili bu zamana kadar birçok eklenti paylaşmış olabiliriz. Ancak şimdi paylaşıyor olacağımız jQuery tabanlı bu eklenti ile, web sitenize sorunsuz bir şekilde yukarı butonu ekleyebileceksiniz. Dilerseniz CSS kodlarını kendinize göre güncelleyebileceğiniz gibi, hiçbir değişiklik yapmadan da direkt kullanım sağlayabilirsiniz. Hemen şimdi kullanımına yönelik ilgili anlatıma geçiyor olacağız. Faydalı olmasını temenni ederiz.

AYRICA: Blogger için Mükemmel Slider Eklentisi

Blogger'da "Yukarı Butonu" Nasıl Yapılır?

1) Temanızda yer alan aşağıdaki kodu bulun.

</body>

2) Aşağıdaki kodu, yukarıdaki koddan önce ekleyin.

<a href='#' id='toTop'>Yukarı Çık</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive &quot;Scroll to Top&quot; link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}});
$(function() {
$(&quot;#toTop&quot;).scrollToTop();
});
</script>


3) CSS olarak ise aşağıdaki kodları kullanabilirsiniz.

#toTop {width:85px;background: #b30000;border:0px solid #000;text-align:center;padding:7px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#fff;text-decoration:none;}#toTop:hover {padding:8px}