HTML-cursus #6: oplichtende foto's bij mouse-over & nieuwe zoekbalk

maandag 18 mei 2015 |


htmlcursuszes
Terug van weggeweest: de HTML-cursus! Sinds maart vorig jaar ben ik gestopt met deze rubriek, maar in de tussentijd kreeg ik wel eens reacties als 'ga je weer eens HTML-cursussen doen? Die vond ik altijd zo handig!' Laatst reageerde er ook iemand op mijn Instagramfoto met de vraag of ik de rubriek weer ging oppakken. Bij deze: ja! Ze liet ook twee goede ideeën achter die ik nu ga gebruiken: zo laat je de foto's op je blog oplichten als je er met de muis overheen gaat, en zorg je voor een nieuwe zoekbalk.

Oh, voor diegenen die niet weten wat HTML is, heel simpel uitgelegd: het is een programmeertaal waarmee je een blog/site opbouwt en mooi maakt. In mijn HTML-cursussen doe ik korte tutorials die ik stap voor stap uitleg. Ik werk zelf met Blogger, en heb geen verstand van Wordpress, dus weet ik niet of deze tutorials ook voor Wordpress werken. Ik ben trouwens best een noob op HTML-gebied, hoor. Dingen die ik wel heb geleerd, heb ik geleerd door het vele uitproberen. Soms mislukken dingen, maar laat de moed niet zakken en probeer, probeer, probeer (en experimenteer!). Maak, voor je begint, een back-up van je lay-out bij Sjabloon > Back-up/herstellen, just for sure.

Zo laat je de foto's op je blog oplichten als je er met de muis overheen gaat:

Ga naar Blogger > Sjabloon > Aanpassen > Geavanceerd > CSS toevoegen.
Plaats het volgende in het vakje:
img:hover { opacity: 0.5; filter: alpha(opacity=50); }

De 'opacity', oftewel transparantie, kun je zelf aanpassen. 0.5 is erg transparant, dus kun je ook voor een lager of hoger getal gaan. Vergeet niet om ook het getal 50 aan te passen. (Dus kies je bijvoorbeeld voor 0.7, dan vul je daar 70 in). Opslaan en that's it!

Zo krijg je een mooie Google zoekbalk op je blog: 

Ga naar https://cse.google.com/ en klik op 'add'. Bij 'sites om te doorzoeken', vul de link naar je blog in en klik op 'maken'. Dan klik je op 'code ophalen'. 

Ga naar Blogger > Indeling. In de zijbalk, klik op 'gadget toevoegen'. Kies 'HTML/Javascript' en plak daar de code. Opslaan en klaar ben je - tenzij je de zoekbalk nog ietsje naar jouw smaak wil bewerken. Dan kun je bij cse.google.com > Uiterlijk > Thema's de kleuren aanpassen en een nieuwe code ophalen. Bij Aanpassen kun je ook nog lettertypes veranderen: het wijst zich eigenlijk vanzelf wel. Persoonlijk vind ik deze zoekmachine fijn en professioneel werken in vergelijking met de normale Blogger zoekmachine!

Ik zou het zelf heel leuk vinden als jullie ideeën voor volgende tutorials achterlaten, zodat ik een idee heb van wat jullie willen weten en waar ik de volgende tutorials over kan laten gaan. Check wel even welke tutorials ik al heb gedaan, en leave your ideas!!

Succes & liefs,
Luna. 

11 opmerkingen:

Je kunt reageren met je Google- of Wordpress account, naam (en optioneel: website), of anoniem. Dankjewel voor je reactie! ♥

  1. Aaahw super handige tips luna! Kisses

    BeantwoordenVerwijderen
  2. Wat een handige tips! Moet toch niet heel ingewikkeld zijn?! Ik ga het maar eens uitproberen... Liefs, Jis

    BeantwoordenVerwijderen
  3. Oeh zo handig deze posts! Ik kijk de anderen ook nog even na, want daar staan ook dingen in die ik nodig heb haha...
    X Emma

    BeantwoordenVerwijderen
    Reacties
    1. Oh, nog even een vraagje voor de volgende post misschien: hoe maak je zo'n profiel in de sidebar? :')

      Verwijderen
  4. JEAY LUUN!
    Blij te lezen dat je hier weer mee verder gaat! De eerste heb ik dan ook gelijk toegepast!
    Ik zou het leuk vinden als eens een tutorial van bijvoorbeeld hoe je header zo mooi laat passen in de rest van de layout. Bij mij, hoe wit ik de achtergrond van de header en van mijn blog ook maak, blijf je toch vaak een lijntje zien.. Maybe iets dus in die zin of misschien hoe je deze geweldige header hebt gemaakt. Ondanks dat dit dan niet met HTML (of misschien dus wel qua mijn eerste idee) te maken heeft.. Misschien kun je er wat mee:).

    BeantwoordenVerwijderen
  5. Wat een super handige tips! Heb er gelijk eentje toegepast!
    Dankjewel!

    BeantwoordenVerwijderen
  6. Luna, held! Ik werd helemaal gelukkig van deze post. Je HTML cursussen zijn top.

    BeantwoordenVerwijderen
  7. Superhandig! Ik ben alleen laatst overgestapt op Wordpress :-(

    BeantwoordenVerwijderen
  8. Ah wat leuk! Heb het oplichten van de foto's toegepast op 0,9 , echt mooi . En super makkelijk, dankjewel!

    BeantwoordenVerwijderen
  9. Oh wat handig dit Luna! Ga in het weekend maar eens kijken naar je html cursussen, super fijn dit!

    BeantwoordenVerwijderen
  10. Ik ben blij dat de cursussen weer terug zijn. Ik heb er namelijk veel gebruik gemaakt van je vorige omdat ik ze echt fijn vond. Ik ben benieuwd hoe je dat met twitter gedaan hebt rechts aan je pagina!

    BeantwoordenVerwijderen