tiistai 19. elokuuta 2014

Some-ikonit blogin sivupalkkiin

Postausta some-ikoneista toivottiin, joten otin toiveen kuuleviin korviini ja tadaa, tässä olisi postausta some-ikoneista. Kaikille sana ei välttämättä ole tuttu, joten havainnollistetaan some-ikoneja kuvan kanssa:


Some-ikonit ovat siis esimerkiksi blogissa toimivia kuvakkeita blogin sivupalkissa, ja yleensä kuvakkeita klikkaamalla pääsee johonkin sivuun, jonka logo on some-ikonissa. Esimerkkinä voisi mainita kysymysmerkin (joka voi johtaa esim. ask.fm:ään tai bloggaajan esittelysivulle tms.) tai Facebookin logon. 

MISTÄ SAA SOME-IKONEJA? 
Some-ikoneja saa netistä vaikka mistä, mutta ainakin ilmaisena niitä saa täältä eli iconfinderistä. Sivuston lisensseihin en ole perehtynyt eli en siis tiedä, saako kaikkia ikoneita käyttää vaikkapa blogissa. Lisensseihin perehtyminen todellakin on oma paheeni, mutta ei puhuta siitä nyt :-D

MITEN ICONFINDERIÄ KÄYTETÄÄN?
Iconfinder on omasta mielestäni simppeli ja helppokäyttöinen, mutta ihan varmuuden vuoksi ajattelin laittaa mielestäni tärkeimmät asiat tähän postauksen osaan kuvien muodossa.

Alla olevassa kuvassa on screenshot Iconfinderistä. Violetilla on ympäröity kohta, johon olen kirjoittanut englanniksi asian, josta olen halunnut some-ikonin. Punaisella ympäröity kohta on Free eli ilmainen, jolloin sivu on suodattanut  ainoastaan ilmaiset ikonit koneeni näytölle. Mikäs siinä, jos on valmis maksamaan ikoneista, mutta itse olen löytänyt Iconfinderistä paljon hyviä ikoneita ihan ilmaiseksi.



Seuraavassa alla olevassa kuvassa olen valinnut ikonin, jonka olen halunnut ladata koneelleni ja viedä myöhemmin blogini sivupalkkiin. Tärkeimmät asiat tuosta kohdasta olen ympäröinyt punaisella ja violetilla. Punaisella ympäröity kohta on kohta, josta painamalla saat kuvakkeen ladattua koneellesi. Violetilla olen ympäröinyt valittavissa olevat kokovaihtoehdot: useista ikoneista olen löytänyt laajat kokomahdollisuudet. Jos haluat monta ikonia ja ne blogisi sivupalkkiin, suosittelen valitsemaan koon 48 tai 64. Kokoa voi myös muokata ikonin ladattua esimerkiksi Paintissa.



MITEN SOME-IKONIN SAA BLOGIIN

1. Kun olet ladannut some-ikonit koneellesi, sinun pitää ladata ikonit jollekin nettisivustolle esim. Photobucketiin tai Flickriin. Tässä postaus Photobucketin kautta kuvan lataamisesta ja linkittämisestä (!! tärkeä !!)
2. Ulkoasu -> Lisää gadget -> Lisää HTML/JavaScript
3. Jos sinulla on monta some-ikonia, jotka haluat vierekkäin blogisi sivupalkkiin, tarvitset jokaiselle ikonille tämän koodin: <a href="TÄHÄN SIVUSTON OSOITE,JOHON IKONIA KLIKKAAMALLA PÄÄSEE"_blank"><img src="TÄHÄN SOME-IKONIN KUVAN OSOITE" border="0" /></a> Sinun pitää laittaa kaikki koodit yhteen gadgettiin tai niin minä ainakin suosittelen. Alla oleva kuva havainnollistaa tätä juttua:

 Kuvassa on siis kolme koodia samassa gadgetissa. Koodit kannattaa erottaa toisistaan kahdella enterillä. Huomaa, että nettisivuston, jolle some-ikoni vie, pitää olla http-muodossa eikä www-muodossa, niin kuin kuvassa on !! Eli tässä muodossa: https://www.flickr.com/


