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:
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.
Sitten ne on myös hassussa muodossa :O
VastaaPoistaTodella 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!
VastaaPoistaIhana kuulla tämä! :)
PoistaMoi Sara! :)
VastaaPoistaMmm... 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 :-)
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 ;)..
VastaaPoistaOlen 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:)
VastaaPoistahttp://tarumariaaa.blogspot.fi/
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 :-)
PoistaOi kiitos:)
PoistaPitäisikö minun lähettää sinulle sähköpostia ja liittää sinne koodi? :)
VastaaPoistaJos, niin voitko laittaa tähän sähköpostiosoitteesi?
Kuulostaapa oudolta - meinaan siis, että jos kerta olet kaiken oikein tehnyt, niin miksi koodi vihottelee tuolla tavoin... :/ joo no, kokeillaan tuolla konstilla!
VastaaPoistaMeilini osoite; iltsudolly@gmail.com
Niinpä... :/ Lähetän sulle säpöä :)
VastaaPoistaJuu, toivottavasti ongelma korjaantuu nyt :)!
VastaaPoistaVoisitkohan tehdä postauksen siitä miten gadgetit saisi nostettua bannerin tasolle? hieman samaan tyyliin kuin voitto kotiin blogissa?
VastaaPoistaTä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.
PoistaMutta hei, kiitti ideasta! Laitetaan muistiin ;)
Hei, osaisitko sanoa miten blogista saa valkoiset reunat sivuilta pois?
VastaaPoistaNiin ettei jäisi ylimääräistä tilaa. --> http://jepatzu.blogspot.fi/
Tässä tänään julkaisemani postaus aiheesta:
Poistahttp://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
Kuvat ei näy..mikä mättää?
VastaaPoistapiasundell.blogspot.fi
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.
Poistayritin uudestaan ja nyt tulee toi border juttu tohon, oon latanu photobucketista, tarkistanu että kaikki on mukana jne.
Poistaaaa se <a pitää olla erikseen :)
Poistaei, nyt ei toiminukkaan :/
PoistaKiitos! Tästä oli paljon apua ♥
VastaaPoistaKiva kuulla!:)
PoistaEi oikein toiminut, laitoin kuvat Photobucketiin ja sitten laitoin kolme someikonia ja ei tullu kuvia? :/ Aina vaikeaa nämä :D
VastaaPoistaSainpas! Mutta onko niitä mahdollista saada keskitettyä tai jotain?
PoistaTosi 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.
PoistaMulla 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ä?
VastaaPoistahttp://lifespill.blogspot.fi/p/elaimet.html
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!
PoistaKannattaa 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.
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?
VastaaPoistaMoikka! 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.
PoistaBloggerin 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ä! :)
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/
PoistaTuo 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
Kiitos ohjeesta, hyvin toimii :)
VastaaPoistaApua! 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
VastaaPoistaSain toimimaan! Olinkin kopioinut kuvan linkin osoitteen enkä kuvan URL osoitetta! Mutta kiitos selkeistä ja hyvistä ohjeista! :)
VastaaPoistaOk, hieno homma & kiitos :-)
PoistaHei taas! Näyttää siltä että vihdoin sain google+:n toimimaan...kiitos sinulle ja hyvää uutta vuotta!
VastaaPoistaOkei, 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!
Poistapoista 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 :)
VastaaPoistaKiitti vinkistä! Laitan jutun kännykän muistiin ja toteuttelen ohjeita sitten kun ehdin. :)
VastaaPoistaTästä oli PALJON apua! Kiitos ihan suunnattoman paljon!!
VastaaPoistawww.welcome-in-reality.blogspot.fi
Kiva kuulla ! :)
PoistaHei! Löysin tämän postauksen ja oli pakko kokeilla! Ongelmana on vaan se, että linkit toimii, mutta kuvat ei näy. :/
VastaaPoistahttp://sheltt.blogspot.fi/
Saimpas ne sittenkin näkymään kun oti mukaan myös tuon http://
PoistaLoistavaa! :)
PoistaKiitos paljon! <3 Meni vähän rutkasti aikaa,mutta se oli sen arvoista =) hyvää kesän odotusta Ilona!
VastaaPoistaKiva, että sait toimimaan! Ja hyvää kesää sinullekin Laura :)
Poistakiitos 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 :)
VastaaPoistaHienoa, että sait asian itse ratkaistua :)!
PoistaHei!
VastaaPoistaKokeilin 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
Sainkin ratkaistua itse! Kiitos kuitenkin hyvästä ohjeesta!
VastaaPoistariinahilmaerikaaa.blogspot.fi
Hyvä juttu & Kiitos!
PoistaMiten flickristä saa sen koodin? :)
VastaaPoistaTaisiis 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?
VastaaPoistatietääkseni flickristä ei saa sitä koodia millään :/
PoistaKiitos! Tämä oli ensimmäinen ohje, jonka tällainen aloittelija ymmärsi ja jolla vieläpä onnistuin. :)
VastaaPoistaVoi miten kiva kuulla! :)
PoistaOisko 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.
VastaaPoistaBlogini: anskieveliina.blogspot.fi
Juu on! Se tapahtuu niin, että laitat koodin alkuun < center > (ilman välilyöntejä) ja loppuun sama. Tältä siis pitäisi näyttää
Poista< center >
koodi1
koodi2
< center >
saisko noihin ikoneihin hiukan väliä jollain tavalla, ettei ne olisi ihan kiinni toisissaan? :)
VastaaPoistahttps://lotta-horselifestyle.blospot.fi
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
Poistaja sitten lisätä CSS:ään tää koodi:
.someicon{
padding:2px;
}
lukua 2 voi muuttaa :)
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
VastaaPoistaKirjoittaja on poistanut tämän kommentin.
VastaaPoistaKoitin tehdä itse ja kuvista ei tullut muuta kuin nuo rastit... mikä neuvoksi?
VastaaPoistamylifewithhetah.blogspot.fi
Koitin tehdä someikonit itse, mutta ei tullut kuin noi rastikuvat?
VastaaPoistamylifewithhetah.blogspot.fi
heippa! tein tämän ohjeiden mukaan, mutta silti ikonit ovat allekkain eivätkä päällekkäin... mitä tulisi tehdä?
VastaaPoistaKiitos aivan sairaasti! Tosi helpot ja selkeet ohjeet! :)
VastaaPoistaMoikka, 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?
VastaaPoistaolen 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
VastaaPoistaKiitos ohjeesta, toimii hienosti! :) https://villahohde.blogspot.fi/
VastaaPoista