HTML-cursus #5: "Lees meer"-knop en een mooie header

vrijdag 28 maart 2014 |


Tijd voor HTML-cursus nummer 5! Het is het laatste deel van de serie (aaah..), maar na vijf HTML-cursussen vind ik dat ik genoeg heb verteld. Voordat ik overal dezelfde lay-out zie als ik heb! ;) Wie weet komt de serie ooit nog terug... Ik ga jullie uitleggen hoe je 'lees meer' verandert naar een leuke afbeelding/zelfgemaakte knop en hoe je zelf een leuke header voor je blog kunt maken. 

Zo verander je de 'Lees meer'-link in een leuke afbeelding!
Ga naar Blogger > Sjabloon > HTML bewerken en zoek (CTRL + F) dit stukje:

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

Verwijder deze code en zet er dit voor in de plaats:

<a expr:href='data:post.url' expr:title='data:post.title'><img src='http://image-URL.png'/></a>

Voor de http://image-URL.png is het de bedoeling dat je een eigen url invult. Maak eerst de knop en upload dan de afbeelding op tinypic. Klaar? Dan krijg je vier codes onder elkaar. Kopieer de onderste en plak deze in de plaats van http://image-URL.png.

Hier zie je een paar voorbeelden van 'lees meer'-knoppen. Maar het zou natuurlijk origineel zijn als je 'm zelf maakt! En dan wordt-ie waarschijnlijk mooier dan alle voorbeelden op internet. Bekijk, als je klaar bent, het voorbeeld of het gelukt is en sla 'm dan op. Tadáaa, daar is je nieuwe 'lees meer'-knop!

Zo maak je een leuke header voor je blog. 
De header van je blog vind ik heel belangrijk. Het is geen logo, maar gewoon een leuk plaatje, of mooie letters. De header van je blog heeft eigenlijk niet met HTML te maken, omdat je er geen computercodes voor gebruikt. Het is het bovenste gedeelte van je blog. Mijn header knalt er echt uit vergeleken met de rest van de lay-out. Wil jij ook een opvallende header? Lees dan verder en download voor je begint Photofiltre! Hier werk ik mee bij het maken van een header. Is Photofiltre gedownload? Start het programma dan op. In foto's ga ik laten zien hoe je een header maakt op een redelijk simpele manier. Photofiltre heeft nog veel meer functies, maar deze kun je zelf ontdekken!

Stap 1: Kies de afmetingen van je header. Afmetingen die ik aanraad: 980 x 280 pixels. Klik dan op 'ok' en het vlak opent. 

Stap 2: De tekst. Klik bovenin op de letter T, en voer je tekst in. Dat is dus de naam van je blog. Je kunt ook het lettertype kiezen. Leuke lettertypes kun je downloaden op dafont.com. Bij 'afmetingen' bepaal je hoe groot de letters zijn. Ho, nog niet op 'ok' klikken! Je letters zijn nog saai zwart en dat gaan we even veranderen. :)

Stap 3: Klik op 'effecten' en vink 'vulpatroon' aan. Je kunt nu een afbeelding kiezen voor als achtergrond bij de letters. Let's try! Deze achtergrond gebruik ik. Achtergronden kun je overal van het internet afhalen. Als het niet goed past bij de letters, kun je de achtergrond bijsnijden of kleiner maken met een bewerkingsprogramma als Pixlr

Stap 4: Klik dus de afbeelding aan. Nu heb je een vulpatroon. Je klikt op 'ok' en daar is je tekst:




Als je dubbelklikt op de letters, kom je weer bij het vakje waar je de tekst kunt aanpassen. Dan kun je 'm groter of kleiner maken, of een ander vulpatroon invoegen, wat je maar wilt. Ben je klaar, dan druk je op Enter. Je kunt eventueel nog een tekstje eronder toevoegen, zoals ik heb: fashion & lifestyleblog. 


Klaar! Sla 'm hierna op en voeg 'm in als header bij Blogger > Indeling > Kop. 

Ga jij de tutorials weer gebruiken? Laat het me weten in de reacties! Als het gelukt is, kom ik even kijken op je blog. Vandaag kom ik ook terug uit Dublin, dus dit weekend ga ik (als ik daar tijd voor heb) jullie blogjes lezen. Even alles weer inhalen. Het worden wel drukke weken met het (laaange) verslag dat ik moet inleveren. Maar ik doe mijn best alles weer op te pakken! Ik zal ook zeker een blogpost schrijven over hoe het was in Dublin! Liefs, Luna. 

