Hvordan lage egen Bloglovin'-widget

Bloglovin' er en super nettside der du kan følge blogger og få alles oppdateringer på ett sted. De som står bak siden har laget widgets som hver enkelt kan ha på sin blogg som leseren kan trykke på og dermed komme til bloglovin'-siden til bloggen.

MEN så fins det jo sånne sære sjeler (eksempel: undertegnede) som gjerne vil ha noe EGET - jeg anser bloggen som min og prøver å lage så mye som mulig selv av design og lignende, bloglovin'-widget medregnet. Derfor ville jeg lage en liten "tutorial" der jeg viser hvordan man - veldig enkelt - kan lage en slik widget:

STEG 1 - HTML-kode

Gå inn på bloglovin's widgetside og trykk "Velg dette ikonet!" - det har ikke noe å si hvilket.





Kopier HTML-koden (du får naturligvis en annen kode, dette er min).


STEG 2 - Design > Rediger > Widgets

Innlogget på bloggen din, følger du "veibeskrivelsen" over til du finner widgets-redigeringen som ser slik ut:


Her er Bloglovin'-koden allerede limt inn, så nå kommer vi til endringen av selve widgeten!


STEG 3 - Widget-bilde

Jeg har på forhånd laget et veldig enkelt bilde i PhotoScape som stemmer sånn noenlunde overens med bloggdesignet mitt som jeg vil ha som widget:

For å få en URL-adresse til dette bildet, må jeg laste det opp et eller annet sted. Jeg bruker Photobucket, men nå som jeg laster opp bildet her på bloggen, kan jeg bruke denne bildeadressen: http://bloggfiler.no/juliebettina.blogg.no/images/245985-11-1317130894504.jpg

Andre måter å gjøre det på er via f.eks. TinyPic, eller om bildet man vil ha faktisk er på nettet fra før og dermed har en bildeadresse (fremgangsmåte: høyreklikk bildet på nettsiden og trykk "Kopier bildeadresse")


STEG 4 - URL inn i HTML-kode

Nå har vi en URL (http://bloggfiler.no/juliebettina.blogg.no/images/245985-11-1317130894504.jpg), så det som gjenstår er å sette adressen inn på riktig sted i HTML-koden. Da må vi tilbake til widget-redigeringen på blogg.no:



og finne det man skal bytte ut med bildeadressen vi fant over. Det markeres med src= (står for "source", kilde) og er markert her:
Det du skal gjøre er å fjerne alt som står mellom de to hermetegnene (alt fra http til .gif) og lime inn bildeadressen (i mitt tilfelle http://bloggfiler.no/juliebettina.blogg.no/images/245985-11-1317130894504.jpg):

DA er det bare å trykke "Lagre widgets", så har du en fiks ferdig ny og egen Bloglovin'-widget på bloggen din!

Resultatet på bloggen min:



Håper det ikke virker som om jeg tror dere er helt retarded, men enkelte har veldig bra peiling på HTML og design generelt, og så fins sånne som meg som trenger rimelig forenklet og detaljert forklaring på ting. Håper det i alle fall er noen som synes dette var nyttig, da! :-)

Én kommentar

karoline

29.09.2011 kl.12:22

aah ! dette har jeg lurt på en stund :-D fin guide som absolutt skal brukes en dag jeg har tid :-D

Skriv en ny kommentar

hits