lørdag 6. april 2013

Hvordan legge til ikoner til sosiale medier i Blogger



Jeg innser at jeg har vært litt treig av meg. Jeg har ikke funnet ut hvordan man fikser sånne halv-fancy ikoner til sosiale medier før nå :-P







Hvis det finnes flere uvitende der ute, så følger en enkel (og kanskje i overkant detaljert) oppskrift her:

1) Først må du finne et sett med knapper du liker. 
Det finnes tusenvis av design der ute, bare google "social media icons". Mange er gratis, mens noen koster en sliten slant. Bruk god tid på å finne noen du liker og som, ikke minst, inneholder de ikonene du trenger (f.eks Etzy, Google+, Twitter, Pinterest, Instagram). Jeg liker disse godt; de er gratis og finnes i en haug med forskjellige farger. Du kan selvsagt lage ikonene selv også, i word, paint eller i mer avanserte tegneprogram.

2) Last ned ikonene.
De befinner seg som regel i en zip-fil. Last den ned, pakk den ut og lagre ikonene på et sted hvor du enkelt finner dem igjen.

3) Lag deg en konto hos f.eks Photobucket
Hvert ikon trenger en nettadresse, og dette hjelper Photobucket til med. Lag deg en gratis konto og last opp de ikonene du har lyst til å bruke.

4) Deretter må det kodes litt i html
Det kan være like greit å copy paste følgende inn i et word-dokument for å minske rot og kluss. Du må kopiere teksten for hvert enkelt ikon du ønsker.

<a href="AdresseTilWebSiden"target=”_blank”><img alt="NavnPåIkonet" src="BildeLinkenFraPhotobucket" /></a>

AdressenTilWebsiden Dette er URL'en som du ønsker at ikonet skal peke til. F.eks til Pinterest-kontoen din. I mitt tilfelle blir det: http://pinterest.com/frkknapp/

NavnPåIkonet Dersom noen setter musepekeren oppå ikonet, så er det dette navnet som dukker opp. Her kan man f.eks skrive: "Twitter" eller "Følg meg på Facebook".

BildeLinkenFraPhotobucket Dette er linken til ikonet hentet fra Photobucket. Se utsnitt av skjermbildet under:















Husk å beholde anførselstegnene. Her er et eksempel på hvordan ikonet til Pinterest-kontoen min er laget:

<a href="http://pinterest.com/frkknapp/"target=”_blank”><img alt="Pinterest" src=" http://i1278.photobucket.com/albums/y515/kaja-82/Pinterest_zps55f8d62c.png" /></a>

5) Kopier html-teksten inn i bloggen.
Gå til:
- utforming
- legg til gadget
- velg HTML/JavaScript

Kopier html-teksten fra word for alle ikonene og lim dem inn i HTML/JavaScript-gadget'en, lagre og plasser den der du ønsker i bloggen.

Her er ikonene jeg lagde til Miljøvink-bloggen:


Og til frk.Knapp:














Det kan virke litt klønete med det samme, men prosessen er egentlig ganske enkel :-)

Reactions:

11 kommentarer:

  1. I just added my buttons about a week ago - at first I was terrified, but after I was done I could have changed them again in no time
    :)

    SvarSlett
    Svar
    1. It was you that gave me the inspiration actually :) But yeah, it's actually really easy once you've done it.

      Slett
  2. SÅ BRA med oppskrift til pinterest! Tror jeg må legge denne i bokmerkene mine hvis folk spørr hvordan jeg fikk det til når jeg gjorde det for en stund tilbake:O). Jeg fikk god hjelp fra en annen blogger. Hadde ikke klart det ellers tror jeg, haha, men var så STOLT(!) når jeg fikk det til:O).

    Så morro du er med på min første giveaway og takk for linking på bloggen din. Veldig stas:O)!

    Ha en fin fredag:O) KLem fra Neri :O)

    SvarSlett
  3. Tusen hjertelig takk!! Dette hjalp VELDIG!

    SvarSlett
  4. Hei Frk K - Tuuusen takk for hjelpen:)

    SvarSlett
  5. Tusen hjertelig takk for tips og ikke minst hjelp..... Eter mye knoting på egenhånd, fikk jeg gull hjelp fra deg :)

    Klem Mia

    SvarSlett
    Svar
    1. Så bra! :-) Hyggelig at det var til hjelp. Kari :-)

      Slett
  6. Jeg får ikodene veldig store på min blogg, hvordan endre man det?

    SvarSlett

Blir alltid glad for kommentarer! :-)

(har du ikke egen blogg, velg anonym)

Følgere