Yukar� ��k Butonu
Bug�n yukar� ��k butonunun nas�l yap�ld���n� ��reneceksiniz, Blog i�eri�inizde �zel, blogunuzdaki ziyaret�iler i�in kullan�m� kolay.
Yukar� ��k veya a�a�� in butonu gibi ziyaret�ilerinizin daha kolay gezinmelerini sa�lam�� olacaks�n�z.
1. 19 Farkl� Stiller ile Top D��meler G�r�nt�
Ad�m 1
Tamam, �imdi blogger hesab�na gidin ve Tasar�m --> �ablon --> HTML'yi d�zenle ve a�a��daki kodu bulabilirsiniz.
Not: Yukar�da �ablon yedeklemeyi mutlaka yap�n�z herhangi bir hatada �ablonu geri y�kleyebilirsiniz.
HTML �ablonu geni�lete t�klay�n ve Crtl+F tu�lar�na basarak arama yap�n.
]]></b:skin>Yukar�da buldu�unuz kodun �st�ne, a�a��da yaz�l� kodu yap��t�r�n.
#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}Ad�m 2
�imdi a�a��daki kodu bulun.
</body>Bu kodun �st�nede a�a��da yap�land�raca��n�z kodu koyacaks�n�z.
<a href="#" id="backtotop"><img src = "Resim URL"alt =" geri d�n "/></ a>
Ama bu kodu �ablonunuza eklemeden �nce l�tfen a�a��daki be�endi�iniz bir d��me stilini se�in k�rm�z�, ile yaz�lan ile yaz�lan yere a�a��da be�enece�iniz resimin kodunu yerle�tirin.T�rnak i�artelerine dikkat edin.Ayr�k kalmas�n.�ablon hata verirse kod aralar�n� inceleyerek birle�tirin Hata ile kar��la�t���n�zda yapt�klar�n�z� ve yaz�lanlar� tekrar okuyun.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ONBU4Kr1y6BRjIsOHhaA3PBABKThuma9akSGW9J4VKN4boRjZWBO2DP80d2nTTSkH_ZdoSfAVw4rxGhFTQMOTjICyySQliAUv1DHqECsDQpP7aTcJWBe63Lc3cIuifi04v7OXNeE9aeC/s1600/bttp-5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZqRyTO960udkNSMDwxrAblwASTzHid1OUMsjiRyHBmMe3rQmZMn_6FyLgEOCZRPQMi1b0morOs8p9pIZzZXGuQtcw0lJj9wEfnVtbVoHGcYDqpP1PXJZUkAH7o8HXDr6CkvVuPLdDEub/s1600/bttp-4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs2oQ1BlRq0oUNjxgWjviVYkYO1IhkMd1KjEwWjwYASntwX1XmhhxNCvGJl7EtTiThSgRjnUbQaeQwAh1XabYkuzmXZQ_DxXsLvFHlE5xAEH4XZ-80EN36vE7Qmki3ahUiPfPMPidXJ2rt/s1600/bttp-3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_eLMQf2AOzpkUR0doNNrmex-1YTg3KwEsHhmXkOsOWMsol20rZOYtoKWAASJzDYMDqYg8gCYBeoI_auM-KT6FWX-LiR6TRFLzP6wyUIRBroO40mqkUX7CDYN0yHj22ZsmsBpPHYjbAX1k/s1600/bttp-1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_r0zQ024IYLySG0NPR4dkFAjeXnYU_u836JnLZ4vD8mLDhgU3EKuT46s-uYthX-EMfHD1yGpHihnxL8Qp9sR1h5tFxXOF7h4vPUdqR_LHa6BMWExxsml0JaB0RTf0RRQJXp413REwYhgs/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/AVvXsEjnKSMdVz3xAdkGhJuC7wo1xc4D-4dyAAwRgPhwlKe-q8PwSWoJ8UbtSn36MppBSYXODaaLkizziliOMNEGc3Bd11sqlfGLXwnAM4ThjG2jIk01eJrEAeuglKh631aG6apmwepXSYogIIh9/s400/bttp-10.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe-XIvrZq_5dbVYGPypxqcYqXDrmixdWRX6K8pVkLWwtrqm2DORlzTjQwgjZFpP0SubouYQOQPglVhQfF3VnYxDmr0LTEOLuH9c2GcV4yrrzNwqgp_bvF-W106mhyxGnsqI-MWNnrrRvYx/s400/bttp-9.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_zgTJcoeBAUm7syjlD6Pb_a7qqawMma22-3KEHPOM8fhZcwD4x-bhp52UdMkNqMOBvs_dtYI_Qb9LJ5PjWqLpNNZBVMeR4prrcyv0ZHEOX5AQCVhl1grEyi9e0xFaVCAcvNfkJgxvIgM6/s400/bttp-8.pnghttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp-bUmR9SeEL2oVsLSigiC_ZkJcuHppcVF6ZoW9i1r0tV8ZKC0ICzeuvt52lxleQw548njLcMCkdj5XGtnvouwdj95EtBI0Vr3Xf047hRE7i9qGfccz_MI-EG58VePi8zq0-uxSpu_h9yz/
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2lNb9A_YHMVre2-GUQfyRd3mZHfj7TJcyWiU-ly8Er96KSv8KhK5SjszKAi6zmTlznmfm2UNcgfZM_9tS_JPizxaqgKVyIkbom1g_NOEu897vUcAYb6F6re9LrxVlFWbM6Sa8ZCVLr6mi/s400/bttp-11.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbedvwh65mgRNyIcN2Crgr_k1aGCdZuLn8Clk0yzsbrfNcMpSXx5rdplVf35h5ieI-A6cxF17YOkpgSR4HLGD2ghXVAPCHHYG8WkpFiR_jL-nvjVoDgRn2rsqd2tDb2B1ybo0dBHjVeSIs/s400/bttp-12.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrfaKGEpFLVZepMp4yGQ_wvyBBUG1Gkj3M-h8STipRJi99qCGxHDX4Aq0o3Z0J3mVbZmdx0hUSn7tnekXDdg7YbtrHOeKcQogcnBMLjTiZw-JxWSXvILItK0V3re8KJCdRuM1NJBU_6EmZ/s400/bttp-13.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZRTYCRfY_RMwHkaIUdeKtxcpW5Mjt51yomCOntXLUR6RtTx3rmzSBicheEgSRZkMNQF9SC5UZHyd-uNWstCkKQzlW0TgZMqMILgUkJQj8B24m8k0n5Ug4haLb9-cLqM2oXzrGaT5ToJlM/s400/bttp-14.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Jbx9KpKtvjmqfvzFpfuxrPI4Wz40O1J9vcJfuWj59ZHTR88U0JO43pw_Nf49zG985CZvoVLeSYN4pIqADHm3Hx-hxxiFPKKZ7KAQqFrA0fCKJDALvFNn_u_3oV2ERhstl0ctY5T9TOa_/s400/bttp-15.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9XaMhR1I26JPmFUsEncHH0RuC3mF_p9lfTMfWzteWmq96J2hvG9aNJlXY7KYeVysKSKGc8EwKXFdQxms4HoWkUXzT3u-fIbNn0V6bt9AFhKrfhXhMAXwl_PqdoDMK9QNkdTdrsce_I7Tf/s1600/bttp-16.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7xUQHvPFfED6XuMwToSTl2DZNiRkL8fpa5OcTAiBA9N3ey1zYxQDOV55Nx8YUquCslC8DHl34HSLXeOpfveOFqGMNqE9ImzQHrVxdKNViAyF0sMIG0r93ZztruZhHssFWkkKO10Djng1/s400/bttp-17.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQCoNhq_u1jCeo15rxQM3naRu66tFzYBSA38BivLfEqZ8AD5Zm-etS2eky1mDyRnSGUwhG7fj1wu-Aayeh2PCayXUFI6RsjK_afizHRVIssX_CFQf74o4Y3wsu-_0zl6ESm8xPMak-_HQ/s400/bttp-19.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy0IwfL3G5cv5j6rggDFep3AJHT-M_tdcZhgoJHNge0MKKM3x7G_EiQHzX2XKinuOEbskOjzHOYChktlWFnpE1q1PIKHPcYXrf33oWb0wH1KflGtyZSxAXwucPhj0kayyfW55w3o7meeAf/s400/20.pngBe�endi�inizi se�ti�inizde Resim-URLstili a�a��da g�rd���n�z gibi g�r�lmesi gerekir.A�a��da seneryo gere�i se�ilen bir kod'un birle�tirilmi� halidir.
<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> �ablon kodunuzu yap��t�r�n.�ablonu kaydedin. Hepsi bu kadar.Farkl� bir uygulama i�in di�er ad�mlar� takip edin.
Ad�m 3
A�a��daki kodu bulun
<head>Ve sonra bu kodu yap��t�r�n.Buradaki kod yukar� ��k a�a�� in JS. kodudur.Di�er anlat�landan farkl� bir uygulamad�r.�kisini birden yapmay�n.Buradaki anlat�m ayr� bir i�lemdir.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
ve sonra �ablonu Kaydet hepsi bu.
2. Yaz� Geri farkl� stilleri ve renkleri ile en iyi Link
Ad�m 1
Tamam, �imdi blogger hesab�na gidin ve Dashboard>> D�zen>> D�zenle html>> ve a�a��daki kodu bulabilirsiniz.
]]></b:skin>
Ve bu kodu eklemeden �nce
#backtotop {
width:100px; /* Change Box Width*/
background:#F4FFBF; /* Change background color*/
border:1px solid #ccc; /* Change Border Style*/
text-align:center;
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
color:#666; /* Change text color*/
text-decoration:none;
}Ve blogunuza �ablonu ile uyum ve uyum sa�lamak i�in l�tfen bu �zelliklerini de�i�tirmek
De�i�im 100 kutunun boyutunu art�rmak veya azaltmak i�in daha d���k veya daha y�ksek bir say�.
De�i�im 1px s�n�r geni�li�ini de�i�tirmek i�in.
# ccc favori renk kodunu de�i�tirmek kenarl�k rengi i�in.
De�i�im F4FFBF favori arka plan renk kodu.
De�i�im 666 ; favori Metin renk kodu.
Ad�m 2
A�a��daki Kodu bulun:
</body>
Ve �nce, a�a��daki kodu yap��t�r�n.
<a href="#" id="backtotop">Back to top</a>D��me metni de�i�tirmek i�in, d���nd���n�z bir ad� yaz�n.
Ad�m 3
A�a��daki kodu bulun
<head>
Ve sonra bu kodu yap��t�r�n.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>ve sonra �ablonu Kaydet kaydet.
�rnek bakabilece�iniz sayfa



0 yorum:
Yorum Gönder