Widgets en codes: Instagram-widget en Social Media buttons toevoegen

zaterdag, september 26, 2015

Coderen. Het hoort bij het bloggen, maar is niet altijd zo gemakkelijk.
Ik weet dat de meesten onder jullie ook ijverige bloggers zijn, dus het leek me leuk om af en toe eens wat tips en codes met jullie te delen. In deze post: een Instagram widget en het toevoegen van social media buttons.


HTML is een codeertaal waarmee je je blog opbouwt zoals jij het wil. Hiermee kun je je stijl aanpassen en handige widgets aan je blog toevoegen. Natuurlijk kan niet alles van de eerste keer goed lopen, het is door te experimenteren dat je dingen bijleert en sterker wordt in het programmeren van een website.
Ik heb geen idee hoe het zit met Wordpress, omdat ik zelf gebruik maak van Blogger, dus het is mogelijk dat deze tutorials niet werken op Wordpress-blogs.
Als je vragen hebt: stel ze gerust! Het is wel zo dat ik geen professional ben op het gebied van coderen, maar als ik je kan helpen doe ik het graag.


E e n   I n s t a g r a m - w i d g e t
Om te beginnen: wat is dat? o.o
Scroll helemaal naar beneden op mijn blog en aanschouw de mijne. Het is niet zo dat het altijd een 'slideshow' is. Je kan er alle kanten mee op.

Z o   i n s t a l l e e r   j e   e e n   I n s t a g r a m - w i d g e t   o p   j e   b l o g :
Heeeel makkelijk, jij bent niet de persoon die al die moeilijke en ingewikkelde codes moet gaan combineren. Dat doet snapwidget.com
Wat jij moet doen is je gebruikersnaam of een hashtag invullen en dan kan je kiezen uit heel veel verschillende mogelijkheden. Je kan net zoals ik een slideshow, maar ook gewoon een paar foto's naast elkaar kiezen.
Wat ik heb gedaan: experimenteren. Klik even op 'Preview' en als je dan tevreden bent, op 'Get Widget'.
Dan opent zich een venster met de code. Deze code kopieër je.

Nu voeg je een gadget toe op de plek waar je het wilt hebben: HTML/JavaScript. Er opent zich opnieuw een venster en hierin plak je de code. Nog even opslaan en dan kan jij jouw Instagram foto's bewonderen op je blog!

S o c i a l   M e d i a   b u t t o n s
O, wat heb ik hier lang mee geknoeid! De social media buttons: figuurtjes met meestal het logo van een bepaalde sociale netwerk site en als je erop klikt heb je de kans de blog(ger) te volgen.

Z o   k r i j g   j i j   s t y l i s h   S o c i a l   M e d i a   b u t t o n s :
Dat is dan weer wat anders dan het Instagram widget.
Ga naar 
Blogger  >  Berichten  >  Nieuw bericht.
Noem dit bericht: 'NIET PUBLICEREN, NIET VERWIJDEREN!' Jij gaat dat bericht dus niet publiceren en ook niet verwijderen :)
Je hebt ondertussen jouw mooie buttons als een afbeelding opgeslagen op je computer en die voeg je gewoon, zoals je bij een normale foto zou doen in je bericht. Zet ze mooi langs elkaar (of doe zoals je het zelf wil), de juiste grootte en dan selecteer je ze, één voor één.

Je selecteert ze en klikt bovenaan op 'Link'. Je voert de link in van het account/de pagina/of whatever van jou of je blog dat bij het icoontje past en je laat voor de rest alle tekstvakken open. (Dus geen tekst weergeven etc.)
Als je dit bij ze allemaal hebt gedaan klik je linksboven op 'HTML'.
Dit is de code die jij VOLLEDIG gaat kopieëren en opnieuw in een nieuw gadget 'HTML/JavaScript' gaat invoeren op de plek waar jij je gadget hebben wilt.

Als alles goed is gegaan heb jij nu je eigen social media buttons op je blog!

Zo, dat was een hele boterham :)
Hopelijk was dit een beetje nuttig, hihi. Als er problemen zijn mag je het ook altijd in de reacties zetten. Ik ben geen expert, dus misschien zal ik niet kunnen antwoorden (lol), maar je kan altijd proberen.

Is het trouwens duidelijk genoeg uitgelegd? En willen jullie nog meer van deze posts? Laat me zeker iets weten!
Words Of Elegance bestaat trouwens alweer een maand! Wat gaat de tijd snel!

Liefs,
Elena

You Might Also Like

14 reacties

  1. Wat goed om zo meer te lezen. Ik vind coderen ook erg lastig. Als het mij niet lukt vraag ik mijn man om te helpen :)

    BeantwoordenVerwijderen
  2. Wat een leuk artikel, ik ben zelf echt superslecht in coderen, dus dit is superfijn<3 zeker meer van dit soort artikelen maken<3 xx

    BeantwoordenVerwijderen
  3. Zo'n handig artikel! En je legt zo ontzettend prettig uit!

    BeantwoordenVerwijderen
  4. Super leuk dat je hier een artikel over maakt. En wat gaaf dat je blog alweer een tijdje bestaat, erg leuk!

    BeantwoordenVerwijderen
  5. Tof zeg dat je blog alweer een maand bestaat, gefeliciteerd! (: Handige uitleg, ik was alweer vergeten hoe je social media buttons moet installeren. Misschien moet ik dat toch maar eens doen, ben het al de hele tijd aan het uitstellen.. Leuke blog heb je! (:

    BeantwoordenVerwijderen
  6. Ik ben echt slecht in coderen en durf het ook niet zo goed. Voor mij mogen dit soort artikelen dus vaker komen

    BeantwoordenVerwijderen
    Reacties
    1. Als je de codes die je veranderd (en ook de nieuwe codes) in een apart Word-documentje opslaat, kan je het later nog veranderen als je niet tevreden bent :)

      Verwijderen
  7. Heel fijn uitgelegd! Ik heb een tijdje geleden ook zulke widgets kunnen installeren, wel na heel lang zoeken. Had beter gewacht tot dit artikeltje haha. Liefs

    BeantwoordenVerwijderen

Lief dat je een reactie achterlaat! <3

Popular Posts

@elenadewy

Follow Me

Follow

Subscribe