WordPress Tip: Zwevende deelknoppen

met Geen reacties

sharing-buttons

Zwevende deelknoppen maken in WordPress

Via verschillende Facebook groepen zie ik regelmatig de volgende vraag voorbij komen, hoe maak ik deelknoppen voor sociale media? In dit artikel lees je een stappenplan met hoe je deze buttons zelf kunt toevoegen aan je website. We maken geen gebruik van een plugin die dit werk voor ons doet, maar we gaan zelf de deelknoppen in de website plaatsen.

Wat heb je nodig?
  • Dit zip bestand met icons
  • Basiskennis over de <head> sectie en hoe je hier code in plaatst binnen jouw theme (je kunt eventueel een plugin gebruiken)
  • Basiskennis HTML
  • Basiskennis over het toepassen van CSS binnen jouw thema

Aan de slag

Stap 1 - Icons downloaden

Download zip bestand met de social media icons

Stap 2 - Upload de icons naar je WordPress mediabibliotheek
Stap 3 - Plaats de onderstaande code in je <head> van je website

<!-- Social Icons -->
<ul id="social_side_links">
<li><a style="background-color: #3c5a96;" href="https://www.facebook.com/sharer.php?u=http://webstudioremon.nl/" target="_blank"><img src="//i0.wp.com/webstudioremon.nl/wp-content/uploads/2016/10/facebook-icon.png" alt="" /></a></li>
<li><a style="background-color: #1dadeb;" href="https://twitter.com/share?url=http://webstudioremon.nl/&text=Webstudio+Remon+Wij+laten+zien+wie+jij+bent!+&hashtags=" target="_blank"><img src="//i0.wp.com/webstudioremon.nl/wp-content/uploads/2016/10/twitter-icon.png" alt="" /></a></li>
<li><a style="background-color: #1178b3;" href="https://www.linkedin.com/cws/share?url=http://www.webstudioremon.nl/" target="_blank"><img src="//i0.wp.com/webstudioremon.nl/wp-content/uploads/2016/10/linkedin-icon.png" alt="" /></a></li>
<li><a style="background-color: #009688;" href="whatsapp://send?text=https://webstudioremon.nl/" data-action="share/whatsapp/share"><img src="//i0.wp.com/webstudioremon.nl/wp-content/uploads/2016/10/whatsapp-icon.png" alt="" /></a></li>
</ul>

Pas vervolgens aan naar je eigen voorkeur, vervang de image source naar de link van je geüploade icon bestand. (Let op, om deze handleiding zo simpel mogelijk te houden maken de buttons gebruik van één vooraf toegepaste link.)

Stap 4 - CSS plaatsen

De share buttons staan nu in je <head> en worden over de hele site toegepast. De knoppen moeten nog wel even gestyled worden. Neem de onderstaande code over en pas het aan naar eigen voorkeur.

/*Begin zwevende deelknoppen*/

#social_side_links {
position: fixed;
bottom: 10%; /*Dit is de afstand van de buttons vanaf de onderkant van je website*/
left: 0; /*kies left om de knoppen links te plaatsen, toets hier right in om de knoppen rechts te plaatsen*/
padding: 0;
list-style: none;
z-index: 99;
}
#social_side_links li a {
display: block;
}
#social_side_links li a img {
display: block;
max-width: 40px;
padding: 10px;
-webkit-transition: background .2s ease-in-out;
-moz-transition: background .2s ease-in-out;
-o-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
}
#social_side_links li a:hover img {
background: rgba(0, 0, 0, .2);
}

Stap 5 - Knoppen testen

Werken jouw buttons? Controleer het snel. Heb je de code goed toegepast maar verschijnen ze niet op je website? Maak dan je cache leeg. Succes met het promoten!

Gratis tips en handleidingen ontvangen?

Je naam:

Je email:

  

Volg Rémon Megelink:

Eignaar Webstudio Remon

Webdesign / Grafische Vormgeving / Student Marketing / Gadget Freak. Lievelingseten: Pizza :) Wil je kennismaken? Bekijk de contactpagina.

Laat een reactie achter