zaterdag 21 november 2015

19 BLOG MAKE-OVER TIPS

















Toen ik in augustus mijn blog een make-over gaf, was er blijkbaar wel vraag naar wat tips & tricks om het uiterlijk van je blog aan te passen. Ikzelf werk met Blogger en ben daar nog altijd content van omdat het een erg duidelijk en eenvoudig blogplatform is. Ondertussen ben ik het natuurlijk ook gewoon om er mee te werken en kan ik (voorlopig) de energie niet opbrengen om over te schakelen naar Wordpress of Squarespace. Toegegeven de mogelijkheden van Blogger zijn véél beperkter op zowat alle vlakken en al zeker op het gebied van vormgeving, maar met wat aanpassingen hier en daar kan je het uitzicht van je blog toch wat persoonlijker maken. Een echte tutorial om je blog een make-over te geven is het niet geworden aangezien elke blog anders is en iedereen een andere goesting heeft. Wat praktische tips kan ik je wel meegeven.

1. Neem je tijd
Ik ben absoluut geen webdesigner (die werken trouwens niet met Blogger) met als gevolg dat ik heel veel heb moeten proberen (en veel daarvan is ook niet gelukt). Geduld is echt wel nodig en stap-voor stap, elke dag ietsje veranderen aan je blog werkt vaak het best.

2. Een moodboard
Maak eerst een (geheim) moodboard op Pinterest met alles dat je blog- en designgewijs mooi vindt. Denk er niet te veel over na en gooi gewoon alles wat je aanspreekt op dat bord. Nadien zal je zien dat er een bepaalde lijn in zit; welke kleuren, lettertypes en sfeer je boeien. Voor mij was dit heel handig om te zien wat mij echt aanspreekt.

BLOGGER op Pinterest - Google Chrome 11112015 174623.bmp

3. Een testblog
Maak een tweede blogspot aan en zet die bij instellingen op privé. Zo kan je rustig van alles uitproberen en prutsen zonder dat je je eigen blog verpest en geen kat die het ziet. Alles kan je dan aanpassen: breedte, lettertype, widgets in de zijbalk, foto’s, header etc. Wanneer dan alles is zoals je wil, kan je het sjabloon kopiëren en toepassen op je blog. (je zal dan nog wel de widgets in de zijbalk en nog wat kleine dingen moeten aanpassen, maar het werkt veel gemakkelijker)

4. Back-up
Als je veranderingen aanbrengt op je huidige blog maak dan ALTIJD eerst een back-up van je template! Dit doe je rechts bovenaan bij 'back-up/herstellen' in het tabblad 'sjabloon'.

5. Template
Ik denk dat de ‘Simple’of 'Eenvoudig" template het gemakkelijkst is om zelf aan te passen. Je kan ook templates downloaden die gratis worden aangeboden door webdesigners (bv. deze, deze of deze), maar die zijn vaak moeilijk zelf nog aan te passen. 

6. Stap voor stap
Beslis eerst over de breedte en indeling: sjabloon > aanpassen > indeling of breedte aanpassen. Kies dan 1 of 2 lettertypes en vervolgens 2 of 3 kleuren. Deze vormen de basis van je blog en verander je nadien best niet meer. 
!Onthoud de #kleurcodes van je blog. Dat maakt het naar de toekomst toe eenvoudiger om alle kleuren uniform te houden.

7. Eenvoud siert
Ben je niet goed in het maken van een header, kies dan eerder voor iets eenvoudig (je blognaam in een mooi lettertype) dan een brik à brak zelfgemaakte header. Dit of dit is hier een goed voorbeeld van.

8. Patroon
Over smaken en kleuren valt natuurlijk niet te discuteren, maar ik ga er vanuit dat de inhoud van je blog het belangrijkst is en dan kan een drukke achtergrond nogal eens afleiden. Wil je toch niet voor standaard wit gaan, dan kan je hier mooie en subtiele achtergronden vinden. Ze zijn gratis te downloaden en nadien te installeren via sjabloon > aanpassen > achtergrond.

Blogger De Zuster Van - Sjabloonontwerper - Google Chrome 20112015 102005.bmp

9. Widgets
Widgets brengen je blog wat tot leven en installeer je in de zijbalk. Dit is een leuke Pinterest widget en eentje voor Instagram kan je hier vinden. Je installeert ze bij indeling > gadget toevoegen > HTML/JavaScript (Ze moeten dan nog wel wat aangepast worden aan je eigen breedte en goesting. En met breedte bedoel ik uiteraard de breedte van je zijbalk. Haha, flauwe mop!)

