Widgets en codes • 3: 'Back To Top'-button en oplichtende foto's

zaterdag, juli 30, 2016

Hey allemaal! Ik vond dat het weer eens tijd was om jullie al dan niet wat bij te leren over dat codeer gedoe. Het is alweer een tijdje geleden. Deze keer leg ik uit hoe je een 'Back To Top'-button en oplichtende foto's aan je blog kan toevoegen. Lees snel verder als je benieuwd bent!


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.

B a c k   T o   T o p - b u t t o n
Dit knopje verschijnt wanneer je best een eindje naar beneden hebt gescrolld, zodat als je erop klikt automatisch naar boven schuift.

Z o   v o e g   j e   e e n   ' B a c k   T o   T o p ' - b u t t o n   a a n   j e   b l o g   t o e :
Eerst en vooral heb je natuurlijk een leuk plaatje voor je button nodig. Je kan er eentje ontwerpen met bijvoorbeeld PicMonkey.
Sla je ontwerp op en ga naar een website zoals Imgur. Upload je afbeelding en kies voor de 'directe link', dus de link met .jpg achteraan!
Je zal deze link zeker nodig hebben!

Voeg een HTML/JavaScript widget toe in het footer gedeelte van je blog indeling.
Hierin plak je deze (volledige!) code:


De code is opgesteld door My Blogger Tricks.
Op regel 13 vind je de tekst IMAGE LINK. Op deze plek (tussen de " ") hoort de directe link van je afbeelding dus te staan!

Sla het widget op en je bent klaar om 'm te gebruiken!

O p l i c h t e n d e   f o t o ' s
Als je deze code aan je blog toevoegt lichten je foto's op wanneer je er met je muis over heen gaat.


Z o   l i c h t e n   j e   f o t o ' s   o p   w a n n e e r   j e   e r   m e t   j e   m u i s   o v e r h e e n   g a a t :
Ga om te beginnen naar 
Blogger  >  Sjabloon  >  Aanpassen  >  Geavanceerd  >  CSS toevoegen.

Hier plak je deze code:


img:hover { opacity: 0.5; filter: alpha(opacity=50); }

De 'opacity' of transparantie kun je aanpassen zoals je wil. 0.5 is al erg transparant. Als je bijvoorbeeld 0.7 invult, vergeet dan ook niet om de 50 naar 70 te veranderen!
Experimenteer tot het helemaal is wat jij wilt!

Ik hoop dat jullie er weet iets aan gehad hebben. Vragen zijn altijd welkom.
Als er iets is wat jullie graag zouden willen leren of weten, laat het dan zeker achter in de reacties en ik prober het voor je uit te vissen! :)

Liefs,

You Might Also Like

6 reacties

  1. Wat een goede tips! Je legt het heel goed uit! :)

    BeantwoordenVerwijderen
  2. Leuk en goed artikel! Ik werk met weebly, maar ik ga kijken of ik kan vinden hoe ik daar oplichtende foto's kan doen (vind 't er zo tof uitzien altij!). X

    BeantwoordenVerwijderen
  3. Wanneer ik m'n blognaam veranderd heb (*ahum*, ik bedoel, wanneer ik eindelijk een nieuwe blognaam weet) en misschien een nieuwe lay-out koop, dan ga ik die html-code voor het oplichten van m'n foto's ook meteen in m'n blog zetten! Ik heb dit artikel in ieder geval alvast opgeslagen op Bloglovin :)

    Liefs!

    BeantwoordenVerwijderen
    Reacties
    1. Wat leuk dat je de tips kan gebruiken! Ik wens je nog veel succes met het verfraaien van je blog, hij is heel erg leuk!

      Verwijderen

Lief dat je een reactie achterlaat! <3

Popular Posts

@elenadewy

Follow Me

Follow

Subscribe