30 opmerkingen:

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

  1. Oee, vooral die met de header vind ik erg handig! Thank you:)

    BeantwoordenVerwijderen
  2. Die header is zo tof! Ik ga er niks van gebruiken want ik heb net mijn blog laten omgooien, maar ik vind je tips echt onwijs handig en heb er wel eens naar gekeken!

    BeantwoordenVerwijderen
  3. Die met die header is erg handig! En ook die van de 'lees meer' knop ga ik zeker weten gebruiken!

    BeantwoordenVerwijderen
  4. Bedankt weer voor de super goede uitleg! Ik ga de 'lees meer' knop veranderen in een afbeelding binnenkort ;-)! Ik zou graag mijn blog van blogger naar wordpress willen omzetten, maar heb geen idee hoe.

    BeantwoordenVerwijderen
  5. Leuk! Wel jammer dat het al gedaan is :D haha

    BeantwoordenVerwijderen
  6. wat een fijne tips vooral die van lees meer :)

    BeantwoordenVerwijderen
  7. Leuk! Handig om zo je header te maken. Ik gebruik altijd photoshop. Leuk artikel en super handig om te weten :)

    BeantwoordenVerwijderen
  8. Wat handig dit, vooral naar het eerste was ik heel lang op zoek. Bij mijn template is het alleen nu niet meer nodig, want die zit wat anders in elkaar, haha. Ik denk dat heel veel bloggers hier wat aan hebben, je tutorials zijn echt heel handig Luna!

    BeantwoordenVerwijderen
  9. Zo handig altijd, ik ga er binnenkort eens voor zitten en ook wat aanpassingen doen aan mijn blog, met dank aan jouuuu :) Thanks Luna! X

    BeantwoordenVerwijderen
  10. Whaa, die eerste tip ga ik zeker gebruiken! Dankjewel ^^

    BeantwoordenVerwijderen
  11. Luna, je bent geweldig! :D echt leuk dat je zulke fijne cursussen doet! :)
    Xxx Sarah

    BeantwoordenVerwijderen
  12. Wat leuk! Ik ben meteen gestart om een nieuwe header te maken! Maar ik heb een vraagje: ik heb een mooi lettertype van Dafont opgeslagen op mijn computer, maar hoe kan je die dan in je Photofiltre zetten? Ik hoop dat je me kan helpen :)
    Liefs, Amber

    BeantwoordenVerwijderen
    Reacties
    1. Die vraag heb ik ook, bij mij lukt dat ook niet. Wil je hier alsjeblieft op reageren?
      Thnx!

      Verwijderen
    2. Als je 'm hebt gedownload, zou die automatisch naar photofiltre moeten gaan! Anders weet ik het helaas ook niet. :( Misschien even opzoeken op internet hoe het precies werkt met dafont en fonts downloaden?

      Verwijderen
  13. Wat ontzettend jammer dat dit alweer de laatste HTML cursus is. Het is echt een van mijn favo onderdelen van je blog geworden ^.^
    Ik ben nu bezig om een hele nieuwe lay-out te ontwerpen en daarbij heb ik al een paar van je tips toegepast. Helaas kan ik in deze nieuwe lay-out (die ik heb gedownload) geen header plaatsen :(
    maar ik ga wel aan de slag met de 'lees meer' knop. Bedankt!
    Groetjes Senna

    BeantwoordenVerwijderen
    Reacties
    1. Jammer, het werkt bij mij niet. Hij geeft geen foutmelding, maar op mijn blog komt het plaatje dat ik heb ontworpen niet.

      Verwijderen
  14. Super bedankt voor deze handige tips! Erg jammer dat je er mee gaat stoppen, want je hebt me echt goed geholpen! Ik heb nu de 'read more' button, waar ik al erg lang naar op zoek was, toegepast op mijn blog. Zo ook een nieuwe header!

    Liefs

    BeantwoordenVerwijderen
  15. Wat een handige post!
    Ik vind html altijd zo ingewikkeld :D x

    BeantwoordenVerwijderen
  16. echt een leuk artikel maar ik heb een vraagje als ik klaar ben met de header en ik hem heb opgeslagen en op mijn blog wil zetten komt er een grijs vlak omheen dus bij mij wil het niet echt goed. weet jij misschien een tip ofzo.

    BeantwoordenVerwijderen
  17. Je hebt het echt heel goed uitgelegd en dankzij jou heb ik nu eindelijk een read more button! Dankjewel! :)

    BeantwoordenVerwijderen
    Reacties
    1. En zou je alsjeblieft ook kunnen uitleggen hoe ik 'oudere berichten' kan veranderen in bijvoorbeeld een pijltje, zoals jij hebt, of nummers? Liefs!

      Verwijderen
  18. Ik denk dat je mij niet kan helpen maar alle code's die ik opzoek met CTRL + F vind hij niet. Hij zecht dan "Geen overeenkomsten gevonden' Misschien dat jij dit ook wel eens hebt en dat je een tip hebt!? Alsvast heel erg bedankt.
    Liefs Luna

    BeantwoordenVerwijderen
    Reacties
    1. Als je in HTML aan het bewerken bent moet je even klikken op het HTML vak en dan op CTRL + F. En je kunt beter ook een deel van de code opzoeken, anders pakt ie 'm vaak niet. Hoop dat het nu wel lukt! XX

      Verwijderen
  19. Het is eindelijk gelukt! Dankje! directionforbeauty.blogspot.be

    BeantwoordenVerwijderen
  20. Deze reactie is verwijderd door de auteur.

    BeantwoordenVerwijderen
  21. IK heb de lees meer knop proberen te veranderen maar kan de html code die weg moet nergens vinden verder wel handig !

    BeantwoordenVerwijderen
  22. Duizend maal dankjewel!!!
    Ik wilde al een hele tijd mijn 'lees meer'-button veranderen in een leuke afbeelding, maar de codes die andere mensen gebruikten, werkten bij mij niet (of het was ik die er geen bal van snapte). Maar met deze code lukt het me wel! Heeel erg bedankt!
    Liefs,
    Elena

    BeantwoordenVerwijderen
  23. Heel handig dat 'lees meer'! Alleen ik heb een vraagje. Bij bij blijft het icoontje 'Lees meer' staan, ook als je het hele bericht ziet staat 'lees meer' en nog onder.. Weet jij misschien hoe ik dit kan veranderen?
    Liefs kim www.kimhofstee.nl

    BeantwoordenVerwijderen