Not seeing a Scroll to Top Button? Go to our FAQ page for more info.

Let's customize #2: your Blogger lay-out ♥

Hi!
Vandaag ga ik het over de lay-out van je blog in Blogger hebben. Ik werk met Blogger voor mijn blog en vind het heel fijn en handig, maar het is altijd leuk om via HTML ofzo nog wat extra dingen toe te voegen. Zelf kan ik daar echt niks van, dus heb ik aan de hand van artikels op andere blogs mijn blog gemaakt tot wat hij nu is... Ik vertel je o.a. hoe je social media buttons kan toevoegen, je scrolbalk veranderen, je cursor veranderen, een 'back to top'-button plaatsen, je artikel-titel centreren, ... Benieuwd? Lees mee!





Alle tutorials die ik gebruik komen van andere blogs die ik vermeld. De tekst pas ik aan, de afbeeldingen behoud ik.

♥ ♥ ♥

Social media buttons maken + plaatsen - Coco Gold

Social media buttons vind ik zelf echt super. Het zijn de 'knopjes' die je in de zijbalk van een blog vind, en wanneer je erop klikt, kom je op de social media pagina van de eigenaar of de blog. Superhandig, toch? Want social media is heel belangrijk voor je blog. De buttons die ik nu heb, heb ik gewon van Google afgehaald, maar als je creatief bent, kan je ze natuurlijk ook zelf maken. Je kan ze heel makkelijk in Google vinden als je 'social media buttons' intypt bij Afbeeldingen.


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 met Paint, dat werkt heel handig en het is gratis.



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". Dan druk je op "Een gadget toevoegen" en vervolgens krijg je een hele lijst met gadgets. Je kiest daar voor de optie HTML/JavaScript. Dan verschijnt het volgende scherm:






Daar plak je deze HTML-code in (bij 'inhoud'): <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 de link van het plaatje (de social media button).
Het plaatje 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. Nu staan de social media buttons helemaal klaar en werkend op je blog, op de plaats waar jij het 'gadget' hebt geplaatst!

♥ ♥ ♥

Blogtitel centreren - Coco Gold

In een standaard sjabloon staat de titel van een nieuw artikel meestal helemaal links van je pagina. Omdat mijn tekst zelf ook in het midden staat, vond ik het wel mooier dat ook mijn titel gecentreerd is, wat dus betekent dat de titel in het midden verschijnt.

In de HTML van jouw blog zoek je de volgende code: (Dit vind je door met je cursor in de HTML te gaan staan en vervolgens CTRL + F in te drukken. De code kun je kopiëren en in het zoekvakje plakken en dan op "Enter" te drukken)

]]></b:skin>

Als je deze code hebt gevonden, vervang je deze voor de volgende code:

h3.post-title { text-align:center; }

]]></b:skin>

Je slaat je sjabloon op en daarna is je titel gecentreerd!

♥ ♥ ♥

Scrolbalk veranderen - Luna's lovely world

Sinds kort heb ik ook mijn scrolbalk aan de zijkant van mijn blog aangepast, nu is hij in dezelfde kleur als mijn tekst en menuknoppen, en ik vind wel dat het er nu allemaal wat mooier uitziet, het past wat beter bij elkaar. 
Hoe verander je nu die scrolbalk? Ga naar Blogger > Sjabloon > Aanpassan > Geavanceerd > CSS toevoegen - en plak volgende code daar:

::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color: #eaeaea;
border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}

De breedte van je scrolbalk kan je nog aanpassen, bij 'width: 12px'. Het is maar net wat jij mooi vindt - wil je hem wat smaller ga dan voor bv. 10 px, wil je hem wat breder kan je voor bv. 16 px gaan. Ook kun je kleuren van je scrollbar aanpassen, en welke kleur je scrollbar heeft als je er met de muis overheen gaat, ... Dit doe je door de kleurcode (een code met cijfers en letters die voor een bepaalde kleur staat) te kopiëren en plakken bij de 'color'. Je kan er zelf wat mee spelen, experimenteer en kijk wat je mooi vindt.

♥ ♥ ♥

'Scroll to top'-button plaatsen - Luna's lovely world

Dit vind ik ook echt heel leuk en handig, en ik ben heel blij dat ik er ééntje heb - zo'n knopje waar als je erop klikt, je weer naar de bovenkant van je pagina gaat. Het is gefixt in een minuutje!
Je gaat naar Blogger > Sjabloon > HTML bewerken. Zoek volgende lijn op (CTRL+f  om een 'zoekbalkje' te openen in je HTML):

</body>

Daarboven (!) plak je één van de codes van de buttons op deze site. Dat is heel simpel, je kiest gewoon een button die je leuk vind en kopiëert en plakt de code die ernaast staat. Je slaat op en voilà, klaar!


♥ ♥ ♥

Je cursor (muis) veranderen - Noah 
Als eerste wil ik Noah héél erg bedanken, want zij is ook degene die mij veel tips heeft gegeven en mijn header heeft gemaakt :) 
Hoe verander je nu je cursor (muis-tekentje)? Je kan op internet verschillende cursors vinden, zoek bijvoorbeeld op 'cursor HTML'. Dan zoek je er een leuke uit en kopiëer je de HTML, dat is de code die ernaast staat.
Dan ga je naar je blog en klik je op 'Indeling' > 'Gadget toevoegen' > 'Tekst'. Daar plak je de HTML code, je slaat het op en dan heb je als het goed is je gekozen cursor!

♥ ♥ ♥

Een 'read more' knopje plaatsen - Ik :)
Ik kreeg al een aantal keer de vraag per mail hoe je nu zo'n read more 'button' kan plaatsen. Dat is helemaal geen button met moeilijke codes ofzo, het is gewoon een basisfunctie wanneer je je bericht typt. Het enige wat je hoeft te doen is op het 'in 2 gescheurde blaadje' te klikken, je vind het in je 'opmaakbalk' wanneer je een blogbericht typt, rechts van het 'video invoegen' knopje. Dan komt er een soort stippellijn in je bericht, en als je dan het bericht post, komt er op de plaats van de stippellijn 'read more' of 'meer lezen'!



Hopelijk had je er wat aan :) Stel gerust vragen als er iets niet lukt in de comments!
Liefs, Amber <3<3

No comments:

Post a Comment