Tips | Je lay-out aanpassen in Blogger deel II

3.11.13

Mijn vorige artikel waarin ik jullie handige tips & tricks gaf voor het aanpassen van je lay-out in Blogger, is één van mijn meest gelezen artikelen ooit. Ik krijg nog steeds regelmatig via de mail vragen van bloggers over hoe ze nu net dat ene knopje of dat ene lettertype op hun blog krijgen. Vandaar dat ik vandaag een deel 2 van dit artikel maak waarin ik jullie gestelde vragen beantwoord!



Je eigen social media buttons maken + plaatsen
 Social media is ontzettend belangrijk voor je blog en je wilt natuurlijk dat je volgers jouw blog op alle mogelijke manieren kunnen volgen! Ook ik heb een rijtje met social media buttons op mijn site. Ik wissel regelmatig af, de buttons die ik nu heb, heb ik gewoon van Google afgehaald. Je typt op Google "social media buttons" in en je krijgt vanzelf een heleboel mogelijkheden als je bij afbeeldingen kijkt.


Meestal staan alle buttons dan bij elkaar, maar als je ze straks werkend wilt laten maken op je blog, is het belangrijk dat je ze één voor één uitsnijdt en opslaat. Dit doe ik altijd in Photoshop, maar je kunt hier ook gewoon Paint voor gebruiken.


Je slaat de afbeelding op en opent hem in Paint. Vervolgens gebruik je de "Bijsnijden-tool" om de knoppen één voor één uit te snijden. Je kunt hier ook al de grootte van de knop aanpassen bij "Formaat wijzigen" zodat je zeker weet dat hij op je pagina past. Deze sla je per stuk op.

Vervolgens ga je de buttons op je site plaatsen en werkend maken, zodat als je erop klikt je bij de juiste social media pagina uitkomt.
Je gaat naar het Dashbord van Blogger en kiest daar voor "Indeling". Je ziet daarna als het goed is de indeling van jouw blog. Je drukt op "Een gadget toevoegen" en vervolgens krijg je een hele lijst met gadgets. Je kiest daar voor de optie HTML/JavaScript. Als het goed is verschijnt het volgende scherm:




Daar plak je deze HTML-code in: <a href="URL Pagina"><img src="URL IMG" /></a>

Stel dat je vijf buttons wilt plaatsen, dan plaats je deze code ook vijf keer..
Waar nu "URL Pagina" staat, plak je de URL link van de pagina waar je wilt dat je naartoe gaat als je op de afbeelding klikt. Op de plaats waar nu "URL IMG" staat, plak je straks de link van het plaatje (de social media button).
Deze moet je eerst uploaden. Ik doe dat altijd via Tiny Pic. Je kiest het gewenste bestand en upload deze. Daarna verschijnen er vier links. Je hebt de onderste link, waar "Directe link voor lay-outs" staat. Deze link plak je op de plek waar "URL IMG" staat. Zo doe je dat bij alle plaatjes en dan sla je het op. Als het goed is verschijnen dan de social media buttons op je blog!

Hetzelfde verhaal geldt voor je menuknoppen. Deze heb ik zelf ontworpen in Photoshop, maar dit kun je ook heel gemakkelijk in Paint doen. Je maakt weer een nieuwe HTML/JavaScript pagina aan, gebruikt dezelfde HTML-code als hierboven en voilà: je hebt je eigen menuknoppen!

Social media buttons/plaatjes centreren
Ik heb mijn social media buttons gecentreerd staan, net als mijn menuknoppen, zodat het een wat mooier geheel wordt. Dit is heel makkelijk om te doen. Je gaat naar de HTML van de social media buttons, die je weer vindt bij de Indeling op Blogger. Het enige wat je hoeft te doen is vóór alle codes <center> te plaatsen en ná alle codes </center>. Hierna sla je je HTML weer op en dan staan alle codes gecentreerd!

Zoekbalk op je blog
Ik kreeg ook de vraag hoe ik een zoekfunctie op mijn blog heb gemaakt. Dit heb ik niet zelf gedaan, deze optie biedt Blogger je al aan. Je gaat weer naar de Indeling van je blog en kies "Een gadget toevoegen". Vervolgens kun je kiezen voor de optie "Zoeken in deze blog". Deze sla je op en dan verschijnt er een zoekbalkje. Mijn tip is om deze op een opvallende plek te zetten, net als je social media buttons.



Datumknop centreren
In mijn vorige artikel vertelde ik jullie al hoe je je blogtitel kunt centeren. Daarna kreeg ik ook een paar vragen hoe je de datumknop kunt centeren. 
Ga naar je Sjabloon in Blogger en klik op "Aanpassen". Kies daar voor de optie "Geavanceerd". Scroll helemaal naar beneden en klik op "CSS toevoegen". Plak daar de volgende code:

