AnneTannes Blogpraat

Een handtekening onder je bericht - deel 2

Doelgroep: beginners
Vereisten: een beetje over HTML en CSS willen weten (maar eigenlijk is HTML nog Latijn voor jou.)

In een vorig bericht vertelde ik, hoe je met behulp van MyLiveSignature een handtekening kan maken om onder je blogberichtjes te plaatsen.

Je handtekening wordt dus een afbeelding, die je onder elk van je berichten kan plaatsen, net zoals je dat met andere afbeeldingen doet: Je kan de afbeelding die je op het einde van de procedure van MyLiveSignature hebt gedownload naar je eigen computer, weer uploaden naar de server waar je blog is gehost, en die afbeelding vervolgens onder elk van je blogberichtjes invoeren.

Soms wil je echter dat je handtekening andere stijlkenmerken heeft dan je gewone afbeeldingen. Je wil bijvoorbeeld niet dat je handtekening een kader heeft, terwijl jouw blogthema daarin wel voorziet.

OK, in plaats van in je visuele opmaakveld te blijven zitten, klik je op de tab ‘html’ (WordPress 2.5), of ‘html bewerken’ (voor Blogger), en je scrollt helemaal omlaag tot aan de plaats waar je de code voor je handtekening terug vind. Die moet er in zijn simpelste vorm ongeveer uitzien als volgt:
<img src="http://www.mijnblog.com/images/handtekening.png" />

Dit kan je lezen als volgt:
<img : Hier begint de informatie over een afbeelding (image).
src="http://www.mijnblog.com/images/handtekening.png" : Die afbeelding moet door de browser op deze plek opgehaald worden.
/>: hier eindigt de informatie over de afbeelding.
(Wellicht is er hier al bijkomende informatie toegevoegd: bijvoorbeeld alt="...", waarmee een ‘alternatieve beschrijving’ van de afbeelding wordt gegeven voor gebruik in browser die geen afbeeldingen kunnen tonen, zoals bv brailleregels. Of height="..." en width="...", waarmee aan de browser al verteld wordt hoeveel plaats hij moet vrijhouden voor de afbeelding, zodat je bv op een pagina met heel veel foto’s niet telkens de tekstblokken ziet verspringen als de bijhorende foto’s maar traag worden binnengehaald.)

De informatie die we op dit ogenblik nog in die ‘tag’ willen opnemen zijn stijlkenmerken.

Stijl: mijn handtekening hoeft geen kader

Het meest voorkomende probleem is, dat je standaard blogthema voorziet dat er een mooi kadertje rond je foto’s staat. Je moet dan een klein stukje stijl-informatie toevoegen in de img-tag. Dat doe je door
style="border:none;"
in de tag te plaatsen. Dit stukje code plaats je ergens achter de riedel met href="...", en in elk geval voor /&gr;. Elk onderdeel heeft hier belang, een aanhalingsteken vergeten of een lettertje mistypt, en de computer snapt echt niet meer wat je bedoelt. De verschillende stukjes informatie (zoals alt, style, height en width) mogen in een willekeurige volgorde staan.

De img-tag gaat er dus als volgt uitzien:
<img src="http://www.mijnblog.com/images/handtekening.png" style="border:none;" />

Het zou me voor vandaag te ver leiden, als ik alle mogelijke stijlkenmerken hier behandelde. Maar heb je vragen in dit verband, dat wil zeggen: is er aan de ‘afwerking’ van je handtekening iets dat niet helemaal is zoals jij het wil, plaats in het reactieluik dan een link naar je pagina-met-handtekening, en geef aan wat je verandert wil zien. Ik wil dan bekijken wat daarin eventueel mogelijk is (maar ik ben echt geen CSS-goeroe, dus alle problemen oplossen kan ik allicht niet!)

Nu zijn we zover, dat we een stukje code (een ’snippet’) hebben aangemaakt, dat we ergens in een tekstbestandje kunnen bewaren en dat we elke keer als we onze handtekening kunnen toevoegen, weer onderaan (de html-versie van) ons blogberichtje kunnen plakken.
Maar voor wie echt de uitdaging aan wil gaan, bekijk ik volgende keer op welke wijze je dat stukje code al in de basisbestanden van je blog kan invoeren, zodat je die handeling niet elke keer opnieuw moet uitvoeren.
Dit is al iets uitdagender, en helaas niet mogelijk voor Blogger en WordPress.com, en hoogstwaarschijnlijk ook niet voor skynet-blogs en dergelijke. Een kluifje dus voor mensen met een zelfgehoste WordPress-blog.

19 mei - aanvulling: Ik heb zojuist een beschrijving gepubliceerd van een WordPress-plugin die automatisch je handtekening aan al je berichten toevoegd.