Blogging & Career

Hoe verander je de kleur van je Bloglovin button

bloglovin counter aanpassen, kleur veranderen bloglovin counter, kleur veranderen bloglovin teller, kleur veranderen bloglovin button, change the color of bloglovin button, change color of bloglovin counter, wordpress, bloggerHet is iets dat mij veel gevraagd wordt; Hoe verander ik de kleur van mijn Bloglovin button? Het leek mij daarom handig om het stap voor stap uit te leggen in een artikel. Want; Zo moeilijk is het helemaal niet!

Om de kleur van je Bloglovin counter te veranderen, moet je natuurlijk eerst de button op je website zetten. De code hiervoor kan je vinden in je Bloglovin account bij “bloglovin button”. Klik bij één van de counters op: Get this icon! en kopieer de code die Bloglovin je geeft.

Deze code plak je op de plek waar je je counter wil hebben. Meestal is dat in de sidebar.

Nadat je de counter op je blog hebt gezet, is het tijd om te kleur aan te passen. Hoe je dit moet doen, is verschillend in Blogger en in WordPress. Daarom leg ik eerst uit hoe je de kleur veranderd in WordPress en daarna in Blogger.

De kleur van je Bloglovin counter veranderen in WordPress

1) Ga naar de plek waar je de code voor de counter hebt geplakt.

2) Plaats nu vòòr de code die je hebt gekopieerd van Bloglovin: <div class=”counter”> en helemaal achter aan de Bloglovin code </div> en klik op “save”.

3) Nu ga je naar je stylesheet. Deze vind je in WordPress onder: Appearance > Editor > Style.css

4) Scroll nu helemaal naar beneden in je stylesheet en voeg het volgende stukje code toe:

/* Hiermee verander je de kleur van je Bloglovin counter */

.counter {
-webkit-filter: hue-rotate(90deg) saturate(4);
filter: hue-rotate(90deg) saturate(4);
}

en klik op Update.

5) Nu kan je gaan spelen met de cijfertjes in dit laatste stukje code om de kleur van je button te veranderen. Zorg er wel voor dat de getalletjes in de bovenste rij altijd hetzelfde zijn als de getalletjes in de onderste rij.
Het getal voor “deg” past de kleur van de button aan en het getal achter saturate bepaald hoe intens de kleur wordt. Als je dit getal heel hoog maakt, zal je een button krijgen in een felle neon kleur.

Welk getal precies welke kleur geeft, wisselt bij iedereen een beetje en is ook afhankelijk van of je bij Bloglovin de roze of blauwe counter koos. Ik koos de roze button als uitgangspunt en krijg onder andere de volgende kleuren:

bloglovin counter aanpassen, kleur veranderen bloglovin counter, kleur veranderen bloglovin teller, kleur veranderen bloglovin button, change the color of bloglovin button, change color of bloglovin counter, wordpress, blogger

De kleur van je Bloglovin counter veranderen in Blogger

Bij Blogger heb je geen toegang tot de Css en is het dus niet mogelijk om je Bloglovin counter aan te passen op de manier zoals we het hierboven deden.

1) Ga naar de plek waar je de Bloglovin counter hebt geplakt.

2) Plaats nu vòòr de counter het volgende stuk code: <div style= “filter: hue-rotate(65deg)!important;-webkit-filter: hue-rotate(65deg);-moz-filter: hue-rotate(65deg);-ms-filter: hue-rotate(65deg);-o-filter: hue-rotate(65deg);”> en helemaal achter aan de code: </div>

3) Ook nu kan je weer de kleuren veranderen door de getallen voor “deg” aan te passen. Zorg er opnieuw voor dat alle getallen hetzelfde zijn. Dat zijn er dus in dit geval vijf. Verander je dus één van de getallen in bijvoorbeeld 15, dan moet je de andere vier ook veranderen in 15.

Omdat ik geen Blogger heb, kan ik deze manier niet voor jullie uitproberen, maar in princiepe zou je dezelfde mogelijkheden moeten hebben als in de WordPress tutorial. Het enige verschil is dat je in dit geval niet de felheid van de kleur aan kunt passen. Dit kan wel in WordPress.

Nu kan je dus altijd je Bloglovin Counter aanpassen bij de kleuren van je Layout.

Klikken jullie ook altijd veel sneller op een counter dan op een andere (bloglovin) volg button?

6 gedachten over “Hoe verander je de kleur van je Bloglovin button”

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *