woensdag 5 februari 2014

social media buttons

vandaag leg ik jullie uit hoe je social media buttons/icons maakt die aanklikbaar zijn, omdat ik deze vraag toch vrij regelmatig via de mail krijg. social media is erg belangrijk voor je blog, je wilt natuurlijk dat anderen je op zoveel mogelijk manieren kunnen volgen.!

ten eerste moet je ervoor zorgen dat je social media buttons hebt, deze kun je bijvoorbeeld zoeken op google - afbeeldingen - 'social media buttons'. je krijgt dan waarschijnlijk heel veel social media buttons in één afbeelding. sla de afbeelding op en open hem in paint of photoshop, zo kun je de buttons die jij gebruiken wilt uitknippen en in een nieuw bestand opslaan. zorg ervoor dat je elke social media button één voor één uitknipt en opslaat.
01. ga naar je dashboard en klik in het linkermenu op indeling.
02. klik dan op een gadget toevoegen.
03. dan verschijnt er een nieuw scherm, je moet dan even iets naar beneden scrollen en dan  html/javascript toevoegen.
04. dan verschijnt er weer een nieuw scherm; html/javascript configureren.
05. in het vakje inhoud plak je de volgende code;  <a href="URL Pagina"><img src="URL IMG" /></a>  deze code plak je voor elke social media button. dus heb je 3 buttons, dan plak je bovenstaande code 3 keer achter elkaar.
06. via tinypic kun je je social media buttons uploaden. klik op bladeren, zoek je bestand en klik op nu uploaden!
07. als tinypic klaar is met uploaden, krijg je vier linkjes. gebruik de directe link voor lay-outs.

nu gaan we de code iets aanpassen. op de plek waar nu staat url pagina komt de link waar de afbeelding naartoe moet gaan, bijvoorbeeld facebook, bloglovin of instagram. op de plek waar nu staat url img plak je de directe link die je net van tinypic gehaald hebt. let er op dat je de goede link, bij de juiste afbeelding plaatst.!

helemaal klaar.? klik dan op opslaan en rechts bovenin op indeling opslaan.

wil je je buttons in het midden centreren in plaats van links uitlijnen.? plaats dan voor de code die je al hebt dit; <center> en aan het einde van de code;  </center> dit. heb je de code er vijf keer staan, dan moet je dit dus ook bij elke code apart weer doen.

volg Jouvence via bloglovin.

14 opmerkingen:

Bedankt voor het achterlaten van een reactie ♥
Ik neem zo snel mogelijk een kijkje op jouw pagina.

  1. Handig voor mensen met blogger! Ik werk met wordpress.

    BeantwoordenVerwijderen
  2. Handig voor de mensen die dit nog niet wisten!
    liefs, Brittany

    BeantwoordenVerwijderen
  3. Handig dat je hier een blog over schrijft...ik heb hier wel iets aan...dank je!

    Groetjes Petr

    BeantwoordenVerwijderen
  4. Super dat je dit hier even uit de doeken doet ;)

    BeantwoordenVerwijderen
  5. Super handig artikel, dit ga ik ook eens uitproberen!
    liefs x

    BeantwoordenVerwijderen
  6. Ik werk ook met wordpress, maar daar kan het ook!

    BeantwoordenVerwijderen
    Reacties
    1. de tutorial zal niet helemaal overeenkomen, maar de code zal hetzelfde zijn denk ik xx

      Verwijderen
  7. ik werk met blogger maar super dat je dit artikel hebt geschreven
    liefs, x

    BeantwoordenVerwijderen
  8. Handig! Ik wist nog niet hoe dit moest, maar dit ga ik zeker gebruiken!

    BeantwoordenVerwijderen
  9. Hey hey going to follow darling!!
    I'm very happy you liked my little space - Preppy Lemonade. Many surprises are being prepared so put a like on the official page(https://www.facebook.com/PreppyLemonade?fref=ts) of the blog and follow the blog trough bloglovin (http://www.bloglovin.com/blog/9725179/preppy-lemonade)so you don't miss anything!!
    With love, Bárbara

    www.preppylemonade.com
    www.preppylemonade.com

    BeantwoordenVerwijderen
  10. Super handig! Ik ga even een bladwijzer bij je post zetten dan kan ik het binnenkort uitproberen. (:

    BeantwoordenVerwijderen
  11. Oh wow, wat handig! Nu ik langzaam wat meer mijn blog wil personaliseren en me heel voorzichtig waan in de wereld van de html is dit artikel ideaal!

    BeantwoordenVerwijderen