.date-header {
text-align:center;
}

Als je dit hebt gedaan, klik je op "Toepassen op blog". Als het goed is, is dan je datumknop gecentreerd!

Achtergrond plaatsen
Ik heb eigenlijk altijd een witte achtergrond gehad op mijn blog, maar sinds een tijdje heb ik een grijze. Deze heb ik gehaald van een hele leuke site waar je een heleboel toffe achtergronden kunt vinden. 
Het zijn allemaal simpele achtergronden, maar ik vind ook dat je achtergrond niet te druk moet worden. De site heet "Subtlepatterns.com". Je vindt hier genoeg achtergronden! Als je een geschikte achtergrond hebt gevonden, klik je op downloaden. Er wordt dan een ZIP bestand gedownload die je kunt openen. Daar open je het mapje met de naam van jouw achtergrond en kun je het plaatje opslaan.
Deze kun je vervolgens weer heel makkelijk uploaden via Blogger. Je gaat naar Sjabloon en kies "Aanpassen". Daar staat tussen de opties "Achtergrond" waar je je eigen achtergrond kunt uploaden.

Ik hoop dat ik jullie weer een beetje op weg heb geholpen! Mocht je nog meer vragen hebben, stel ze dan vooral in de reacties!

Deze blogs vind je misschien ook leuk:

