SCROLL TO TOP- NUOLI

Tämä ohje oli yksi teidän toiveista ja ajattelin sen nyt ensimmäisenä toteuttaa, koska tämä on niin simppeliä.
Nuoli tulee siis blogin oikeaan alareunaan, kun sivua rullaa vähän alaspäin. Katso esimerkki täältä.

1. Ensimmäisenä pitää tehdä jossain kuvanmuokkausohjelmassa nuoli/kuva, jonka haluat sitten vievän ylöspäin. Muista tallentaa PNG-muodossa!

2. Lataa kuvasi esimerkiksi Photobuckettiin ja avaa kuva ja kopioi sen linkki.

3. Sitten menet kohtaan ulkoasu > lisää gadget > HTML/Javascript

4. Liität gadgettiin koodin: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='rb-top' style='display: none; position: fixed; bottom: 20px; right:20px; cursor:pointer;font:12px arial;'><img src='kuvasiosoite.fi' width="40px" height="40px"/></a>

5. Korvaat sinisellä merkityn tekstin oman kuvasi osoitteella ja, jos haluat kuvan olevan esim. enemmän toisella reunalla muokkaat kohtaa, joka on merkitty punaisella. Muitakin pikselilukuja voi muuttaa. Kokeilemalla löytää parhaan tuloksen.

6. Esikatsele ja tallenna!