12
Kas

Blogger Yukarı Çık Butonu

Bu yazımda size blogumda alt kısımda görmüş olduğunuz yukarı çık butonunun blogger için yapmayı anlatacağım. Öncelikle blogger kontrol panelinizden yerleşime ordan da html düzenleye geliyoruz.

blogger-kontrol-paneli
Aşağıdaki kodu aratıp buluyoruz.

 ]]></b:skin>

Bu kodun üstüne şu kodu yapıştırıyoruz.

 #backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

Ardından şu kodu buluyoruz.

</body>

Bu kodunda önüne şu kodu yapıştırıyoruz.

<a href="#" id="backtotop"><img src="Resim-Adresi" alt="back to top" /></a>

Üstte gördüğünüz ‘Resim-Adresi‘ yazan yere aşağıda örnek resimlerden birinin adresini alıp yapıştırmanız yeterli olacaktır.

Resim 1

http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png

Resim 2

http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png

Resim 3

http://1.bp.blogspot.com/_JwD5r652h00/SvDBXF2WGRI/AAAAAAAAARo/FIPZOwsTTBc/s400/bttp-15.png

Resim 4

http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png

Resim 5

http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png

Resim 6

http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png

Resim 7

http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png

Yani kodları ekledikten sonra en son şekli şu şekilde olacaktır.

<a href="#" id="backtotop"><img src="http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png" alt="back to top" /></a>

Veya sadece yukarı çık yazmasını isterseniz eğer

<a href="#" id="backtotop">Yukarı Çık!</a>

şeklinde de kullanabilirsiniz.

Kaynak


{ Benzer Yazılar }





yazıyı beğendiysen paylaşabilirsin

twitter stumble upon digg

Bu yazı 12 Kasım 2009 tarihinde, Blogspot kategorisine/kategorilerine yazıldı.
Yazıya gelen yorumları RSS 2.0 ile takip edebilirsiniz.

konuşmalar

8
  1. 13 Kasım 2009 | TheBoss96 demiş ki:

    guzel olmus tesekkurler..

  2. 17 Kasım 2009 | Aytekinet demiş ki:

    paylaşım için teşekkürler ama resim dosyalarını kendi serverlarına yüklerlerse arkadaşlar daha iyi olur herhangi bir olumsuzluğa karşı yani :)

  3. 17 Kasım 2009 | Eray USTA demiş ki:

    Teşekkürler Aytekin yorumun için evet bencede kendi sunucunuza yüklemeniz en sağlam yol olur

  4. 07 Nisan 2010 | now demiş ki:

    Bunlar çok güzel fakat sizin sitenizdeki gibi (en altta olan) yukarı çıkma eklentisini paylaşabilirmisiniz.. Yavaş yavaş yukarı çıkma eklentisini ..

  5. 08 Nisan 2010 | Eray USTA demiş ki:

    Merhaba o javascript ile yapılmış bir fonksiyon internette biraz daha araştırırsanız bulabilirsiniz.

  6. 18 Mayıs 2010 | bilquer demiş ki:

    @now ,
    Dediğin gibi bir kod buldum , sitemde yazmıştım daha önce burdan bakabilirsin :

    http://bilquer.blogspot.com/2010/05/blogunuza-yukari-cik-butonu.html

  7. 07 Temmuz 2010 | TheBoss96 demiş ki:

    Kaynak belirterek bunları sitemde yayınlayacağım şimdi yınede yazmak söylemek istedim buraya ;) Kaynak olarak burayı göstereceğim.

  8. 09 Temmuz 2010 | Eray USTA demiş ki:

    teşekkür ederim theboss kaynak gösterdiğin için :) )

  9. Şimdi Eray USTA demiş ki:

    Lütfen yorum kısmını backlink alabilmek vs. sebepler için kullanmayınız! Ayrıca isim kısmınıda lütfen nick veya kendi isminiz ile doldurunuz. Aksi takdirde yorumlarınız spam gerekçesi ile onaylanmayacaktır!

yorumlarınızı bekliyorum