perjantai 11. lokakuuta 2013

Oikeaan alareunaan ilmaantuva "nuoli" sivua scrollattaessa alaspäin

En keksinyt tälle parempaa nimeä, sillä rehellisesti sanottuna en
tiedä, mikä tämän efektin nimi on. Osa teistä on kuitenkin
varmaan törmännyt blogeissa oleviin nuoliin, kolmioihin tms., jotka
ilmestyvät blogin oikeaan alareunaan sivua scrollattaessa alaspäin. 
Ja siitä kun klikkaa, sivu scrollautuu nopeasti ylöspäin.

JA MITEN SAAT BLOGIIN?

1. Sinulla täytyy olla kuva, mieluiten läpinäkyvällä
taustalla varustettu. 

2. Lataa se johonkin kuvapalveluun, vaikka Photobucketiin.

3. Ulkoasu -> lisää gadget -> HTML/JavaScript.

4. Lisää tyhjään kenttään alla oleva koodi:

<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: 14px; right:14px; cursor:pointer;font:14px arial;'><img src='www.kuvasikaunisosoite.fi' width="45px" height="55px"/></a>

5. Lisää kuvasi osoite sille tarkoitetulle paikalle. Pikselilukuja voit
jälleen kerran muokata mieleiseesi. Ne vaikuttavat kuvan
kokoon sekä marginaaleihin (miten kaukana kuva on esim. 
vasemmasta reunasta...).

6. Lopuksi tallenna! Suosittelen laittamaan kyseisen gadgetin
alimmaksi gadgetiksi, jotta juttu toimisi parhaiten.

xoxo iltsu

