sunnuntai 21. syyskuuta 2014

Pienet somekuvakkeet blogiin naurettavan helposti

Blogin ulkoasuun saa uutta ilmettä pikkuruisilla kuvakkeilla, joita klikkaamalla lukija pääsee vaikkapa blogin Facebook-sivulle, Instagramiin, YouTubeen tai muihin somekanaviin, tai vaikka lähettämään mailia bloggarille. Tänään lisäämme siis blogiin nämä kuvakkeet, joita ikoneiksikin kutsutaan, ja sehän vasta helppoa onkin.

Kuvakkeet ovat yleensä neliön mallisia ja niissä on kirjain tai logo kertomassa siitä, mitä kuvaketta klikkaamalla tapahtuu. Kuvakkeita saa tosiaan netistä ihan ilmaiseksi ja valikoima on lähes ääretön. Alla olevassa kuvassa näkyy ylärivissä kuvakkeet ja alla hieman isommat ja itsetehdyt seurantapainikkeet.


Toisin kuin kuvassa, voit yksinkertaistaa blogisi ulkoasun käyttämällä pelkkiä kuvakkeita ja tuollaiset isommat nappulat voit heittää hiivattiin (niiden seurantapainikkeiden ohje on täällä).

Mistä kuvakkeita sitten löytyy? Netti on pullollaan ihan ilmaiseksi hyödynnettäviä kuvakkeita. Löydät niitä esimerkiki googlaamalla free social media icons. Lataat yleensä zip-tiedoston koneellesi ja purkaessasi sen saat kuvat yksitellen valitsemaasi kansioon.

Voit totta kai itsekin askarrella kuvakkeet vaikkapa Picmonkeylla. Teet niistä vain kaikista samankokoisia pikku neliöitä (esim. 50x50) ja apuna voit käyttää edellä mainittua painikeohjetta. Itse tekeminen on ihan hyvä vaihtoehto, koska ulkomaisista seteistä ei löydy esimerkiksi sitä tuttua ja turvallista blogilistaa.

Itseä miellyttävien kuvakkeiden valitseminen tai itse suunnittelu on se aikaa vievin osuus. Kaikki muu on hyvin helppoa. Sitten kun sinulla on nämä kuvakkeet valittuna tai tehtynä, tallenna ne koneellesi ja varsinainen asennus voi alkaa. Seuraavaa ohjetta seuraamalla blogiasi koristaa kivat kuvakkeet alta aikasyksikön:

1. Lataa koneellesi tallentamasi kuvakkeet johonkin netin kuvapalveluun, kuten esimerkiksi Photobuckettiin. Tarvitset kuvakkeille suoran osoitteen eli URL:in, joka Photobucketissa on nimellä direct. Kuvan osoitteen tulee siis alkaa http:// eikä millään koodin tunnuksella, kuten <.

2. Kun kuvat on ladattu nettiin, siirry Bloggerissa Ulkoasuun ja lisää sivupalkkiin uusi gadget. Valitse gadgeteista HTML/JavaScript.

3. Lisää avautuvaan gadgetin ikkunaan ensinnäkin otsikko, jos sellaisen haluat antaa, tai jätä otsikko suosiolla tyhjäksi. Varsinaiseen ikkunan sisältökenttään laita seuraava koodi:

<a href="http://www.haluamasiosoite.com" target="_blank" ><img src="http://www.kuvansuoralinkki.com" height="50" width="50" /></a>