10. Google fonts
Google fonts heeft mooie lettertypes. Hier is een goede tutorial om ze te installeren. Het lijkt moeilijk, maar is eigenlijk heel simpel. Gewoon stap voor stap de instructies volgen en dat komt in orde.

11. Welk lettertype 
Heb je een leuk lettertype gezien op een andere blog maar weet je niet welk het is? Installeer WhatFont in je browser en een simpele klik geeft het lettertype, de grootte en kleur weer.

Voorbeeld WhatFont

12. Dezelfde breedte 
Maak al je afbeeldingen even breed, dat oogt mooier en geeft rust. Ik gebruik Flickr om mijn foto’s te uploaden en kopieer ze dan standaard met de HTML-embed code 800 x … in het HTML gedeelte van het blogbericht. Aangezien mijn tekstbreedte ook 800 px is, is alles mooi uitgelijnd.

13. Verwijder Flickr-informatie 
Sinds een aantal maanden staat er standaard informatie op alle foto's gedeeld met Flickr. Wil je dit liever niet, vervang dan de ‘true’ in de html code door ‘false’.

Screenshots2

14.  Ontblogger je blog
Blogger heeft een aantal typische kenmerken die je blog er niet aantrekkelijker op maken. Verwijder deze voor een frisser resultaat.
"Blogger navbar" bovenaan je blog: 
indeling > navbar >  bewerken > uitgeschakeld > opslaan
"abonneren op: Berichten (Atom)" onderaan je blog: 
sjabloon > aanpassen > geavanceerd > CSS toevoegen (helemaal onderaan) > plak de volgende code .feed-links { display:none; } > druk enter >toepassen
"Mogelijk gemaakt door Blogger" onderaan je blog: 
sjabloon > aanpassen > geavanceerd > CSS toevoegen > plak de volgende code #Attribution1 { display:none; } > druk enter > toepassen

15. Afbeeldingen zonder titel
Wil je geen verplichte titel bij een afbeelding in de zijbalk, type dan <!> als titel.

16. Canva 
Niet iedereen heeft toegang of het talent & de kunde om met fancy grafische computerprogramma's te werken (ikke!). Canva is een grotendeels gratis website om heel gemakkelijk leuke grafische dingen voor je blog te maken, bv. infographics, headers, tabellen, collages, uitnodigingen,... Het is zo simpel!

Een diepzinnige tekst hier.


17. Stockfoto's 
Maak je zelf niet graag foto's? Gratis en royaltyfree stockfoto's kan je vinden op:
          -Life Of Pix
          -Unsplash
          -StockSnap

18. Terug naar boven
Een pijltje dat onderaan je scherm verschijnt om je bezoekers in 1 klik terug naar boven te brengen, vind ik persoonlijk erg handig. Een goede tutorial hiervoor, kan je hier vinden en je kan een zelfgekozen afbeelding gebruiken.

19. Zoek in het Engels 
Je zal het al gemerkt hebben, maar de meeste Blogger handleidingen zijn in het Engels te doen. In het Nederlands zijn er weinig tutorials te vinden en daarom kan je het best in het Engels Googelen naar handleidingen. 

Bonus tip:
Super cliché maar oh zo belangrijk: maak in de eerste plaats een blog die jij mooi vindt! Al de rest is bijzaak. (Behalve als je Comic Sans gebruikt, dan sta je er alleen voor.)


Nog enkele leuke sites met blogger tips:
-http://xomisse.com/blog/tag/blogger/ (tijdelijk in verlof)


