Zelf vind ik het echt een super leuk effect hebben, wanneer je met je muis over social media icons gaat op een blog (of andere website) en ze verkleuren of veranderen van vorm. Dat ik dit op mijn ‘nieuwe’ blog ook wilde toepassen wist ik al, maar was even vergeten hoe dit moest. Het leek me leuk om je dit ook te leren, zodat je dit op je eigen blog ook kan invoegen! In dit artikel lees je hoe je zelf hover social media icons maakt en toevoegt aan je blog!
- Wat belangrijk is voor dit effect is dat je social media icons nodig hebt in twee kleuren (of vormen) die hetzelfde formaat hebben. Dit zorgt voor het leukste effect. Je kunt er voor kiezen om een social media icon (bijvoorbeeld het Facebook-logo) te laten verkleuren (van zwart naar Facebook-blauw, of een kleur die past bij je blogt), de achtergrond te laten verkleuren (van wit of transparant naar bijvoorbeeld paars) of in een compleet ander plaatje, maar dat vind ik persoonlijk minder mooi. Voorbeelden van social media icon-sets die je kunt gebruiken zijn bijvoorbeeld deze, deze of deze. Je kunt alle sets gebruiken die je tegenkomt (of zelf maken), maar dit zijn even wat voorbeelden die je zou kunnen gebruiken.
- Bewerk de social media icons zoals jij dat voor je ziet. Maak een mapje aan op je computer, sla in het mapje de icons op die je als eerste ‘ziet’ op je website op onder ‘Facebook-A’, ‘Twitter-A’ of een andere aanduiding waaruit blijkt dat dat het het ‘eerste’ is wat je ziet. De andere plaatjes, die je zult zien wanneer je met de muis over de plaatjes heen gaat, sla je op als ‘Facebook-B’, enzovoort. Het is handig als de icons alvast even groot zijn, maar is dit niet het geval is het ook geen ramp. Ik kies voor de volgende twee icons:
- Ik wil graag dat je in eerste instantie het witte logo van Instagram ziet en dat de blauwe waas verschijnt zodra iemand er met de muis overheen gaat. Daarvoor ga ik de afbeeldingen eerst uploaden via een website zoals Flickr of Photobucket. Je kunt er ook voor kiezen om de afbeeldingen te uploaden via WordPress, dan staan de plaatjes op de server van je eigen website (klik hiervoor op Media in de wp-admin). Je kunt de links van de foto’s vinden wanneer je op de afbeelding klikt aan de rechterkant onder ‘URL’.
- Hiervoor maak ik in WordPress een widget aan. Dit kun je vinden in de wp-admin bij Weergave > Widgets. Sleep uit de linkerkolom de Widget ‘Tekst’ naar de lijst rechts. Dit is waarschijnlijk de sidebar van je website, tenzij de maker van je thema er voor heeft gekozen om andere locaties te kiezen voor je sidebar. Wanneer je klikt op de Tekst-widget verschijnt er een wit veld waar je kunt typen.
- Nu komt de code! Toets het volgende in het witte veld:
<a title="Follow on Instagram" href="https://SOCIAL MEDIA.com/GEBRUIKERSNAAM" target="blank"> <img onmouseout="this.src='LINK INSTAGRAM-A'" onmouseover="this.src='LINK INSTAGRAM-B'" src="LINK INSTAGRAM A" alt="Follow on Instagram" /></a>
- Vergeet niet om de ‘bruine gekleurde tekst aan te passen naar de link die hoort bij jouw social media-kanaal en aan te passen naar de link van jouw afbeeldingen. De afbeelding (en dus link) van het beeld wat je als eerste te zien krijgt gebruik je twee keer (voor ‘gewoon’ en voor als de muis er weer afgaat) en de link voor de tweede afbeelding gebruik je één keer (voor als de muis er overheen is). Achter de schermen ziet mijn link er zo uit:
<a title="Follow on Instagram" href="https://instagram.com/annesolveignl" target="blank"> <img onmouseout="this.src='http://annesolveig.nl/wp-content/uploads/2016/08/Instagram-A.png'" onmouseover="this.src='http://annesolveig.nl/wp-content/uploads/2016/08/Instagram-B.png'" src="http://annesolveig.nl/wp-content/uploads/2016/08/Instagram-A.png" alt="Follow on Instagram" /></a>
- Klik nu op ‘Opslaan’ in de widget modus. Als je alles goed hebt gedaan – dus netjes hebt gekopieerd, let met het invullen van je eigen links goed op de ‘ en “, verwar deze niet en verwijder ze ook niet. Dan werkt de code niet meer! Als je nu naar je blog gaat zie je in je sidebar dit, mijn plaatje is even extreem groot, maar dan kun je het wel even goed zien! Voor een social media icon gebruik je meestal een afbeelding dat kleiner dan 50px breed is, zo zijn die van mij in de sidebar 16px.
Natuurlijk is het mogelijk om deze code toe te passen voor verschillende social media-kanalen. Je kopieert dan de code en verandert de link naar je social media-kanaal en bijpassende afbeeldingen. Zo simpel is het! Het ziet er even ingewikkeld uit, maar met netjes kopiëren en juist invullen heb je binnen een mum van tijd leuke social media-knoppen. Succes! En mocht je ergens tegenaan lopen, mail me gerust!
