Sådan sætter du smukke ikoner med links til sociale medier på din blog (blogspot)

Dette indlæg er ikke madrelateret. Men alligevel ret relevant, hvis du har en eller anden form for blog.
Jeg brugte ret lang tid på at finde ud af dette selv, så jeg tænkte at der var andre der kunne få glæde af en fremgangsmåde.

Jeg har længe gerne ville have nogle lidt smartere "følg mig" knapper. Og der ligger faktisk utrolig mange smukke og gratis løsninger derude på nettet. Se bare nedenstående eksempler:

Men da jeg skulle finde ud af hvordan de skulle sættes ind i koden, blev det straks lidt værre... Så her kommer en guide for dummies!

Guide til sociale medier knapper på din blog

1. Først går du på nettet og finder de ikoner du synes passer til din blog (se for eksempel disse social media buttons her.) Her er det lidt vigtigt at du lige vurdere hvor store de skal være... Nogen kommer i forskellige størrelser, andre gør ikke (jeg mener at mine er 50x50). Download den ønskede type, og gem dem på din computer.
2. Nu skal vi have oploaded billederne til blogger. Opret en ny kladde og kald den ikoner (eller hvad du lyster). opload billederne som du gør normalt. Når de er oploaded, højreklikker du på hver enkelt og går ned i "properties". Her finder du "Adress URL" som du kopierer, og gemmer i et tomt word dokument. Dette er stien til dit billede - altså der hvor blogger skal kunne finde billedet når du sætter det ind i din kode. Dette gør du for hvert enkelt billede, samtidig med at du noterer hvilket billede det er (f. eks. facebook billede: og så din URL her). Gem kladden og gå ud af den.
3. Gå ind i "Layout" i blogger og vælg "Tilføj en Gadget". Vælg den der hedder "HTML/Javascript").
4. Det er her koden skal stå. Nedenfor har jeg kopieret min kode ind præcis som den står i min gadget:

<div style="text-align:center;"><a href="http://twitter.com/foodmad"><img title="Tweet Me @foodMAD!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EKRZ1E81T1HPWq_dbVaF-Y3MuoAVJx2h0QTe_l1h-UBnozyQh9gEE5kkspoyII0EL8hnKGEPS88EwOL8wZe_LFnjHvp-HITZB51GbIoXRHpDUQuI2UQBtDkQpb0Uj-WZm1SH4LkDQ_Of/h120/Sketch-twitter.png" /></a><a

href="http://www.facebook.com/home.php#!/Foodmad"><img title="Find mig på Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipRXI54uyuNhiu18wpSibG17Dd6DK0OFEeLt0dhKrxgla4fV2eRkSi-z4M_x20DskhVmhzF0YO9BGcsq8jKce8Ez7J1wgRtHFU80Hy35_QZsASnxE-GmNZM6621EYcGytpsglzz4RguhPx/h120/Sketch-facebook.png" /></a><a

href="http://food-mad.blogspot.com/feeds/posts/default?alt=rss"><img title="RSS-feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV4qT1SuJ_fv8Oklpqs1RecuBQQJgPPoPM7cUkKvLtujaUn4RVivC-Z20MsOiY2zYzI2QVNXGvnapjjn7v-w2SqBeKp7q6HVaNR3oABXPOK_xv7B-pjuNIGWvV9lwclIOiOH_sYqCb-pxT/h120/Sketch-RSS.png" /><a

href="https://plus.google.com/#109491879337853350788/posts"><img title="Find mig på Google+" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6FTXoifqKvnzZxoG0IeCYeglKAhfUm9h4-Kpw8sTDf6wRfg6aZ8u2FgQLzGlOmJU0YWwOzh1HbtsK0f-FofYEPVpNmdm8vwGU6K3gMB7y8el2Y6xPKj6I3K1jydBTftQn28l0eqi__DR1/h120/Sketch-google+.png" /><a  href="mailto:heidisandarek@gmail.com"><img title="Kontakt mig" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv973SVPUJpk0WBTEajMyT57qxg9K2BG80WiqG4Ksarxkmo89Nx3VynbJ8GXi200nQxMksdJFixWVyAlW38I2nT4aWER209MYvr-rJaN5-bp96dqKzD0p8mSUGZcGRcvY82lkU_VUUmh1a/h120/Sketch-email.png" /a /></a></a

href="https:></a

href="http:></div>

• Det er dette du skal ændre i hver linie. Det der er markeret med gult er mine links til twitter. Først har jeg fundet et link til min twitter konto (gå ind på din twitter konto og kopier din URL (der hvor du skriver dine internet adresser)). Indsæt den i stedet for min imellem de to "":<div style="text-align:center;"><a href= "http://din_twittter_adresse_her.com". Nu skal vi have linket til billedet, så nu skal du finde den URL du har kopieret ind i dit word, som hører til twitter. Kopier den ind mellem de to "" sådan her: <div style="text-align:center;"><a href="http://din_twittter_adresse_her.com"Tweet Me @foodMAD!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EKRZ1E81T1HPWq_dbVaF-Y3MuoAVJx2h0QTe_l1h-UBnozyQh9gEE5kkspoyII0EL8hnKGEPS88EwOL8wZe_LFnjHvp-HITZB51GbIoXRHpDUQuI2UQBtDkQpb0Uj-WZm1SH4LkDQ_Of/h120/Sketch-twitter.png" /></a><a Som det sidste kan du ændre den tekst der fremkommer når man holder musen henover ikonet. Her har jeg skrevet "Tweet Me @foodMAD", men du kan ændre den til hvad du har lyst til: <div style="text-align:center;"><a href="http://din_twittter_adresse_her.com"Tweet Me @foodMAD!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EKRZ1E81T1HPWq_dbVaF-Y3MuoAVJx2h0QTe_l1h-UBnozyQh9gEE5kkspoyII0EL8hnKGEPS88EwOL8wZe_LFnjHvp-HITZB51GbIoXRHpDUQuI2UQBtDkQpb0Uj-WZm1SH4LkDQ_Of/h120/Sketch-twitter.png" /></a><a

• Dette gør du nu for samtlige links du ønsker, og derefter trykker du gem, og et voila! Du er nu en super haj til at udskifte ikoner....!!

Jeg har på fornemmelsen at denne blog kommer til at skifte ikoner med jævne mellemrum, for det er bare så super svært at vælge mellem alle disse smukheder!

Husk at du også kan følge mig på instagram under "foodMAD"... Den knap er endnu ikke kommet på :)

Nu er næste projekt at få ændret de "døde" faner øverst så jeg kan få katagoriseret mine indlæg i madrelateret, og ikke mad-relateret... Hvis der er nogen af jer der ved hvordan man gør det, så skriv endelig!