4.  Sitten vain tallennat ja esikatselet, miellyttääkö some-ikonien järjestys, värit ja paikka sivupalkissa silmääsi. 

Toivottavasti tämä tekniikka toimii teillä! Ja jos ei toimi, ilmoitelkaa ihmeessä asiasta tämän postauksen kommenttiboksiin.

69 kommenttia:

  1. Sitten ne on myös hassussa muodossa :O

    VastaaPoista
  2. Todella selkeä ohje some ikonien tekoon. Mahtavaa, kuinka nopeasti sait toteutettua tämän. Suuret kiitokset! :) Olen pähkäillyt tämän asian kanssa jo niin kauan. Toimii siis mainiosti!

    VastaaPoista
  3. Moi Sara! :)
    Mmm... Tällaisestakaan ongelmasta mulla ei ole kokemusta, mutta katsotaan, josko ongelman saisi pois jollain konstilla! Lähdetään purkamaan ongelmaa kohta kohdalta - varmista siis, että teit kaiken varmasti oikein.

    Some-ikonit latasit PNG-muodossa koneellesi. Ikonit latasit joko Flickriin tai Photobucketiin. Itse käytän Photobucketia, koska mulla on ollut Flickrin kanssa ongelmia gadgetteihin lisättävien linkkien suhteen - kaikilla tätä ongelmaa ei kyllä ole. Jos latasit Photobucketin kautta, kopioitko some-ikonin linkin varmasti Direct-kohdasta (joka on Links to share this photo -palkissa oikealla)? Kun lisäsit gadgetin ja liitit monta samaa koodisarjaa peräjälkeen, erotitko ne kahdella enterin painalluksella? Ethän poistanut koodeista lainausmerkkejä tai muuta vastaavaa?

    Jos teit kaiken oikein ja varmistit sen vielä, homma voi olla mallisidonnaista. Suosittelen siis kokeilemaan, toimiiko Some-ikonit paremmin vaikkapa Simplen valkoisessa mallissa, jota minä käytän. Eri malleissa nimittäin on erilaiset lähdekoodit, jonka vuoksi kaikki koodit eivät toimi eri malleissa. Tämän blogin koodit ovat tehty erityisesti Simplelle ja sen valkoiseen malliin, mutta useimmiten koodit toimivat myös muissakin malleissa lähes moitteettomasti.

    Jos tästä ei ollut mitään apua, ota ihmeessä yhteyttä uudelleen! Yleensä kaikki ongelmat ollaan saatu ratkottua, joten varmasti tämäkin ongelma :-)

    VastaaPoista
  4. Olen ladannut Some-ikonit jostain muusta paikasta. Joskus silloin kuin yritin niitä tehdä, mutten ymmärtänyt yhtään mitään :D. Latasin ne Photobuckettiin. Kopioin ;)..

    VastaaPoista
  5. Olen aivan väärässä postauksessa, mutta tarvitsisin kuitenkin apua. Haluaisin siirtää blogini "blogiarkisto" kohdan bannerin alapuolelle siten, että siitä saisi avattua postaukset, en tiedä ymmärrätkö yhtään mistä puhun. En osaa tehdä tätä itse, mutta toivottavasti saisin vähän apua:)
    http://tarumariaaa.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Moi Taru! Sulla on tosi kiva idea, mutta valitettavasti tää ongelma ei oo aivan yksinkertanen ratkasta. Ryhdyn selvittämään ratkaisua, mutta koulukiireet ja totta kai elämä tietokoneen ulkopuolella imaisevat melkein koko aikani. Katsotaan, josko joskus saan vastauksen ongelmaasi :-)

      Poista
  6. Pitäisikö minun lähettää sinulle sähköpostia ja liittää sinne koodi? :)
    Jos, niin voitko laittaa tähän sähköpostiosoitteesi?

    VastaaPoista
  7. Kuulostaapa oudolta - meinaan siis, että jos kerta olet kaiken oikein tehnyt, niin miksi koodi vihottelee tuolla tavoin... :/ joo no, kokeillaan tuolla konstilla!
    Meilini osoite; iltsudolly@gmail.com

    VastaaPoista
  8. Niinpä... :/ Lähetän sulle säpöä :)

    VastaaPoista
  9. Juu, toivottavasti ongelma korjaantuu nyt :)!

    VastaaPoista
  10. Voisitkohan tehdä postauksen siitä miten gadgetit saisi nostettua bannerin tasolle? hieman samaan tyyliin kuin voitto kotiin blogissa?

    VastaaPoista
    Vastaukset
    1. Tämäkin kommentti hukkui kommenttitulvaan. Oon tosi pahoillani, että näin on päässyt tapahtumaan !! Yritän ottaa itseäni niskasta kiinni ja tarkistaa useammin, olenko vastannut kaikkiin blogin kommentteihin.
      Mutta hei, kiitti ideasta! Laitetaan muistiin ;)

      Poista
  11. Hei, osaisitko sanoa miten blogista saa valkoiset reunat sivuilta pois?
    Niin ettei jäisi ylimääräistä tilaa. --> http://jepatzu.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Tässä tänään julkaisemani postaus aiheesta:
      http://blogikoodeja.blogspot.fi/2014/08/miten-pienennetaan-marginaaleja.html

      Marginaaleista (jos niitä tarkoitit) kysellään jatkuvasti ja paljon, joten päätin toteuttaa niiden pienentämisestä yhden postauksen sen sijaan, että olisin jokaiselle erikseen asiaa neuvonut kommenttiboksiin :-D

      Poista
  12. Kuvat ei näy..mikä mättää?

    piasundell.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Hei Pia :-)! Vastasin sun ongelmaasi jo eilen (tai luulin vastanneeni...), mutta kommentti ei ilmeisesti ikinä lähtenytkään perille asti... :/ Sun blogin lähdekoodia tutkiskellessani huomasin, että sulla on siellä 2 ylimääräistä koodinpätkää some-ikoneille, jotka eivät sisällä kuvan linkkiä eivätkä sitä, mihin ikonia klikkaamalla pääsee. Tänään koodeja ei ollut blogssasi (toivottavasti olen nyt perillä, että olet se henkilö, jonka some-ikonien kuvat eivät näkyneet muina kuin ns. "saksilla leikattuna paperina"). Koska vastauskommenttini ei ilmeisesti koskaan lähtenyt sinulle eikä ikoneja enää ole blogisi sivupalkissa, mun on vaikea lähteä auttamaan sua. Jos oikein muistan, koodit olivat ihan oikein, mutta sulla oli some-ikoni-koodistossa kaksi ylimääräistä some-ikoni-koodia, joissa ei ollut linkkiä kuvaan eikä linkkiä siihen, mihin ikonia klikkaamalla pääsee. Lisäksi kuvat olivat Dropboxin kautta ladattuja, mistä mulla ei ole kokemusta. Suosittelen siis käyttämään Photobucketia. Viidestä koodista kaksi koodia oli siis hyödyttömiä, jotka saattoivat ongelman aiheuttaa.


      Poista
    2. yritin uudestaan ja nyt tulee toi border juttu tohon, oon latanu photobucketista, tarkistanu että kaikki on mukana jne.

      Poista
    3. aaa se <a pitää olla erikseen :)

      Poista
  13. Kiitos! Tästä oli paljon apua ♥

    VastaaPoista
  14. Ei oikein toiminut, laitoin kuvat Photobucketiin ja sitten laitoin kolme someikonia ja ei tullu kuvia? :/ Aina vaikeaa nämä :D

    VastaaPoista
    Vastaukset
    1. Sainpas! Mutta onko niitä mahdollista saada keskitettyä tai jotain?

      Poista
    2. Tosi hyvä, että sait kuin saitkin some-ikonit toimimaan! Kyllä ne mun mielestä voi keskittää, mutta sataprosenttisen varma mä en oo tästä mun tavasta keskittää ne XD. Mutta siis kokeilin äsken lisätä kyseisen JavaScript-laatikon (siis sen, jossa on kaikkien some-ikonien koodit) alkuun ja loppuun < center > niin pitäis toimia! Eli ennen kaikkia some-ikonien koodeja yksi < center > ja kaikkien some-ikoni-koodien jälkeen yksi < center >. Mutta ilman noita välilyöntejä eli siis yhteen noi kaiki <-merkit jne., tää ei vaan suostu julkasemaan tätä kommenttia sillä tavalla, että olisin kirjoittanut noi kaikki merkit yhteen.

      Poista
  15. Mulla tuli kuvat mutta ei jonkun ihmeen takia ei linkit toimi :o ei siis siirry halutulle sivustolle! Kiitos paljon jos pystyisit auttamaan munki ongelmassa :) Ja latasin kuvat muuten tinypicin kautta, voikohan ongelma olla siinä?

    http://lifespill.blogspot.fi/p/elaimet.html

    VastaaPoista
    Vastaukset
    1. Heippa Sara! Taisit poistaa blogisi, sillä tuo linkki ei sinne enää vie. No, toivottavasti tästä olis hyötyä jollekin toiselle, joka kamppailee saman asian kanssa!
      Kannattaa aina varmistaa, että koodi on tismalleen oikein kopioitu. Tämä saattaa tuntua hassulta, mutta kokemuksesta voin sanoa, että mulla oli alkuaikoina ongelmia juuri tämän asian suhteen. Tarkista siis, että koodi on kopioitu kokonaisuudessaan blogiisi.
      Ongelma tuskin on tinypicissä itsessään, jos kuvat kerta näkyvät, mutteivät linkit toimi. Mä en ole tinypiciä kuitenkaan koskaan käyttänyt, joten en tiedä siitä paljoa - siksi suosittelen aina kuvaongelmista tällaisissa koodeissa kärsiville photobucketia, koska se on mulle tutumpi paikka.
      Oletko varma, että laitoit linkit oikeille kohdilleen etkä poistanut vahingossa mitään merkkiä? Tää on meinaan hyvin tarkkaa puuhaa. Jos koodista puuttuu yksikin merkki (esim: >-merkki), ei koko koodi välttämättä toimi - mutta poikkeuksia tosin löytyy!
      Muista myös, että linkin, jonka avulla halutulle sivustolle pääsee kuvaa klikkaamalla, tulee olla http-muodossa. Ei siis esim. www.google.fi vaan https://www.google.fi/.
      Jos muille tällaisia ongelmia tulee, linkittäkää aina bloginne. Mun on helppo etsiä blogiin lisätty koodi bloginne lähdekoodista ja katsoa, onko siinä virheitä verrattuna alkuperäiseen koodiin, joka löytyy tästäkin postauksesta. Lähdekoodin avulla olen ratkonnut monia ongelmia juuri tällaisissa pulmissa, joten se on aika varma vaihtoehto, jos ongelmia ilmenee.

      Poista
  16. Heips! Minä laitoin useamman somenapin vierekkäin ja kaikki paitsi Google+ toimivat oikein. Johtuisiko se siitä, että kirjaudun blogiini gmail-osoitteella, jossa on nimeni (ja on siis blogin oletusmeiliosoite, mutta salainen) Haluan linkin kuitenkin vievän blogin gmail-osoitteeseen, (jossa ei siis omaa nimeäni). En edes tarvitse tuota oman nimeni google+:ssaa, auttaisiko se jos poistan sen?

    VastaaPoista
    Vastaukset
    1. Moikka! Kyse ei taida olla kuvailemastasi ongelman mahdollisesta syystä, vaan ns. "sähköpostin väärästä linkittämisestä". Sain vasta nyt tietää, että sähköpostin kanssa some ikonit toimivat eri tavalla - koodia pitää siis hieman muuttaa. Tämän vinkin löysin täältä: http://www.lillivoitto.fi/2013/12/luukku-11-someikonit-blogiin.html.
      Bloggerin kommentointityökalu ei hyväksy sisälleen HTML/JavaScript-muotoisia koodeja, joten en tähän voi nyt laittaa kokonaista "valmista" koodia, jolta sähköpostikuvakkeen koodin pitää näyttää. Mutta siihen ekojen "-merkkien sisäpuolelle (johon kuuluisi laittaa se www-osoite, johon someikonia klikkaamalla pääsee) pitää laittaa seuraava tekstinpätkä: mailto:tähänsähköpostiosoitteesi

      Ilmoittelethan, jos ongelmia ilmenee yhä! :)

      Poista
    2. Kiitos kun jaksoit paneutua..mutta en ehkä selittänyt tarpeeksi tarkoin tuota ongelmaa. Sähköpostiosoitekuvakkeeni toimii oikein,, mutta siis Google+ ei! Voit vaikka testata blogistani:http://matkantekijana.blogspot.fi/
      Tuo g-mail-tili jolla olen luonut blogini, on omalla nimellä, enkä haluaisi sen näkyvän siis blogissa. Siksi loin blogille oman g-mail-tilin, ja sille google+:ssan. Hankalaa, mutta näyttää siltä etten saa tuonne google+-somenapin alle oikeaa linkkiä! :D

      Poista
  17. Kiitos ohjeesta, hyvin toimii :)

    VastaaPoista
  18. Apua! Linkit toimii, mutta kuvat ei :( Latasin kaikki kuvat ensin flickr:stä, mutta kun ei toiminut niin kokeilin ensimmäistä kuvaa sitten photobucketin kautta eikä sekään auttanut. Huomaatko mikä olisi vialla? http://dachshund-smile.blogspot.fi

    VastaaPoista
  19. Sain toimimaan! Olinkin kopioinut kuvan linkin osoitteen enkä kuvan URL osoitetta! Mutta kiitos selkeistä ja hyvistä ohjeista! :)

    VastaaPoista
  20. Hei taas! Näyttää siltä että vihdoin sain google+:n toimimaan...kiitos sinulle ja hyvää uutta vuotta!

    VastaaPoista
    Vastaukset
    1. Okei, hyvä homma! Haha, ymmärrys taisi olla minun puolellani lentämässä jossain kaukana avaruudessa - taisin tajuta ongelmasi "pikkuisen" väärin :_D Hyvää uutta vuotta sinullekin!

      Poista
  21. poista sieltä koodin lopusta vaan se kohta, mikä tulee tekstinä siihen! en osaa kunnolla selittää mutta siis sen border=´0"/> vedät vaan pois siitä koodin lopusta :)

    VastaaPoista
  22. Kiitti vinkistä! Laitan jutun kännykän muistiin ja toteuttelen ohjeita sitten kun ehdin. :)

    VastaaPoista
  23. Tästä oli PALJON apua! Kiitos ihan suunnattoman paljon!!
    www.welcome-in-reality.blogspot.fi

    VastaaPoista
  24. Hei! Löysin tämän postauksen ja oli pakko kokeilla! Ongelmana on vaan se, että linkit toimii, mutta kuvat ei näy. :/

    http://sheltt.blogspot.fi/

    VastaaPoista
  25. Kiitos paljon! <3 Meni vähän rutkasti aikaa,mutta se oli sen arvoista =) hyvää kesän odotusta Ilona!

    VastaaPoista
    Vastaukset
    1. Kiva, että sait toimimaan! Ja hyvää kesää sinullekin Laura :)

      Poista
  26. kiitos selkeistä ja toimivista ohjeista! mää otin siitä koodista sen viimesen ikonin osoitteen perään tulevan jutun pois kun siihen väliin tuli ylimääräistä tekstiä ja nyt toimii sitten oikein :)

    VastaaPoista
  27. Hei!

    Kokeilin laittaa some-ikineita ja ne tulivat, mutta kun painan niitä (kaikkia muita paitsi youtubea) niin se menee blogiini ja ilmoittaa että sivua ei olemassa. Mitä teen? Liittyykö ongelma siihen että minulla ei ole Simple-pohjaa vaan Ethereal?

    riinahilmaerikaaa.blogspot.fi

    VastaaPoista
  28. Sainkin ratkaistua itse! Kiitos kuitenkin hyvästä ohjeesta!

    riinahilmaerikaaa.blogspot.fi

    VastaaPoista
  29. Miten flickristä saa sen koodin? :)

    VastaaPoista
  30. Taisiis kun mulla on vain flickr ja siirsin ton ohjeen mukaan ne kuvat sinne jne. mutta en tiedä miten saisin flickristä sen koodin minkä kopioin sinne html?

    VastaaPoista
    Vastaukset
    1. tietääkseni flickristä ei saa sitä koodia millään :/

      Poista
  31. Kiitos! Tämä oli ensimmäinen ohje, jonka tällainen aloittelija ymmärsi ja jolla vieläpä onnistuin. :)

    VastaaPoista
  32. Oisko mitään koodia millä voisi keskittää nuo ikonit sivupalkissa? Kun minulla itsellä on niitä vain kaksi, ja se omaan silmään näyttää hassulta kun ne ovat vasemmassa laidassa.
    Blogini: anskieveliina.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Juu on! Se tapahtuu niin, että laitat koodin alkuun < center > (ilman välilyöntejä) ja loppuun sama. Tältä siis pitäisi näyttää

      < center >
      koodi1
      koodi2
      < center >

      Poista
  33. saisko noihin ikoneihin hiukan väliä jollain tavalla, ettei ne olisi ihan kiinni toisissaan? :)
    https://lotta-horselifestyle.blospot.fi

    VastaaPoista
    Vastaukset
    1. Saa, mutta se on tosi monimutkainen juttu! Sun pitää ekanakin nimetä koko gadgetti tämän postauksen tapaan: http://blogikoodeja.blogspot.fi/2015/06/mouseover-efekteja-some-ikoneihin.html

      ja sitten lisätä CSS:ään tää koodi:
      .someicon{
      padding:2px;
      }

      lukua 2 voi muuttaa :)

      Poista
  34. Moips, onnistuin mukavasti lisäämään hienot ikonit sivuille ja jopa efektejä niihin, kiitos sinun, mutta tulipahan mieleen että saako nuo sivut avautumaan jollain tapaa uudessa välilehdessä? Olisi hienoa kun ei tarvitsisi aina sitten tulla takaisin blogin sivuille kun voisi vaan käväistä esim. siellä youtubekanavalla :D

    VastaaPoista
  35. Kirjoittaja on poistanut tämän kommentin.

    VastaaPoista
  36. Koitin tehdä itse ja kuvista ei tullut muuta kuin nuo rastit... mikä neuvoksi?
    mylifewithhetah.blogspot.fi

    VastaaPoista
  37. Koitin tehdä someikonit itse, mutta ei tullut kuin noi rastikuvat?
    mylifewithhetah.blogspot.fi

    VastaaPoista
  38. heippa! tein tämän ohjeiden mukaan, mutta silti ikonit ovat allekkain eivätkä päällekkäin... mitä tulisi tehdä?

    VastaaPoista
  39. Kiitos aivan sairaasti! Tosi helpot ja selkeet ohjeet! :)

    VastaaPoista
  40. Moikka, kiitos selkeitä ohjeita antavasta blogistasi. Olen lisäämässä some-ikoneita (Instagram, Pinterest, Bloglovin') blogiini ohjeesi mukaan. Ongelma on, etten tiedä mistä löydän koodiin kirjoitettavan www-osoitteen instagram-, pinterest- ja bloglovin-tileilleni?

    VastaaPoista
  41. olen yrittänyt nyt varmaan valehtelematta 100 kertaa laittaa yhden ikonin mun sivulle mutta ei onnistu. Saan sen pelkän ikonin ilman linkkiä, mutta sitten kun yritän saada sitä linkkiä, niin tulee vaan sellainen "virhe" kuva, ymmärrätkö? :D Ärysttävää.. xd

    VastaaPoista
  42. Kiitos ohjeesta, toimii hienosti! :) https://villahohde.blogspot.fi/

    VastaaPoista

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