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 }

  1. guzel olmus tesekkurler..

  2. 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. Teşekkürler Aytekin yorumun için evet bencede kendi sunucunuza yüklemeniz en sağlam yol olur

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

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

  6. @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. Kaynak belirterek bunları sitemde yayınlayacağım şimdi yınede yazmak söylemek istedim buraya ;) Kaynak olarak burayı göstereceğim.

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

  9. Üstad eline sağlık sizler gibi bilgisi olan kişilerden faydalanmak hem güzel hemde zevk verici.Hayatta en çok istedim bilgisayar eğitimi idi ancak kendim bunu 1990 senesinden beri söke taka kitaplar okuyarak bir yere kadar getirebildim.Sizin gibi arkadaşlardan yararlanmak ve yapılanı görmek gerçekten zevk verici eminim.Genç arkadaşlarında bu veri alışverişlerinden gereğince yararlanırlar.Tekrar görüşmek üzere.
    Saygı ve sevgilerimle..

  10. Adnan bey yorumunuz için çok teşekkür ederim. Görüşmek üzere saygılar…

  11. slm.
    anlattıklarınızı uyguladım fakat şöyle bir hata veriyor.XML hata iletisi: The element type “a” must be terminated by the matching end-tag “”.
    acaba nerde yanlış yapmış olabilirim.

  12. Eray usatam merhaba.Kolay gelsin.İçeriklerini paylaşıyorum haberin olsun.Kızarsan hemen iptal ederim.Sendeb haber bekliyorum.Birde blogger sayfada kod kalıcı olması için bir yayın yaparsan çok memnun olacağım.html Yorum, ve html olduğu gibi göster haricinde bir uygulama varmı yani.Wordpress olarakda ücretsiz blog tabi, sayfa altına örnek sayaç kodu vs eklentileri nasıl verebiliriz.Vidyo embed kodlar ne şekilde verebiliriz.Teşekkürler.

  13. Adnan merhaba, Blogspot kategorisi altında sorduğun soruların bazılarına dair cevaplar var. Yeniden yazmaya başlar başlamaz bu tarz istekleri göze alacağım.

Yorum Yap


Not - Bunları KullanabilirsinizHTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">