19.Blogger Yukarı Çık Butonu

Blogger Yukarı Çık Butonu Nasıl Eklenir

( Konu : 19 )

Bu yazımda size farklı bir anlatım olan, blogumda alt kısımda görmüş olduğunuz yukarı çık butonunu anlatacağım. Öncelikle blogger kontrol panelinizden 

Tasarım>şablonlar>  html düzenleye gidiyoruz.

Aşağıdaki kodu aratıp buluyoruz.

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrfaKGEpFLVZepMp4yGQ_wvyBBUG1Gkj3M-h8STipRJi99qCGxHDX4Aq0o3Z0J3mVbZmdx0hUSn7tnekXDdg7YbtrHOeKcQogcnBMLjTiZw-JxWSXvILItK0V3re8KJCdRuM1NJBU_6EmZ/s400/bttp-13.png

Resim 2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZRTYCRfY_RMwHkaIUdeKtxcpW5Mjt51yomCOntXLUR6RtTx3rmzSBicheEgSRZkMNQF9SC5UZHyd-uNWstCkKQzlW0TgZMqMILgUkJQj8B24m8k0n5Ug4haLb9-cLqM2oXzrGaT5ToJlM/s400/bttp-14.png

Resim 3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Jbx9KpKtvjmqfvzFpfuxrPI4Wz40O1J9vcJfuWj59ZHTR88U0JO43pw_Nf49zG985CZvoVLeSYN4pIqADHm3Hx-hxxiFPKKZ7KAQqFrA0fCKJDALvFNn_u_3oV2ERhstl0ctY5T9TOa_/s400/bttp-15.png

Resim 4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9XaMhR1I26JPmFUsEncHH0RuC3mF_p9lfTMfWzteWmq96J2hvG9aNJlXY7KYeVysKSKGc8EwKXFdQxms4HoWkUXzT3u-fIbNn0V6bt9AFhKrfhXhMAXwl_PqdoDMK9QNkdTdrsce_I7Tf/s1600/bttp-16.png

Resim 5

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7xUQHvPFfED6XuMwToSTl2DZNiRkL8fpa5OcTAiBA9N3ey1zYxQDOV55Nx8YUquCslC8DHl34HSLXeOpfveOFqGMNqE9ImzQHrVxdKNViAyF0sMIG0r93ZztruZhHssFWkkKO10Djng1/s400/bttp-17.png

Resim 6

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQCoNhq_u1jCeo15rxQM3naRu66tFzYBSA38BivLfEqZ8AD5Zm-etS2eky1mDyRnSGUwhG7fj1wu-Aayeh2PCayXUFI6RsjK_afizHRVIssX_CFQf74o4Y3wsu-_0zl6ESm8xPMak-_HQ/s400/bttp-19.png

Resim 7

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy0IwfL3G5cv5j6rggDFep3AJHT-M_tdcZhgoJHNge0MKKM3x7G_EiQHzX2XKinuOEbskOjzHOYChktlWFnpE1q1PIKHPcYXrf33oWb0wH1KflGtyZSxAXwucPhj0kayyfW55w3o7meeAf/s400/20.png

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

<a href="#" id="backtotop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy0IwfL3G5cv5j6rggDFep3AJHT-M_tdcZhgoJHNge0MKKM3x7G_EiQHzX2XKinuOEbskOjzHOYChktlWFnpE1q1PIKHPcYXrf33oWb0wH1KflGtyZSxAXwucPhj0kayyfW55w3o7meeAf/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

Categories: Blog sitesi kurulumu , Blogger , Yukarı çok butonu