Blogger Yukarı Çık - Sayfa Başına Dön Butonu

Blogunuza CSS veya jQuery ile "Yukarı Çık - Sayfa Başına Dön" butonu ekleyin. Uzun sayfalar için oldukça önemli ve yararlı bir eklenti "Başa Dön" bağlantısı. Sayfa uzadıkça sitenin yönlendirme bağlantılarından da uzaklaşılır. Bunları tekrardan kullanabilmek için sayfanın başına gitmek gerekir. Bu yüzden bloglarınıza renk katacak bu eklentiyi iki güzel yöntemle paylaşacağım bugün sizlerle. Hangisi hoşunuza giderse onu kullanabilirsiniz.

CSS Kodlarıyla Sayfa Başına Dön, Yukarı Çık Butonu:

Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle

Ctrl+F yardımı ile </body> kodunu aratıp bulun.

Ve hemen üzerine aşağıdaki kodu kopyalayıp yapıştırın.

<a title="Sayfa Başına Dön" style="position:fixed;right:15px;bottom:15px;outline:medium none;border:0px none;" href="#"><img border="0" alt="Sayfa Başına Dön" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhppVzhFJVYT8qlz3CmBV7k-zfnam7sMzhOl-8SDZ5SVvITekS90FIOk9QwCz12bY4-Oj1jjnKJYbKU1DmtqbdC5wuMTa-LQEu6AYroOps3g2fN5EsRDK6bNhyphenhyphen9XUaAE47wCjqrrPCA6ISJ/s32/up.png" title="Sayfa Başına Dön"/></a>

Buton Örneği:

Burdaki buton resmi (Kırmızıyla gösterdim) siyah ve 35x35 boyutlarında. Siz isterseniz zevkinize göre başka bir buton ekleyebilirsiniz.

Script (jQuery) Kodlarıyla Sayfa Başına Dön, Yukarı Çık Butonu:

Aynı şekilde bunuda </body> kodunun hemen üzerine kopyalayıp yapıştırıyoruz.

<style type="text/css">
#mef-BckTop{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;width:150px;text-shadow:1px 1px 0 #C9C9C9;background:#EEEEEE;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#000;text-decoration:none;border:1px solid #C9C9C9;padding:5px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6(1(a){a.9.7=1(){a(2).c().d("e");"0"!=a(4).5()&&a(2).8("3");f b=a(2);a(4).g(1(){"0"==a(4).5()?a(b).h("3"):a(b).8("3")});a(2).i(1(){a("j, k").l({5:0},"3")})}});6(1(a){a("#m-n").7()});',24,24,'|function|this|slow|window|scrollTop|jQuery|scrollToTop|fadeIn|fn|||hide|removeAttr|href|var|scroll|fadeOut|click|html|body|animate|mef|BckTop'.split('|'),0,{}))
//]]>
</script>
<a href='#' id='mef-BckTop' style='display:none;'>Sayfa Başına Dön</a>

Buton Örneği:

Sayfa Başına Dön

Eğer sayfanızda jquery'nin herhangi bir versiyonu varsa kırmızıyla gösterdiğim jquery.min.js bölümünü silebilirsiniz.

Ben Sayfa Başına Dön metnini kullandım, siz isterseniz başka bişey yazabilirsiniz.

Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...