Tutorial | Blogger Sjabloon - Sjabloon aanpassen

Door | 10.3.14 Laat een reactie achter
Ja, deze blog gaat over fotografie. Maar omdat ik de opleiding grafische vormgeving heb gedaan en daarna nog een cursus webdesign, weet ik veel van vormgeving, HTML en CSS af. En dat is weer handig voor het maken of aanpassen van een sjabloon voor je blogger blog!
Ik ga jullie vandaag vertellen over waar en hoe je een sjabloon voor je blog kan downloaden. En hoe je aanpassingen kan doen in HTML of CSS zodat je het sjabloon naar jou smaak kan aanpassen! 

Aller eerst moet je een sjabloon vinden die je aanspreekt.
Je kan hiervoor op websites zoals themecraft en btemplates kijken. Of zoek naar 'free blogger templates' via google, er zijn er een hele hoop! Als je een leuk sjabloon heb gevonden doe je het volgende:

1. Ga naar Sjabloon
2. Klik op backup/herstellen
3. Upload je sjabloon (je hebt het .XML bestand nodig)

-klik op de afbeeldingen voor een vergroting-


Als je sjabloon geupload is kan je naar 'aanpassen' gaan


Je ziet dan een aantal opties. Niet alle opties zijn te gebruiken bij gedownloade sjablonen. De optie 'geavanceerd' wel. Hier kan je dingen zoals de lettertypes en kleuren aanpassen. Onder dit kopje zie je ook 'CSS toevoegen' hier begint het echt werk.



Voor ik ga uitleggen welke je dingen je zoal kan aanpassen met CSS laat ik je eerst een handige tool zien die elke browser heeft 'element inspecteren' (Google Chrome is hier naar mijn mening wel het beste voor en in de voorbeelden gebruik ik ook Google Chrome) Ga naar je blog en klik op de rechter muisknop. Je zal nu een aantal opties zien waaronder 'element inspecteren' [1] klik deze aan. Je zult zien dat op je blog een programma opent. Wat hier staat zal voor de meeste van jullie abracadabra zijn. Maar ik wil jullie laten zien dat zelfs zonder verstand van HTML en CSS je een paar simpele aanpassingen kan doen waardoor je blog toch wat meer 'eigen' wordt.


Wat we nu gaan doen is werken met het vergrootglas [2] klik deze aan. We gaan nu even werken met een voorbeeld van mijn blog. Oorspronkelijk stond er onder aan mijn blog 'Abonneren op berichten'.


Dit vond ik niet nodig en wou ik dus graag weg hebben. Let op! Je heb dus op het vergrootglas geklikt. Als je met je muis over het geen gaat wat je weg wil hebben komt er een tekst te staan. [1] Onthoud deze en klik er nu op (in dit geval dus de zin 'Abonneren op bericht') Je zal zien dat er een zin in de HTML code [2] wordt geselecteerd. Ga hier naartoe en kijk naar de tekst die er staat, als het goed is komt deze overeen met de tekst die je zag toen je de muis over het geen wat je weg wil hebben bewoog. Kopieer deze tekst. [3]



Weetje 
Voor de tekst die je nodig hebt om iets weg te halen op je website staat altijd <div class="tekst"> of <div id="tekst"> Wil je eerst wat meer informatie over 'class' en 'id'? Ik heb een website gevonden waarop het op een makkelijke manier wordt uitgelegd. Klik hier voor meer informatie over een class maken en klik hier voor meer informatie over het maken van een id.

Okay, we gaan verder. Zoals je ziet staat er voor deze tekst [3] 'class' in de CSS code duid je het woord 'class' aan met een . (punt) er kan in plaats van 'class' ook 'id' staan. Dit duid je aan met een # (hekje) Nu je weet of er class of id voor de tekst die je gekopieerd hebt staat kan je verder. Ga naar 'CSS toevoegen' (zie derde foto van deze post) Bij mij stond er 'class' dus ik gebruik een . en dan de tekst dus .feed-links dit plaats ik in de CSS editor 


Het enige wat je daarna nog hoeft te doen is aangeven dat je dit element (.feed-links) niet meer wil zien. En dat doe je door het volgende aan de CSS code toe te voegen. 
{
display:none;
}

In de code komt het er zo uit te zien.


Je drukt op toepassen op blog, rechtsboven. En het resultaat is dat de zin 'Abonneren op bericht' weg is!


Natuurlijk werkt dit niet altijd. Want soms moet je bijvoorbeeld dieper in de code 'kruipen' om een bepaald element weg te krijgen. Maar het zal vaak wel werken. En ik denk dat dit echt te doen is voor iemand die geen kennis van HTML en CSS heeft. Eigenlijk wou ik nog meer uitleggen want dit is natuurlijk niet het enige wat je met HTML en CSS kan doen. Maar dit is inmiddels al een erg lang stuk geworden. Dus de rest bewaar ik voor een andere keer! ;-) Dan zal ik uitleggen hoe je socialmedia icons kan aanpassen/toevoegen en naar jou website kan laten linken!

Mocht er nou iets niet lukken of heb je vragen, stel ze gerust!

Nieuwere post Oudere post

0 reacties: