Tutorial | Blogger Sjabloon - Social media

Door | 19.3.14 3 reacties
Iedereen heeft tegenwoordig socialmedia. Ik zie veel bloggers met icons van bijvoorbeeld Facebook, Twitter en Bloglovin' maar als je niet weet hoe je deze icons naar je eigen websites moet laten linken, wat dan? Ik zal het je uitleggen!

In mijn vorige post over het blogger sjabloon aanpassen had ik het al over CSS en HTML. Ook nu gaan we hiermee werken. Als je een sjabloon hebt gedownload staan er meestal al icons in. Hoe je deze naar jou websites linkt zal ik eerst uitleggen. Daarna leg ik uit hoe je deze via 'indeling' kan toevoegen als een 'gadget'.

Icons die al in een sjabloon staan

Als je een sjabloon hebt gedownload staat meestal in de HTML code al een link die je kan aanpassen zodat bijvoorbeeld het Facebook icon naar jouw facebookpagina linkt. En zo krijg je het voor elkaar!

Ga naar je blogger overzicht -> Ga naar Sjabloon (links onder) -> HTML bewerken. Je komt dan in het HTML bestand terecht. Misschien denk je nu: "HELP?!" maar wees gerust, het is een heel stuk simpeler dan het lijkt. Klik 1x in de code zodat je niet op de website zit maar in de HTML bewerker. Nu gaan we zoeken klik cmd+F (MAC) of ctrl+F (WINDOWS) je krijgt nu dit te zien, binnen de HTML bewerker dus!


Typ bij search het woord 'Facebook' in en druk op enter (je kan ook naar 'social'zoeken -zie afbeelding hieronder- maar Facebook staat er eigenlijk altijd wel tussen en dit maakt het iets makkelijker dus ik raad het aan) Wat er nu gebeurd is dat overal waar 'Facebook' staat in de HTML code geel wordt. Druk net zo vaak op enter totdat je bij iets wat op het volgende lijkt uit komt. De tekst van de link zal in het engels staan dus bij de link van Facebook staat waarschijnlijk /YOURPAGE in plaats van /JOUWPAGINA -klik voor vergroting van de foto-


Zoals je ziet is dit de link naar Facebook. Meestal staat de rest van de social media bijvoorbeeld Twitter en Instagram eronder op dezelfde manier. Maar voor het gemak gebruik ik nu alleen Facebook. Ga naar Facebook en kopieer de link van jouw Facebookpagina. Verwijder de link  'https://www.facebook.com/JOUWPAGINA' die in de HTML code staat en vervang deze door jou eigen link LETOP! de link moet tussen ' ' staan anders werkt hij niet. Bij mij komt de link er nu zo uit te zien -klik voor vergroting van de foto-


De volgende stap is het icoontje van (in dit geval) Facebook. Vaak staan er standaard icons in, dit staat dan op de plaats waar nu 'link naar icon die je wil gebruiken' staat. Mocht je de icons willen gebruiken die er nu in staan, hoef je alleen op 'sjabloon opslaan' te klikken en ben je klaar! (yaay) 

Heb je zelf een leuke set icons gemaakt/gedownload, dan gaan we er voor zorgen dat die nu op je website komen. Houd er rekening mee dat als je zelf icons hebt gemaakt ze niet te groot moeten zijn. 32x32 pixels is een gangbare maat. Sla je icon ook op in .PNG zodat de achtergrond transparant is. Je kan er natuurlijk ook voor kiezen icons te downloaden, dan zijn de instellingen qua formaat e.d. al goed.

Zorg dat de icons per stuk online staan (je hebt namelijk een link nodig van het plaatje) In dit voorbeeld gebruik ik de website Tinypic voor het uploaden van mijn afbeeldingen. Je komt meteen bij het onderstaande scherm terecht. Klik op 'Bestand kiezen' en voeg je icon toe. Klik op 'Nu uploaden'. 

Je komt hierna op de volgende pagina terecht. Kopieer de URL bij 'Directe link voor lay-outs'.
Deze URL gaan we in de HTML code plakken. Ga dus weer terug naar de HTML bewerker van Blogger en plak de URL op de plaats waar nu 'link naar icon die je wil gebruiken' staat. De code komt er als volgt uit te zien.


Optioneel - Klik nu op 'Voorbeeld van sjabloon bekijken' (1) om te zien hoe je icons op je blog eruit zien.

Klik op 'Sjabloon opslaan' (2) en that's it! :) je icons zijn aangepast en linken naar jou pagina's!





Icons via gadget

Ga naar je blogger overzicht -> Indelingen -> klik op 'Een gadget toevoegen' op de plaats die jij wil. Mijn voorkeur gaat uit naar de zijkant.




Je krijgt nu een pop-up te zien. 'Algemeen' aan de linker kant staat al aangeklikt. Scroll naar beneden tot je HTML/JavaScript tegenkomt en voeg deze toe.



Je krijgt het volgende venstertje te zien, hierin ga je de code voor je icons toevoegen!

Kopieer deze code <a href="link van bijvoorbeeld facebook"><img src="link van icon" width="32" height="32"/></a> en plak deze in het 'inhoud' vakje.



Ga naar je Facebook (of andere pagina waar je naartoe wil linken) kopieer deze en plak hem op de plek waar nu 'link van bijvoorbeeld Facebook' staat. LETOP! hier en bij de volgende stappen moet de link tussen " " staan anders werkt hij niet. 


Upload je icon op bijvoorbeeld Tinypic. De stappen die je nu moet doen zijn hetzelfde als die voor icons die al in een sjabloon staan. Je upload je afbeelding en kopieert de URL bij 'Directe link voor lay-outs'.


Deze plak je op de plek waar eerst 'link van icon' stond.


De width en height zijn de hoogte en breedte van je icon. Als deze ook 32x32 pixels zijn, kan je het laten staan zoals in het voorbeeld. Mocht je een andere maat hebben gebruikt kan je dit gewoon invullen in plaats de cijfers 32.

Klik op 'opslaan' en je bent klaar! 

Mochten er vragen zijn, stel ze! Ik wil jullie graag helpen :-)

Nieuwere post Oudere post

3 opmerkingen:

  1. Ik gebruik helaas geen Blogger, maar toch handig dat je deze tip deelt!

    http://kimmsanity.weebly.com/

    BeantwoordenVerwijderen
  2. Thnx! Ik ben van plan om in de toekomst ook een algemene tutorial te houden over dit soort dingen :)

    BeantwoordenVerwijderen
  3. vanzoelenfotografie25-03-14 14:43

    handigg!! ik gebruik alleen wordpress hihi.. in mijn menubalk zijn ze automatisch toegevoegd, je hoeft alleen je eigen url in te voegen! super handig

    BeantwoordenVerwijderen