Hoe anchorlinks toe te voegen in Blogger

In dit stuk wordt uitgelegd hoe je anchorlinks kan toevoegen aan een blogpost op Blogger. Anchorlinks hebben als doel de gebruiker door te sturen naar een specifiek gedeelte op een webpagina. Dus wanneer je op een dergelijke link klikt, ga je dus niet naar het begin van de webpagina, maar naar een specifiek gedeelte ervan. Dit is ook de reden waarom anchorlinks vaak gebruikt worden in de inhoudsopgave van e-books of langere webpagina’s.

Maar hoe creëer je anchorlinks? Dat is dus iets wat zal worden uitgelegd aan de hand van de volgende stappen:

Stap 1: creëren van koppen in je blogpost
Stap 2: toevoegen van anchornamen in de HTML-code
Stap 3: toevoegen van anchorlinks aan je inhoudsopgave

Stap 1: creëren van koppen in je blogpost

Het eerste wat je moet doen, is een nieuwe blogpost creëren op Blogger en hierin koppen aanmaken. Hoe je deze koppen noemt, is niet belangrijk, want we willen hier alleen uitleggen hoe anchorlinks werken.

Wanneer je dit gedaan hebt, ga je naar stap 2.

Stap 2: toevoegen van anchornamen in de HTML-code

Linksboven in de interface van Blogger zie je een knop in de vorm van een potlood. Het knopje ziet er zo uit:

Wanneer je op dit knopje klikt, geeft dit de optie om naar de HTML-weergave van je blog te gaan:

Kies deze optie en schakel over naar de HTML-weergave:

Zodra je in de HTML-weergave bent beland, zal je merken dat de HTML-code van je blogpost kan worden bewerkt. Dit is wat we willen, omdat we hier de wijzigingen kunnen aanbrengen die je anchorlinks in staat stellen om naar bepaalde delen in je blogpost te wijzen.

Het beste wat je nu kan doen, is de zoekfunctie activeren in je webbrowser door gelijktijdig ‘ctrl’ en de letter ‘f’ in te drukken. Hierdoor kan je sneller de code vinden die je moet aanpassen om je anchorlinks te laten werken.

Nu dat de zoekfunctie aanstaat, moet je zoeken naar een stuk code die begint met <h2. Dit soort stukjes code worden ‘headerelementen’ genoemd. Deze kunnen variëren van h1 tot en met h6, maar aangezien we koppen in onze tekst hebben aangebracht, gaan we in dit geval naar h2-elementen zoeken in de HTML-code. Bij het zoeken naar deze elementen, zal het je opvallen dat ze door de zoekfunctie met een kleur zijn gemarkeerd.

Hieronder zie je een voorbeeld van een headerelement, zoals je dat tegen kan komen in de html-weergave:

 

Het volgende wat je moet doen, is het toevoegen van een ‘id attribuut’ aan het h2-element van de kop waarnaar je een anchorlink wil laten wijzen. Hiervoor plaats je jouw cursor na <h2 en typ je na een spatie id=. Het zal ongeveer er zo uit komen te zien: <h2 id=

Nu moet je achter het id-attribuut de anchornaam typen. Dit komt er zo uit te zien, wanneer je naar een kop in de tekst wil linken met bijvoorbeeld de naam ‘Test Header 1’: id=testheader1. Zorg er wel voor dat er geen spaties in de anchornaam staan, ook niet wanneer je een anchorlink wil laten wijzen naar een kop met spaties in de naam.

Hieronder zie je hoe het eruit kan komen te zien, nadat je een headerelement hebt aangepast:

Hoewel je normaalgesproken de anchornaam tussen aanhalingstekens moet zetten, wordt dit in het geval van Blogger automatisch voor jou gedaan, na het sluiten van de HTML-weergave. Je ziet dan, wanneer je weer teruggaat naar de HTML-weergave, dat de anchornaam tussen aanhalingstekens staat:

Nu dat je stap 1 en 2 hebt gevolgd, gaan we naar stap 3:

Stap 3: toevoegen van anchorlinks aan je inhoudsopgave

In het geval dat je dit nog niet hebt gedaan, creëer je aan het begin van je blogpost een inhoudsopgave, die de namen van je koppen bevat.

Het volgende wat je moet doen, is in de zijbalk op ‘permalink’ klikken en de link kopiëren die eronder verschijnt. Doe dit, voordat je verder gaat.

Selecteer een item in je inhoudsopgave en klik op het knopje ‘link invoegen en bewerken’. Het knopje ziet er zo uit:

Een venster zal dan op de voorgrond verschijnen waar de naam van het item al is ingevuld:

Niettemin moet de link nog steeds worden toegevoegd. Dit venster is dan ook waar je de link gaat plakken die je eerder hebt gekopieerd:

Echter, je moet nog steeds de link aanpassen om het te laten wijzen naar een specifiek gedeelte in de tekst. Dit kan je doen door aan de link een hashtag toe te voegen met de naam van de anchorlink erachter die bij de kop hoort waarnaar je de link wil laten wijzen. Bijvoorbeeld: https://ronaldsblog/2021/04/testpage.html#testheader1

Het enige wat we nog moeten doen, is op de knop ‘toepassen’ drukken. Je hebt nu een anchorlink aangemaakt. Hou er rekening mee dat anchorlinks niet werken in de voorbeeldweergave, en dat ze pas werken wanneer de blogpost gepubliceerd is. Vanaf dat moment kan je op één van de links klikken in je inhoudsopgave om direct naar een specifiek gedeelte in je blogpost te gaan.

Dat is het! Je weet nu hoe je een anchorlink kan toevoegen aan een blogpost in Blogger.Stap 2: toevoegen van anchornamen in de HTML-code