66 reacties

  1. Wat een handig artikel weer! Fijn dat je zn soort artikelen maakt!

    BeantwoordenVerwijderen
  2. Dankjewel voor de tips, ik ga vanmiddag dan maar eens puzzelen om social media buttons te maken nu ik eindelijk weet hoe het moet! Liefs.

    BeantwoordenVerwijderen
  3. Super tof dat je dit doet Nicole :) alhoewel ik eigenlijk alles al wel wist reageer ik toch want ik denk dat je een hele boel meiden enorm helpt met deze artikelen :) Liefs, Demi

    BeantwoordenVerwijderen
  4. Bedankt! Hier ben ik echt zoveel mee! Hoe heet dat 2de lettertype dat je in de eerste foto gebruikt hebt? Ik vind het heel mooi :)

    BeantwoordenVerwijderen
    Reacties
    1. Dankjewel voor je reactie! Fijn dat je er wat aan hebt! Het lettertype dat ik heb gebruikt heet KG Eyes Wide Open. Deze is gewoon gratis te downloaden via Dafont.com

      Verwijderen
  5. Die social media buttons, je hebt het handig uitgelegd. Bij mij staan er wel een paar maar niet naar m'n zin (lees: ze snapte het niet haha); ik ga dus weer eens een poging wagen Thanks.

    BeantwoordenVerwijderen
  6. Wauw wat een ontzettend handig artikel! Hier ga ik ook even goed voor zitten, want het is onwijs handig. Dankjewel dat je deze tips deelt en zo fijn hebt uitgelegd! Ik klik nog even door naar deel 1 :)

    BeantwoordenVerwijderen
  7. Ik vind dit artikel en ook de vorige uit deze serie zo fijn! Ze helpen me echt ontzettend erg, ik hoop dat je er nog wat meer zult maken!

    BeantwoordenVerwijderen
  8. Wat een superhandig artikel, goede tips! Zelf heb ik html geleerd voor websites in het algemeen, dus soms is het nog even goed uitzoeken welke codes blogger gebruikt aangezien het niet altijd overeenkomt met wat ik gebruik..
    En een ding: moet bij de code voor social media buttons enzo er niet nog <a voor? want nu open je de linkcode niet maar je sluit 'm wel af? :)

    BeantwoordenVerwijderen
    Reacties
    1. Oh bedankt voor de oplettendheid! Dat klopt inderdaad niet, was een typfoutje. Heb het meteen aangepast!

      Verwijderen
  9. Wat een super handig artikel! Dit ga ik zeker nog een keertje gebruiken!

    BeantwoordenVerwijderen
  10. Hele handige tips, Nicole. Heel erg bedankt! Liefs

    BeantwoordenVerwijderen
  11. Hele handige tips weer! :) Echt fijn dat je deze met ons deelt.

    BeantwoordenVerwijderen
  12. Wat een handig artikel! Leuk dat je zulke dingen uitlegt en deelt.

    BeantwoordenVerwijderen
  13. Super handige tips, ga er zeker gebruik van maken!

    BeantwoordenVerwijderen
  14. Oh ik ben echt heel blij met jou! Ik zat toevallig ontzettend te tryharden deze week voor die buttons!

    BeantwoordenVerwijderen
  15. Super handige tips, heel erg bedankt Nicole :) Liefs

    BeantwoordenVerwijderen
  16. Wat een goede tips zeg! Dit artikel ga ik weer eens onthouden.

    Liefs, Mariette

    BeantwoordenVerwijderen
  17. Oh wat handig dit! Die vorige heb ik gemist maar ga ik ook maar eens even bekijken:)

    BeantwoordenVerwijderen
  18. Wauw superhandig! Ik ga het gelijk proberen :)

    BeantwoordenVerwijderen
  19. Wauw, zo lief dat je deze informatie met ons deelt! Ik heb hier echt ontzettend veel aan, ik ben toevallig net bezig met social media buttons en menuknoppen vervangen en stoorde me ook aan het feit dat mijn titel niet gecentreerd staat maar mijn tekst wel. Dankjewel!

    BeantwoordenVerwijderen
  20. Ik zie dat je Subtle Patterns hebt gevonden ;-) En wat betreft het 'halen' van buttons van Google: mocht je dat doen dan is het altijd netjes om de bron te vermelden! Wel zo fair tegenover de maker van de button :-)

    BeantwoordenVerwijderen
  21. Echt heel handig deze tips, dankjewel! Ik heb het één en ander toegepast, ook uit je vorige blogpost, en ben nu zeer tevreden over de layout van mijn blog haha :)

    BeantwoordenVerwijderen
  22. Super leuk en handig! Ook heel leuk dat je de tijd hebt genomen om dit zo uitgebreid uit te leggen, ik en veel andere bloggers hebben daar veel aan. :)

    BeantwoordenVerwijderen
  23. Handig! Ik wil ook al zo lang een achtergrond, maar bij mij worden de posts en de blokken aan de zijkant niet wit zoals bij jou.. Hoe heb jij dat precies gedaan?

    X

    BeantwoordenVerwijderen
  24. Wat een ontzettend leuk artikel Nicole! Hier zullen veel mensen iets aan hebben :).

    BeantwoordenVerwijderen
  25. Aah, echt heel erg bedankt! Ik was al een tijdje aan het bedenken hoe ik zulke Social Media buttons op mijn blog kon zetten, en nu is het gelukt! Echt top, ik heb er superveel aan gehad.
    :D
    Liefs, Suzanne.

    BeantwoordenVerwijderen
  26. Nice! veel van deze codes heb ik zelf ook gebruikt :) Je lay-out nu is echt super mooi trouwens!

    BeantwoordenVerwijderen
  27. Als beginnende blogger is dit een handig artikel. In het begin komt alles een beetje op je af, vond ik in ieder geval;) Je bent handig met dit soort dingen. Liefs

    BeantwoordenVerwijderen
  28. Ik vind het achtergrondje van je blog ook echt perfect; mooi subtiel! Liefs

    BeantwoordenVerwijderen
  29. Ontzettend handing, ga er meteen mee aan de slag!! Thanks!
    Liefs,Emma

    BeantwoordenVerwijderen
  30. Lief dat je tips geeft aan anderen :)

    BeantwoordenVerwijderen
  31. Leuke tips. Vind het altijd veel aangenamer om naar een mooi verzorgde layout te kijken als ik een blog lees. Dus keep on spreading the tips! ^^
    x

    http://lovelifelovefashion.be

    BeantwoordenVerwijderen
  32. Wauw!!
    Enorm bedankt voor de buttonstips!
    Fijn om te zien dat je ook echt wat met je 'mail post' doet!
    Je hebt er een nieuwe fan bij hihi

    BeantwoordenVerwijderen
  33. Echt ontzettend handig, dankjewel!

    BeantwoordenVerwijderen
  34. Echt ontzettend handig! Ik ga even een bladlezer bij dit artikel zetten, dan kan ik er op een rustig moment even mee aan de slag. (:

    BeantwoordenVerwijderen
  35. Weer een super handig artikel! Weet je toevallig welke code je moet gebruiken om je 'Read More' knop aan de rechterkant te krijgen? Liefs!

    BeantwoordenVerwijderen
  36. Supergoed artikel! Ik ga het zeker uitproberen, want ik ken echt niets van HTML :-D

    Wat mij vooral stoort zijn de weergave van mijn foto's, die hebben altijd zo'n witte fotorand, maar ik wil gewoon mijn foto's zonder rand. Een tweede ding is dat ik al mijn foto's even breed wil weergeven (zowel rechtopstaande als liggende), maar dat weet ik dus ook niet te veranderen.

    Weet jij hoe dit moet? Als je even tijd hebt om een kijkje te nemen op mijn blog en misschien suggesties of aanmerkingen hebt voor mij zou dat echt super zijn!

    Groetjes! X Sara

    http://windowonmywardrobe.blogspot.be/

    BeantwoordenVerwijderen
  37. Leuk artikel, heb er veel aan gehad! Alleen het centreren van de buttons werkt niet bij mij, ik krijg ze dan namelijk onder elkaar wat niet helemaal de bedoeling is haha.

    BeantwoordenVerwijderen
  38. Weet je misschien hoe je een bezoeker gadget toevoegt?

    BeantwoordenVerwijderen
  39. Super handig alleen hoe maak jij je header ook transparant? Met welk programma maak je je header?

    BeantwoordenVerwijderen
  40. Echt een top artikel ! heb er heel veel aan gehad (:

    BeantwoordenVerwijderen
  41. Ik heb al heel veel aan je Lay-out artikelen gehad! Alleen, als ik mijn zoekbalk toevoeg, dan krijg ik als je zoekt een heel lelijk vlak bovenaan mijn blog, hierin staan dat de zoekresultaten. Hoe kan ik dat veranderen?
    charliesblogposts.blogspot.nl

    BeantwoordenVerwijderen
  42. Heel erg handig dankjewel! Zou je een keer uit willen leggen hoe je de top menubar hebt ingesteld?

    BeantwoordenVerwijderen
  43. Fijne tips, dankje! Ik vroeg me af hoe je het doet hoe iets in de menubar uitklapt als je de muis er overheen doet. Dus als bij jou als je de muis op 'Categorieën'of 'Volg Coco Gold' zet dan klapt hij uit en komen er allemaal links onder. Ik vraag me al een paar maanden af hoe dat nu moet en heb ook meerdere dingen geprobeerd, maar ik weet bijvoorbeeld ook niet waar ik op moet zoeken haha. Hoop dat je me kunt helpen :) liefs

    BeantwoordenVerwijderen
  44. Hee Nicole,

    Ik heb een vraagje. Hoe maak je van die witte blokken voor elke blog? Jij hebt gewoon een achtergrond ( creme ) en elke blog staat in een wit blok.
    Hoe doe je dat?

    Lfss

    BeantwoordenVerwijderen
  45. Goede tips! Ik heb nog een vraag: hoe krijg je de datum onder de post titel?
    xx

    BeantwoordenVerwijderen
  46. super bedankt voor deze tips! zocht al heel lang naar een uitleg over het centreren van je datum en berichtkop maar kon het nergens vinden. Dus heel erg bedankt, het is nu eindelijk gelukt!

    liefs Anouk

    www.lovefashionmuse.blogspot.com

    BeantwoordenVerwijderen
  47. Wauw, ik ben hier te blij mee, weet je heel heel misschien ook hoe je je menu met home, over mij en blabla moet centeren. Ik hoop dat je nog meer artikels hier over maakt je bent mijn held namelijk nu!

    BeantwoordenVerwijderen
  48. Hoi! Wauw, wat ben ik blij met deze tips, bedankt! Het lukt mij alleen niet om de afbeeldingen van de social media buttons te uploaden op tinypic.. Heb jij misschien enig idee hoe dit komt? Ik heb alles al geprobeerd maar het lukt me niet..
    Voor de rest echt super tips, hier zocht ik al een tijdje naar! (:

    BeantwoordenVerwijderen
  49. Wat een handig en overzichtelijk artikel is dit, ik denk dat veel bloggers hier veel aan zullen hebben. Ikzelf heb geen blog, maar ik vind het wel erg leuk om te schrijven over social media en online marketing enzo, dus wie weet begin ik er ooit eens een!

    BeantwoordenVerwijderen
  50. Super handig!! Ik ben echt een leek in dit onderwerp. Hoe fix je een mooie titel? (Bovenaan waar de naam van je pagina staat?

    BeantwoordenVerwijderen
  51. Bedankt! Superhandige tips. Misschien is het een beetje een oud artikel, maar ik heb alsnog een vraagje. En ik hoop dat je hem beantwoorden kunt. Mijn vraag is, Hoe kan je je 'Geen opmerkingen' balk ding, achtig iets centreren? Ik heb nu alles mooi in het midden, maar die opmerkingen willen maar niet meer werken. Dit staat heel lelijk en daar wil ik iets aan doen. Ik zoek nu al twee dagen heel internet af, maar geen enkele code werkt. Kan je helpen?

    Mocht je niet begrijpen wat ik precies bedoel met 'geen opmerkingen' als je op mijn site bent, valt het zeker op.
    www.beautybynienke.blogspot.nl

    BeantwoordenVerwijderen
  52. Super goed artikel! Titel en datum staan nu mooi in het midden! Weet jij ook hoe ik mijn tabbladen in het midden kan krijgen? Heeft iemand tips?

    www.easydailyfood.com

    -Marijke-

    BeantwoordenVerwijderen
    Reacties
    1. Trouwens, ik vind jouw reactiebox er mooier uit zien qua kleuren dan de standaard layout. Idee voor nog een artikel? :)

      Verwijderen

Volg mij op Instagram

De beste budgettips