36 opmerkingen:

  1. Bedankt! Dit is een heel interessante post die ik heel goed kan gebruiken!
    Het mag gezegd, jouw blog straalt rust en stijl uit!

    BeantwoordenVerwijderen
  2. Hier kan ik zeker wat mee! Zo hoef ik de overstap naar wordpress toch (nog?) niet te maken. Heel fijn! Bedankt.

    BeantwoordenVerwijderen
  3. Cool! Merci voor de tips! Ik ga er zeker een paar eens uitpluizen!

    BeantwoordenVerwijderen
  4. Genoteerd! Thanks voor de tips! Nu heb ik geen excuus meer om eens werk te maken van een nieuwe lay-out voor mijn blog :)

    BeantwoordenVerwijderen
  5. Tof ! Deze blogpost moet ik zeker onthouden om misschien in de toekomst hier en daar wat bij te stellen op mijn blog ! Merciekes !

    BeantwoordenVerwijderen
  6. Oh dank je wel! Super interessant!
    Ga er zeker mijn tijd voor nemen in de vakantie om alles hieromtrent uit te pluizen.
    Wist soms niet goed meer wat te doen met m'n layout dus dit kwam als geroepen! :-D
    mizolilie.blogspot.com

    BeantwoordenVerwijderen
  7. Super, hier moet ik ook eens werk van maken ! En mijn uitstelgedrag hier rond aanpakken. Met jouw tips moet dit wel lukken
    Bedankt

    BeantwoordenVerwijderen
  8. Hoi Annelies, hartelijk bedankt voor deze informatieve blogpost. Daar ga ik mee aan de slag!

    BeantwoordenVerwijderen
  9. SUPER! 14. is een feit. ahh, dat doet al deugd. Nu de rest nog ;-) Ook gratis extra tijd ergens te vinden?!

    BeantwoordenVerwijderen
  10. SUPER! 14. is een feit. ahh, dat doet al deugd. Nu de rest nog ;-) Ook gratis extra tijd ergens te vinden?!

    BeantwoordenVerwijderen
  11. Bedankt voor de tips, vooral tip 13 en 14 zijn super. Dat gaan we binnenkort maar eens proberen. thx!!

    BeantwoordenVerwijderen
  12. Whoa, goeie tips, bedankt om deze op een rijtje te zetten!

    BeantwoordenVerwijderen
  13. Moodboard, check! Testblog, check! Canva, de ontdekking van de eeuw voor mij, ook check! Super bedankt voor al die ontzettend nuttige tips!

    BeantwoordenVerwijderen
  14. Super blogpost, ik heb weer wat bijgeleerd. Bedankt!

    BeantwoordenVerwijderen
  15. handig, ik wil al een tijdje een beetje aanpassingen doen maar nu krijg ik een gemakkelijk overzicht van wat ik allemaal kan doen zonder urenlang te moeten zoeken, bedankt! x

    BeantwoordenVerwijderen
  16. Superblij dit blog. Ik ben al een heel stuk wijzer geworden in blogger. Was namelijk al op zoek naar het e.e.a. Sommige dingen willen echter nog niet lukken.

    Vroeg me af, kun je ook uitleggen hoe je de reacties zichtbaar krijgt zoals hierboven en hoe je dit reactieblok in je Blog krijgt. Dan heb ik mijn blog namelijk zo goed als ik het hebben willen. Thanks

    P.S. Volg je blog met plezier

    BeantwoordenVerwijderen
    Reacties
    1. Hoi Linda!

      Dankjewel, het is fijn om te horen dat de tips nuttig voor jou zijn geweest.

      Ik weet niet goed of ik je vraag begrijp, maar de reacties kan je aanpassen bij Instellingen > Berichten en reacties. Daar kan je kiezen voor 'ingesloten' zodat de reacties en reactieblok zichtbaar worden onder elk geopend bericht en niet in een aparte pop-up. Hopelijk helpt dit je al op weg.

      Groetjes!

      Verwijderen
  17. Super! Vooral die heb ik al toegepast op mijn blog!
    De rest ga ik opslaan in mijn archief, lees hoofd, voor als ik nog eens aan de slag wil!
    Dank je wel
    Groetjes Sofie

    BeantwoordenVerwijderen
    Reacties
    1. Oeps, en nu typte ik dat 'haakje, uitroepteken, haakje' en komt het hier ook niet te staan, hahaha. Want daar had ik het over ;-)

      Verwijderen
  18. Bedankt voor al de tips, ik probeer deze momenteel in de praktijk om te zetten, maar ben een echte blogger dummie. Het sjabloon van mijn blog is "eenvoudig" en ik slaag er niet in om hier het lettertype of titelkleur aan te passen. Kan dat aan dit sjabloon liggen?

    BeantwoordenVerwijderen
    Reacties
    1. Ik denk niet dat het aan het sjabloon ligt. Je kan het lettertype veranderen bij sjabloon en dan eentje kiezen uit de lijst. Ook via Google fonts kan je het lettertype veranderen. Als je dit doet via de link die ik hier boven meegeef, moet je wel opletten wanneer je de code in je template plakt: Je moet zelf een / typen achteraan de code, net voor > Als je dit niet doet, zal het niet lukken.
      Veel succes!

      Verwijderen
  19. Wat ben ook ik je dankbaar voor je erg interessant info! het blijft wel een heuze zoektocht om alles te krijgen zoals we het willen maar jouw info is echt een hulp

    BeantwoordenVerwijderen
  20. Is er een reden waarom je er voor kiest een link in je tekst niet te laten openen op een nieuwe pagina?

    BeantwoordenVerwijderen
    Reacties
    1. Nee, want eigenlijk ging ik er vanuit dat links op een nieuwe pagina opende. :-) Dus bedankt om me er op te wijzen, ik heb het meteen aangepast!

      Verwijderen
  21. Super hard bedankt voor deze nuttige tips! Ik heb mijn blog er serieus mee kunnen aanpakken, wat nodig was! Ik ben nog wel op zoek naar iets... Hoe kan je de berichtvoettekst aanpassen? Bij mij zie je alle symbolen van social media in een grijs vlakje en daar kan je ook de reacties openen... Enig idee hoe ik die symbolen wegkrijg en ik de tekst 'reacties' kan veranderen?

    BeantwoordenVerwijderen
    Reacties
    1. Hey Dominique,

      Ik ben net even een kijkje gaan nemen op je blog en dat ziet er super uit. Mooi, fris en overzichtelijk!

      Om de berichtvoettekst te veranderen ga je naar Blogger > indeling > blogberichten > bewerken Hier kan je aanvinken wat je wel en niet in je berichtvoettekst wil. De kleur kan je wijzigen bij sjabloon > aanpassen >geavanceerd > berichtvoettekst

      Hopelijk helpt dit, groetjes!

      Verwijderen
  22. Beste Annelies,
    Jouw blog ziet er echt mooi uit.
    Dank je wel voor de vele tips. Ik ben 2 weken geleden begonnen met mijn eerste blog (Blogger) en leer snel bij, mede dankzij een aantal handige blogs met goede tips, waaronder de jouwe.

    Ik worstel met een paar dingen:
    NAVBAR: ik had al uitgevonden dat ik dat lelijke ding kan uitzetten. Maar... als ik dat doe, zie ik de inlogknop niet meer!!! Ik kan de knop om naar Ontwerp te gaan dan ook niet meer vinden. Heb je een tip voor me?

    LEES VERDER knop
    Ik heb in een concept bericht een jump break toegevoegd. Als ik kijk naar Voorbeeld, zie ik nog steeds de hele tekst? Hoe kan dat?
    Bij Instellingen/overig heb ik bij Blogfeed toestaan 'Tot jumpbreak'ingesteld.
    Vergeet ik nu nog iets? Waarom zie ik de lees verder knop niet?

    Sinds gisteren verschijnen in de tekst van mijn pagina's opeens de titel van die pagina. Volgens mij was dat eerst niet. Ik vind het lelijk. Kan jij mij daarbij helpen?

    Ik hoop dat je me op weg kan helpen. Heb de hele avond gegoogled, maar kom er niet uit.

    Groetjes, Stephanie

    BeantwoordenVerwijderen
  23. Deze reactie is verwijderd door de auteur.

    BeantwoordenVerwijderen
  24. Hi Annelies,
    Inmiddels heb ik mijn problemen met navbar en jump break opgelost (een oefenblog aanmaken helpt toch wel...).
    Weet jij ook hoe ik dat lelijke Startpagina onder aan elke pagina kan verwijderen? Jij hebt zo'n mooie zwarte pijl omhoog. Gaaf!
    Misschien kan je uitleggen hoe je dat doet?
    Groetjes Stephanie (365roadtrip.blogspot.nl)

    BeantwoordenVerwijderen
    Reacties
    1. Hoi Stephanie, voor de pijl gebruikte ik deze tutorial:
      http://www.mybloggertricks.com/2011/09/smooth-scrolling-to-top-button-for.html

      Om 'startpagina' te verwijderen, kan je onderstaande tutorial volgen. Daarmee verwijder je de 'home' knop en ik ga er vanuit dat dat de 'startpagina' knop in het Nederlands is.
      http://smallbusiness.chron.com/delete-home-button-blogger-53051.html

      Een jumpbreak is inderdaad niet zo moeilijk en de navbar gebruikte ik nooit om in te loggen. Ik heb gewoon een link naar mijn blogger-dashboard bij mijn bladwijzers in de browser staan. Fijn dat je het ondertussen zelf hebt kunnen oplossen!

      Nog veel succes met de blog en jullie aankomende reis! Groetjes, Annelies

      Verwijderen