25. elokuuta 2014

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!

4 kommenttia:

  1. Jee kiitos tästä :D

    VastaaPoista
  2. Anonyymi26/10/14

    Osaisitko tehdä samanlaisen neuvon, jossa nuolen tilalle tulisi blogin Facebookin tykkää-nappi? :)

    VastaaPoista
  3. Anonyymi13/6/15

    Moi! OOnko ihan tyhmä jos en osaa tallentaa PNG muodossa? Voisiko joku neuvoa, miten? Kiitos!

    VastaaPoista
  4. Voi ei! Kiitos ihan älyttömästi!! Kun oon niin monessa blogissa ton nähny, mutta en ite oo ollenkaa osannu tehä!

    www.ponnyponi.blogspot.fi

    VastaaPoista