HTML tutorial

Vandaag een Html tutorial. Ik heb sinds kort social media buttons met mouse over effect. Zo dat is een hele mond vol! Ja, ze zijn licht blauw als je ze zo ziet maar als je er met je muis overheen gaat wordt hij grijs en als je er op klikt kom je bij mijn social media account! Zelf vind ik het heel leuk! Vandaag leg ik uit hoe dat moet!

Ik zal eerst even uitleggen hoe je social media icons maakt ZONDER mouse over effect (dus 
gewoon een kleur):

1. Zoek op google een social media icon dat je wilt gebruiken of maak er zelf heen (met bijvoorbeeld paint, picmonkey of photoshop)

2. Verklein de afbeelding, anders heb je zo meteen huge social media icons, en dat wil je natuurlijk niet!

3. Ga naar http://nl.tinypic.com/ en upload je foto

4. Nu moet je de direct link voor lay-outs nemen. Deze plak je in deze code op de plek waar direct link foto staat:  

<a href="link social media account"< img src="direct link foto" />

5. Nu neem je deze code en ga je naar je social media account. De link kopieer je en zet je op de plek waar nu het dik gedrukte link social media account staat. Let op, laat de “ “ staan!

6. De social media button is nu klaar. Ga naar blogger >> Indeling >> gadget toevoegen >> HTML/ Javascript. Plak de code en sla hem op

7. Als je meerdere social media buttons wil moet je alle codes in een tekst vakje plakken, anders komen ze onder elkaar te staan!

8. Klaaar!

 Dat was de makkelijke versie. Als je graag wilt dat de social media icons van kleur veranderen als je er over heen gaat (hover effect/mouseover) dan moet je de volgende tuttorial even volgen!

1. Zoek op google een social media icon dat je wilt gebruiken of maak er zelf heen (met bijvoorbeeld paint, picmonkey of photoshop). Je hebt de afbeelding ook in een andere kleur nodig, of in iedergeval veranderd, het tweede plaatje wordt namelijk dat wat je ziet als je met je muis over de knop heen gaat.

2. Verklein de afbeeldingen, anders heb je zo meteen huge social media icons, en dat wil je natuurlijk    niet!

 dit ^^ zijn die van mij :).

3. ga naar http://nl.tinypic.com/ en upload je eerste afbeelding (die je dus het eerste ziet)

4. Nu moet je de direct link for lay-outs nemen. Deze plak je in deze code op de plek waar directe url van eerste foto staat (je moet hem dus op twee plaatsen neer zetten):

<a href="Url waar de button naar toe verwijst" target="blank" title="omschrijving link">

<img src="Direct url van eerste foto" border="0" onmouseover="this.src='Direct url foto waneer je er overheen gaat'"onmouseout="this.src='Direct url eerste foto'"/></a>

5. Nu upload je de tweede foto (die zie je als je met de muis over de knop heen gaat). Ook hier van gebruik je de direct link for lay-outs. Die plak je op de plaats waar nu directe url foto wanneer je er over heen gaat staat. Let op: Laat de “ “ weer staan!

6. Zet op de plaats waar Url waar button naar toe verwijst de link naar je social media account de link. Geef de link ook een omschrijving, Bloglovin  bijvoorbeeld.

7. De social media button is nu klaar. Ga naar blogger >> Indeling >> gadget toevoegen >> HTML/ Javascript. Plak de code en sla hem op.

8. Als je meerdere social media buttons wil moet je alle codes in een tekst vakje plakken, anders komen ze onder elkaar te staan!

9. Klaaar!

Als jullie nu nog vragen hebben, hier over of er lukt iets niet, stel ze vooral ♥

Liefs, Daniëlle