27 kommenttia:

  1. kiitti paljon, oonkin miettinyt että miten tämmöisen saa tehtyä :))

    VastaaPoista
    Vastaukset
    1. onko muita tapoja tähän, itselläni ei onnistunut? :O

      Poista
    2. En ole asiasta aivan varma :/ ootko varma, että noudatit kaikkia ohjeita? ja kopioit kuvan osoitteen oikeasta kohdasta photobucketissa?

      Poista
  2. Mihin kohtaan kuvan osoite siis kuuluu laittaa kun tekee tota? Muuten minulla onnistui mutta kuva ei tullut näkyviin.

    VastaaPoista
    Vastaukset
    1. Kuvan osoite eli linkki laitetaan tuon koodin alueelle, jossa tossa mun esimerkissä lukee www.kuvasikaunisosoite.fi (boldattu punaiseksi) eli koodin loppupuolelle '-merkkien sisään :)
      Jos olet tehnyt tuon aivan oikein, varmista, että olet kopsannut kuvan linkin Photobucketista oikeasta kohdasta, ei selaimen yläosassa olevasta osoitekentästä :)
      täällä vielä ohjeita photobucketin käyttöön; http://blogikoodeja.blogspot.fi/2013/10/vahan-photobucketista.html
      ^^ siellä myös siitä Direct-kohdasta, josta kuvan osoite pitää kopsata(:

      // kysy ihmeessä, jos ei toimi vieläkään! ja muista tarkentaa ongelmaasi, jotta ongelman ratkaiseminen onnistuu parhaitan :---)

      Poista
  3. Hei, latasin kuvan photobucketiin ja se toimi ensin hyvin. Sitten nuolen kuvan päälle tuli teksti, että olisin siirtänyt tai poistanut kuvan. Kävin katsomassa kuvaa photobucketissa ja se oli siellä vielä normaalisti... Osaisitko auttaa? :)

    http://hennamariajohanna.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Apua sentään, vastaan kolme ja puol kuukautta myöhässä! Tästä mun vastauksesta tuskin enää on apua sulle - luultavimmin olet kysymyksesi jo unohtanut - mutta toivon mukaan jollein muulle!
      Tässä voi olla monta syytä, mutta ekana mulle tulee se, että kuva ei ole julkisena vaan privaattina. Tosin photobucketin kanssa siinä ei välttämättä ole ongelmaa, onko kuva privaatti vai julkinen, mutta se saattaa olla ongelman syynä!

      Poista
  4. Hei, mulla tää ei oo toiminut lukuisista yrityksistä huolimatta. :( Oon muokannut itse semmoisen sopivan nuolikuvan, vetänyt taustan transparentilla ja ladannut sen photobucketiin. Kopioin siellä kuvasta sen direct- kohdan ja korvasin sillä koodista tuon 'www.kuvasikaunisosoite.fi'- kohdan. Oon luonut koko hommalle ulkoasuun HTML/JavaScript- gadgetin ja sinne kopsannut koodin Direct-muokkauksineen. Sit oon järjestellyt gadgetit silleen, et tuo nuolijuttu on gadgeteista viimeisimpänä (toisessa apublogissa nimittäin sanottiin, että joissain blogeissa ja malleissa ei välttämättä tää scroll to top- linkki toimi, jos gadget ei oo viimesimpänä kaikista gadgeteista.) Mut sit kun tallennan ja katon blogia, niin se nuolikuva on vaan semmone laatikko ja yläkulmassa on semmonen revenneen paperiarkin kuva (en osaa paremmin selittää.. :D) Se kyllä toimii, vie blogin takas ylös kun siitä painaa, mut nuolikuvaa ei näy. Mikähän on vikana? :D Tossa mun blogi jos vähän selkeyttää: http://tiia-keepcalm.blogspot.fi/ :-) Suur kiitokset jos autat!

    VastaaPoista
    Vastaukset
    1. Hei Tiia! Mahtavaa, että kuvasit ongelmasi niin tarkasti kuin pystyit ja linkitit vielä blogiisi linkin - se helpottaa huomattavasti ongelmien ratkaisua. Hienoa myös, että olet noudattanut antamiani ohjeita - mitä useimmiten tää koodi ei toimi kunnolla, jos sitä linkkiä ei nimenomaan kopioi siitä direct-kohdasta :_D

      Mun ikävää sanoa tää, kun oot nähnyt niin paljon vaivaa tähän kysymykseesi (mikä on tosi hienoa ja arvostettavaa!!). Kun mä menin sun blogiisi, se nuoli näkyi ehkä kaks sekunttia kuvailemanasi laatikkona, mutta nopeasti ainakin mun silmään siihen laatikon kohdalle ilmaantui nuoli. En näe yläkulmassa revennyttä paperiarkkiakaan :-D Varmistin vielä, ettei ongelma ole selainkohtainen. Chromessa ihan sama juttu paitsi, etten mä nähnyt koko laatikkoa - vaan pelkän nuolen :"D (ekan kerran kun siis blogiisi menin, menin sinne firefoxilla). Kokeilin vielä Internet Explorerillakin, mutta kaikki toimi niinkuin Chromellakin. Ja lopuksi menin blogiisi vielä kerran Firefoxillakin, jolloin laatikkoa ei myöskään näkynyt ekasta kerrasta poiketen.

      Liitän tähän vielä kuvasarjan, miltä blogisi näyttää minulle:
      http://aijaa.com/UCdgzC
      http://aijaa.com/LBNk4H

      Eli kaiken pitäisi olla kunnossa :)
      Jos et ole vielä kokeillut päivittää sivua, kannattaa se tehdä. Ja hankkia selaimesta uusin versio, ellet ole sitä vielä tehnyt. (:

      Toivottavasti noi jutut näkyy sullakin! (:
      Ja jos ei näy viimestään huomiseen mennessä, ota ihmeessä yhteyttä uudestaan.

      Poista
    2. Kiitokset! :-) Aika jännä juttu kyllä, vielä hetki sitten nuoli ei näkynyt tällä mun koneella, mut nyt se on tullut jollain ihmeen tavalla mullekkin näkymään. :D Mikähän lie ollut ongelmana.. Mut nyt toimii, onneks! :)

      Poista
  5. Moi!
    Mulla on ihan sama ongelma kuin Tiialla. EI VAAN TOIMI! :D höhö,, ei toimi Tiioilla ;)))
    http://tippsuu.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Mooi :)! Oletko käyttänyt kuvapalveluna Photobucketia ja kopsannut kuvan koodin Direct-kohdasta?

      Poista
    2. AAA!! Joo kiitos paljon, aluksen älynny yhtää et mistä ihmeen direct kohdasta, mutta löytyhän se lopulta! :D

      Poista
  6. Moikka!
    Mulla tulee kuvan kohdalle sellainen kysymysmerkki enkä siis saa kuvaa näkyviin? Latasin kyllä Photobucketin kautta ja kopsasin sen linkin tuolta ylhäältä ja lisäsin oikeaan kohtaan! Mikä avuksi? :-) Kiva jos vastaat.

    http://elisabethlydia.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Huomasinkin minkä tein väärin! Kiitos ohjeista :-)

      Poista
  7. Kyselisin vaan mistä tämmösen nuolen saa ladattua? Läpinäkyvällä taustalla en ainakaan ihan googlesta löytänyt.. :)

    VastaaPoista
    Vastaukset
    1. Mooi :)! Googlesta löytää joitain nuolia hakusanalla arrow transparent background. Myös tästä linkistä löytyy "taustattomia" nuolia:
      https://www.iconfinder.com/search/?q=arrow&price=free

      Poista
  8. Tein kaikki oikein, mutta se nappulan kuva ei näy, mutta muuten nappula toimii :O Missä vikaa ? Tein siis nappulan koiran kuvasta, mutta se koiran kuva ei näy..

    VastaaPoista
    Vastaukset
    1. Hei! Kopioitko kuvan osoitteen Direct-kohdasta? Luultavasti et.

      Poista
  9. Mitenkäs kun mun blogissa on toi nuoli, ja olen sitä yrittänyt poistaa mutta mulla ei ole css:ssä tuota koodia... Miten saan sen pois?

    VastaaPoista
  10. Mitenkäs kun mun blogissa on vihreä nuoli mutta kyseistä koodia ei löydy CSS:stäni. Voitko auttaa? Blogi:http://kisaradalle.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Moi Roosa! Koska lisäsit koodin JavaScriptinä etkä CSS:ään CSS-muodossa, koodia ei CSS:stä löydy, joten sun pitää poista kyseinen JavaScript-gadget.

      Poista

MUISTA LINKATA BLOGISI !! -> näin ongelman ratkominen / auttaminen osaltani onnistuu parhaalla mahdollisella tavalla! :-)