Tombol Kembali Keatas Di Blogger

Kali ini ane mau postingin trik yang gasusah tapi juga penting. Back To Top (Tampak pojok kanan bawah pada blog ini), lumayan untuk mempercantikk halaman blog, juga berguna buat para pengunung blog yg kadang males scroll ke atas..
walau mungkin uda banyak juga agan2 yg tau tapi yg penting INDAHNYA BERBAGI..

CARA MEMBUAT TOMBOL KEMBALI KE ATAS

1. Login di Blogger >> Rancangan >> Edit HTML
2. Lalu Copy Javascript dibawah ini.. 


#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}


3. Paste kan di atas kode ]]></b:skin> seperti contoh dibawah ini..


#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
]]></b:skin>


4. Copy Javascript dibawah ini..


<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>


5. Paste kan di atas kode </body> seperti contoh dibawah ini..


<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>
</body>


6. Gantilah kata-kata yang berwarna MERAH (Image-Url) dengan Url dibawah ini sesuai keinginan kamu.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjNgS7fNXtvlVgt_VsblJHmeBTu5OXnjK9ooCSQcoGl9aQxIa_D68-RyrOkU0V24fFOC_UjMJIomcEdy8R_7qYeA047MO9Y1p9rzk3Ih812z5-kfNoPU5syqbufbWR6u48ti-VIgpjPAP3/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12NvLOonW5RxcxCsBoaLG9BBNSXNY7Q0SkWk_bQVidrgGn4BtoNNOOqigImEY7eAA-rJoew-IpV9gNbGQM_l6mppLBoxwuE0I6E46lM-SboYAsMklmAPYSMw_xYCxHH9x5sQJIox8R7lr/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlQXSZsQ6yws2RsTu1LchkVLqZVEu4Os9FwsQtLVX6DGwblOjfqF9yvrtPbjHaCEgw7aqd9066u1Kxks-eOZUdQq7yz-uiVkVfF7gwqrPyEmtfrM9w4AoDbDkSZV7Px-cq664qPSEsWCre/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzhRp2DPpYrQpw1NDRS6h7_keUyqjHvJB3oJdWdAOcHCWpmPYPVntr_BUZGajOh1G8b4XR8pBSPJGVMQqIemkamDLyPwJS9qWqm88PWeGhZq5O34euF-jURVwMlwHRv_t8F17Wqd39PZ_G/s1600/bttp-1.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/AVvXsEjUdu4QN4d4KqtfnFjLCvH5CMCAQJ51_any4MhUVjHQIG6frANkFeNtv4NWiEUWjYkTNbUFN2BqL3Nnjdz_V4dfauFdBAjkkEmoSf8l-Y7-ZKjy_DUgwpHSyHBF942yiJzcOj3eShOf2rY-/s1600/bttp-2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9SlRgXk51loekXCqOgoJZeivZV7r5r4AidjJR29pnqdGYmhy8WMlfMwHMWx0nnb_e2oprnSCNBN_slEg0BE2Qy9jyKFrZ3ZUqDPnLnSSppd8I_DnGf93NvkH4Y3vQmk1pKeSDo8PwVUuy/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWRJTK8p0eSEE6lu7G4MQoekjYFlKV8I87c_RrbeOZ5fuOI_m9tYJh2dKIoyX1bykYG2LsHNew1qeLHnejweSuxB-zrCn8epeghqoMFkVJjLERii3pRrF8kSQRqeMziefMo2WSvU4H2uca/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigw9QXSHVDy0azGZ9b7JM_3uXB0YWcHwmjp5r7RXDgzBChpETW6cUAgthVUuItnFWGhJwHelj4WCbdwTnIAM0CJwlV4bu2Knrcn6n6-KSptvB7Hk4aA6dy5hGLAkFKkHvcPQcrrRLIK3kG/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWJvUEWJb0RH1vKOQprdymYMgj1K2qYFAusTLpUtT9IZwV1G0PNYpU5_-Td3q9vd_OwcxL_wFlA8NqvtCGurNtfmb3mZBqwu6O7SBv4fgu04qFCtplFPUoViE3sI-pRV70HYBO_7eMx9XL/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQxZB4VQh-LQ61r9GQqM6UIyt2zl7ZNmK6e9n-gQ0d8rex-IpAAEnMqqNxsEuU3qisnTWWMv9gTzyUKKPTQZjPNNAw5DkvzdgKVjJmNVkTj643bPaH_CJf3gABcnrGoAc9WKzSInflRWgJ/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzJNSutrJQ6qNNaQi9TDOCnATVbLXEd2ADOwqHVoXx_SGNj_ZqV0qIGtaj_O_CBWs8TlC75EJT2jCngxHyERPh1yFfGrvQG_JQMFk4l4QPCXiFbOCrGY_8sLSY7jgjhEi5rtmDiBOtTKnb/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB_zp5cbsfP8KhrpUTsPOOdgixdWYZgJU7UTGsStQpQ95UeV_gVSQbmSMSvhBvy2ueEWaBbCrIq2WtgBN2aC4APzuze9PmwMjI8lwne9FMrjCztpgAUogxpyAQupCtrw0aqmuWoP6CgGwJ/s400/20.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizDB3DpchN6E7YCuucIIslAa8GimX81npdOpHFxIBzVt56QTm_zsb-J0LvV9SHDhZksUKxlph62ceHKPNbe_Sxiik0wqgt0MS3PRkAmRZpEY9wL7bCa1sJvAt776nixscZd20luYEJCsem/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIRNI9ulhd_XVtm8somp0EnKlnWn2r6HOAnmIZ1jYfcJzfPWl20zCDKGhD4tk2lpQ0HKTBFvww8QaJ9cVKDa2K-QypKqRCRDNnGFoV2j3yUBbMVAHTwz2daOK9yjGAOEhjI8sI6SLBx4yF/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK1EaBg5BVrsRxOsrEtumu6337a5gRMNEPjvxCanDS71Pis54BftgBI34saPHLHDkMglonPC3yneH5R8mkOjhPfqVkNwGEKH0w6wzoFoWqf6DUTjduNp1CuXwohAY2ns81xc3MdrKTkrpf/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGS_S74q_ULcNKIYVHrboDrRc9WDTrvtmXuHHqR5As5ibyTgSVVrINXEiGRObGMYaEC_O8mkpI91kUW90i3nq82R0VA33iGU_60FxsoTQvWKFD0c5166rmerm4EtHyPh_ci-8JMWSVIFLY/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtnWyWDpvy-nIGUMgTuoywChDD29M1xW8UaQSeuDyYY3r3j80CMtxeZd7WSQe0Qp1uX2UrXx1NDB8WNn_SmirPcbNzVfyapCKiMhE0UtB1mW4l-_JNUmLPxBW-BB24zMa_vxDSMKOgbBRr/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix-KvVQofbUqrl_XOsXLIFxPFbLNTWGwkZFGGAMs4gukKRNNOdTffMQzGFQAcF3_Cz96MUIYSRtgJgB0aaJJlnloN0zyvKlSwD39BehgjBbzfJH94o3HmeZHTXtZHeA7vocQn4hi81clN5/s400/bttp-13.png

Sudah selesai sebenernya.Tapi mari kita beri sentuhan terakhir untuk memperlambat kecepatan scroll

7. Copy Javascript dibawah ini..

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});


8. Paste kan di bawah kode <head> seperti contoh dibawah ini..


<head>
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});


Selesai.. kemudian Save Template anda..
selamat mencoba :D