Koodissa on kaksi osoitepaikkaa, jotka sinun tulee täyttää oikeilla osoitteilla. Jos laitat ensimmäisenä esimerkiksi Facebookin kuvakkeen, laitat ensimmäiseen osoittepaikkaan (haluamasiosoite.com) blogisi Facebook-sivun osoite. Toisen osoitepaikkaan (kuvansuoralinkki.com) laitat Facebookin kuvakkeen suoran linkin sieltä kuvapalvelusta, jonne olet kuvakkeesi ladannut (esim. Photobucket. Huomaa, että osoitteissa on oltava "-merkit molemmin puolin ja tietenkin http://-alku.

4. Muuta kuvakkeen kokoa halutessasi muokkaamalla height ja width -kohtien lukuja.

5. Laittaaksesi seuraavan kuvakkeen kopioi koodi uudestaan ja laita se edellisen koodin perään. Muuta osoitteet oikeiksi.

6. Sähköpostikuvakkeen kohdalla sinulla ei ole varmaankaan mitään nettiosoitetta, jonka antaa. Siispä laitat ensimmäiseen osoitekohtaan seuraavan pätkän:

mailto:sinunblogi@osoite.com

Senkin on tultava "-merkkien sisään, niin kuin nettiosoitteenkin.

7. Kuvakkeet jakautuvat automaattisesti toiselle riville, kun yhdelle riville ei enää mahdu. Muista, että voit muuttaa niiden kokoa heightin ja widthin lukuja muuttamalla.

8. Kun kaikki haluamasi kuvakkeet ovat laitettu gadgettiin, tallenna gadgetti, vetäise se haluamaasi kohtaan ja tallenna asettelu koko ulkoasusta. Ihastele tuloksia!


Tämä on yllättävän helppo operaatio, kun valinnanvaikeuden yli pääsee. Taidanpa itsekin askarrella nämä blogiini joku päivä. Tämä oli myös paljon toivottu ohje, joten toivottavasti siitä oli iloa mahdollisimman monelle.

24 kommenttia:

  1. Huippua, kiitos! Juuri tämmöiset on ollut tarkoitus tehdä, mutta en ole jaksanut etsiä netistä ohjeita :)

    VastaaPoista
    Vastaukset
    1. Ohjeita ei löydy jostain syystä helpolla, vaikka helppo juttu muuten oli.

      Poista
  2. Olen koodaillut vaikka ja mitä, mutta tämä ei ota onnistuakseen... Ei tule kuvaketta vaikka Photobuketin kautta lataan kuvat. Murinaa... :D Jatkan yrittämistä.

    VastaaPoista
    Vastaukset
    1. No voi höh. Oletko kokeillut jpg:n ja png:n molemmat?

      Poista
  3. Tosi kiva blogi! Tykkään lukea blogiasi, vaikka en itse blogia kirjoitakaan. Teksti on ilmeikästä ja kivaa lukea!:)

    VastaaPoista
    Vastaukset
    1. Kiitoksia! Ohjeitakin jaksaa lukea, kun ei kirjoita niin kuivasti :)

      Poista
  4. Kiitos paljon kaivatusta ohjeesta! Yhtä asiaa en kuitenkaan saa onnistumaan. Kuvien kohdalle jää vain pieni rasti vaikka Photobucketin kautta lataan. Mistä mahtaa johtua? :)

    VastaaPoista
    Vastaukset
    1. Onko sinulla jpg vain png? Minulla oli png testissä ja hyvin toimi. Voi johtua tästä, jos muuten olet tarkasti ohjeen mukaan tehnyt.

      Poista
    2. Png:llä sain toimimaan! Kiitos vinkistä :)

      Poista
  5. Moikka! Mulla on kysymys ja ei liity tähän aiheeseen, mutta toivottavasti saisin vastauksen! Miten banneriin saa blogin linkin? (eli banneria painamalla pääsee blogin ''etusivulle'') Oon jo miltei ikuisuuden miettiny ja yrittäny keksiä että miten sen siihen sais ...:D

    VastaaPoista
    Vastaukset
    1. Moikka! Kun lataat bannerin kuvan paikalleen, niin valitse "otsikon ja kuvauksen tilalla" siinä "mainospaikka" kohdassa. Silloin linkin pitäisi olla automaattinen. Ainakin ennen toimi juuri näin.

      Poista
  6. Mä en photobucketissa löydä millään sitä "direct"-kohtaa, mistäköhän johtuu?

    VastaaPoista
  7. oho kyllä mä sen nyt löysinkin! :-)

    VastaaPoista
  8. Hei en löydä direct kohtaa mistään? Voisitko auttaa? :)

    VastaaPoista
    Vastaukset
    1. Minulla se ainakin näkyy oikeassa laidassa "share links" -otsikon alla. Siis silloin, kun olen klikannut haluamaani kuvaa.

      Poista
  9. Kiitos! Jopa meikälästumpelo sai nämä onnistumaan! :D

    VastaaPoista
  10. Hei! Osaatko sanoa mitä koodinpätkää tulee käyttää, jos lataa noi kuvakkeet flickrin kautta?

    VastaaPoista
    Vastaukset
    1. En ole Flickriä käyttänyt mutta kaiken järjen mukaan koodi on sama mutta otat Flickeristä sitten sen kuvan http://-alkuisen osoitteen. Koodi itsessään ei muutu, ja vaikka tässä on Photobucket esimerkkinä niin se ei ole ohje vain Photobukcetille. Toivottavasti toimii!

      Poista
  11. Hei haluisin saada noi kuvakkeet silleen jokaisen postauksen perään, osaisitko auttaa?

    http://sofiaelizabetha.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. En tähän hätään. Paljon pyydetty aihe ja laitan postauksen, kun sopiva ohje löytyy :)

      Poista