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

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.