12
Kas
Eray USTA8 Yorum Var »

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 }





Etiketler: , , ,

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