Blogger yukarı çık butonu back to top ekle

Blogger Yukarı Çık Butonu Nasıl Eklenir

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.

]]></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-Url" alt="back to top" /></a>  

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWr4iQKqvhfaPjuxTTchbsgIhm_QNR2gJfP7JQdBLZ9CU7R_udkSnH4OfnpD1tlG5TZnHmb_Wm9ufOXCj5NjvaJt-6Bg_gjQ4AMY0x8JIrBl2iPxAIa4FDABlJcBi-BR4fcdAWNZEB485/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEGdA6ttb14AoG3SlA3s5u_oALxOmDWiwA_tv1IaIgqWBRPREMGMDS4-O7Tu2nPSh_7B1UGlTzAOF_iLb9-Y3cd_ucY9j7_ECpkI4IRx43V5rhyphenhypheneJWq2FKpOyUe92rh3rlkW8Ot9fK1MAU/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGaBgzFp6NRjQP3JQc7z9OyQTWRI1wrmdSCoB_GxTSDObmQId8DtzNzJC9hJEYHDKIrGHbHIKhAzrMe8CGLEwEZrUSw6FJVCGzfjFlqWHgw0PDHVqfCswBFQu4mHHTjFOpZyn7ZHxGhAvV/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjta9TEOV9YqOf3cZJVm7a6CvW4S5Pe6DpN9mRzVG13mivWjxMqxzzSfbZHkGy8cY_4WwyN2ttJBKSShjaU952vdp8z_s-mp-IEwYEgrMhCLPmIGTkyiFRlc8ItSX3Q3HVvtBA4sC7Q2eMN/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQUNa3cOqlIcsBNc6cN2LFUf12Ojq5CCgmBAAFxJ0DDKdJrfXwmaB3pm8fkbw_2NRks1b7M4enMTLDvdj_NqCWgBby7tiRRI_smOBS-e1-NZi00b9gID9vOh4Sj-7BsQDqW8yT5bEqxCXo/s1600/bttp-2.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4y8m8FY8QGFL0lYjdfUMVt7HO-FkuijvlwxSTw-Yjnj4MyhD0WqHUgQmhMvu61G0_ooiN1QdkobNr2WEPPwvwnkaEnRtfbm7rmEwJwbvWmgwTIeXtfEpM0OelOW_MOSbJLqfYG-yLqx3p/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Uzteu0bp76D-xr-sDcfGIf1X1MzhZujSc1Y15y6ZcPmRVxEsoL7SoaMjzM8CrzHrlBsIU_GFm118MTpCXl0IT7rEFhNJdSawM1sh9Tk2kl984SUIbrdIgVsRMxNdx1BtsPdqV2prOJRG/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyQ6eaG95gq7w43fGspPwAxY0nsKsax1LzbTnZnvHlNRTLW8XemFYglKmnU1S2oF_nCU2kp8koAfNDuVuf1YLMY0ywWrSpizfzGn9iM2xEkISTa7tKnCnQPOOwl1GF3-hCDNfBCHZUxuGc/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW7kr0stC09Q-OnDm4uEzhVhRFNVTVsjiohfYgniDwV-aZOFpxPP3GJPSTEBW0UCjplkBVxuzH95qYkKGn9k2ItJox24TglReKFzblNvYkHIJOw7l985WL1Wi0O6jaDtF6thqKZnDIh2hU/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyeQVL766bwpZxOB505TTMUhiwRiYGoWf0ElhRUp63LL8L9JHV83lWIhA8te6XaMCu4N6PHorbdTqXURsAJLVrxXTEkmU6rBVUeXmL7jbzUi7YlUAUd1mP4TvxgKoiw8YNJkRk851SzTwY/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIvo1IodXnMgLAhGGAfdOeyoHqXuoVYimcGvT0pFEJTxD1Ja9KFCGw4UOu4E2Y8-lkHlhyphenhyphenLEqvLYJBIUwYS4nMGTQdXIMuphu2LHVRbMksgEbw4q9pXruYAp1GV56nCrtA9XUPpqth-bK6/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzBuw4KPgi3kTFPlcMlxCr_DXeTFgxzfEU4NHsHu5YEQELduw9rBprQegEi6Vyl7eRSzFwI4a0lbSoQ4Lptn1_c-0q6nqydlNf6yUZlPgcwrtbCqGp15WHry7pjbNJk7ZjIRELI91_hYV/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMbz5lbsw9M0gHMKaQAx5AceUetYEddDXpDszKkXgNjjrvGI5IY3a77WaDalN08jHDbaptdH9hXS3w3-EsQopPRLAJL27U3iQ4wJ2EoMznLZB8-vtvKI0yJpEQUT873Ggi0OLLVSTZKB9P/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRB8MSJU1k1RsQ0Q23aa8ow1D6TcnY0v_DpH9s2i_qJD2uTVlzyB0WmNPYBL9L5euEBg44zxhWZwPOn4B5jDpUOYh6GEXCZNPcEMt6Bg9bs_UE1qiF7aMp6aCtfpjk-k23Xwc10G4sLq-x/s400/bttp-15.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifb9pN41vLx746-4EsniDaMnucUkGQ3q9YLT9g8gYVm2PVsnVRq-4Tg6SRY1LMbl_T02EKJFUbCwEVn7h4JE253IiCtliWrXb8MNmqvRWgGxDreJVnr7cRxTdFtg0HsOi8MMPux7qOWQaa/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_OB4QulgW581qAZ45catkahQSj6x-oI32GYsULw-D56KH9tCJrLzUcvsZcZFVPkQn946V7naM-hgIZ8TrHBQGlvFC1Ugohoteai-utmCZghcGfp6kOxuhPDgCXQuMowq_kh48Pc-YC7z0/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWq55s1dWpfycrB1uhuO3Kw-Ri5tDC5XOvRzfMb00rdKeuy0lbGLFeq5kMigYhGmLieEj6YlYiDbSOfpoNMNmQ0AU8h0cjWOnp5m84OYRhZ8QtX_T93ZPfRHlJuy7mcJZqqtUj5GPos-v/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/AVvXsEjzWq55s1dWpfycrB1uhuO3Kw-Ri5tDC5XOvRzfMb00rdKeuy0lbGLFeq5kMigYhGmLieEj6YlYiDbSOfpoNMNmQ0AU8h0cjWOnp5m84OYRhZ8QtX_T93ZPfRHlJuy7mcJZqqtUj5GPos-v/s400/20.png" alt="back to top" /></a> 

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

<a href="#" id="backtotop">Back to top</a>

şeklinde de kullanabilirsiniz.