Om jouw template volledig naar je eigen smaak aan te passen, moet je de HTML van de template kunnen bewerken en bekijken. Zo kom je in de HTML van de template:
Klik op 'sjabloon'.
Klik op 'HTML bewerken'. Pas op: Heb je nog geen back-up van je template gemaakt? Doe dat dan nu, voordat je de HTML gaat bewerken.
Welkom in de HTML van je blog. Hier wordt alles wat met het uiterlijk en de functionaliteit van je blog te maken heeft bepaalt. Haal dan ook nooit zomaar iets weg en voeg nooit zomaar iets toe. Een verkeerde wijziging kan ervoor zorgen dat jouw blog niet meer werkt.
Hoe ga je met de HTML om?
- Maak alleen kleine veranderingen. Pas bijvoorbeeld kleurcodes aan of de breedte van onderdelen van jouw blog. Doe geen drastische dingen.
- Doe maar één ding tegelijkertijd. Iedere keer dat je iets veranderd hebt, kun je de template bovenin opslaan met de knop 'sjabloon opslaan'. Zorg dat het je scherm met de HTML open laat staan en ververs jouw blog om te zien hoe de verandering er aan de 'voorkant' uitziet. Verandert er niets of gebeurt er iets wat niet de bedoeling was? Druk binnen het HTML scherm op 'CTRL + Z'. Jouw laatste wijziging wordt ongedaan gemaakt. Klik vervolgens opnieuw op 'sjabloon opslaan'. Niets aan de hand!
- Weet wat je leest. Bestudeer de lijst met belangrijke codes hieronder:
<div> ... </div> Een div is een soort van kadertje op een website. Ieder onderdeel van een website. Staat in zijn eigen div. Zo heeft bijvoorbeeld het logo een div, maar heeft ook iedere knop in het menu een eigen div. Als je een onderdeel van je blog wilt verwijderen, kun je dit doen door de div waar dit onderdeel instaat weg te halen. Een van de div's in de HTML van deze blog heet '<div id='header-wrapper'>'. Wat er achter de 'id=' staat, laat zien hoe deze div heet. '<div id='header-wrapper'>' is de div waarin alles wat met de header te maken heeft staat. Als ik deze div verwijder, kunnen bezoekers het logo en de naam van deze blog niet meer zien.
<a href="#"> ... </a> Dit is de code voor een link naar een andere website of pagina. Op de afbeelding hierboven zie je de menubalk van deze blog. Iedere knop het het menu heeft de code "<a href=".... '. Dit is zo, omdat je wilt dat als je bezoekers op een item in het menu klikken, ze doorverwezen worden naar de gewenste pagina. Deze code zit als volgt in elkaar: <a href="ZETHIERHETADRESWAARDEZELINKHEENGAAT"> ZET HIER DE NAAM VAN DE LINK </a>
#ffffff Als je jouw template op jouw huisstijl en doelgroep wilt laten aansluiten, zul je waarschijnlijk de kleuren van de template moeten aanpassen. Alle kleurcodes beginnen met '#' met daarachter meestal 6 letters of cijfers (of een combinatie van letters en cijfers). De kleurcode van wit is #ffffff. Voor alle basiskleuren is het voldoende om slechts de eerste 3 cijfers of letters te typen. Als ik '#fff' typ, wordt het onderdeel waar ik deze code typ nog steeds wit. Voor kleuren die niet bij de basiskleuren horen, werkt dit niet.
width Deze code geeft aan hoe breed een onderdeel van de website is. In de afbeelding hierboven zie je dat de header van deze blog 950 pixels ('px' staat voor pixels) breed is. Waarom is dit handig om te weten? Als ik een logo voor mijn blog ontwerp, weet ik dat dat logo maximaal 950 pixels breed kan zijn. Hetzelfde geldt voor alle andere onderdelen van de blog. Kijk voordat je besluit om ergens een afbeelding of iets dergelijks in te plakken hoeveel ruimte er voor die afbeelding is.
<img src="#"> Met deze code zet je een plaatje in je blog. Vaak staan er in je gekozen template afbeeldingen die je niet mooi vindt. Die kun je gemakkelijk vervangen door de afbeelding die je niet mooi vindt in de code op te zoeken. Vervolgens vervang je de link naar die afbeelding met een link naar een afbeelding die je wel mooi vindt. Nog een manier om een afbeelding te herkennen, is om naar het laatste deel van een link te kijken. Staat er bijvoorbeeld png, jpg of jpeg aan het einde van een link, dan gaat de link naar een afbeelding.
0 reacties:
Een reactie posten