Many themes and templates already include a set of social media icons or buttons. But perhaps you don’t like the ones with your template, or you don’t like where they are by default position and want to set up your own. Setting them up in a nice neat row can also free up valuable space on your sidebar. However, that can be pretty confusing unless you know what to do exactly.
Fear not – all the code you need is uploaded below, and you can follow through the “step by step” for how to add pretty social media buttons to your site, watch in the guide tutorial video. Do enlarge the video or show it full screen in high resolution so you can follow through. And before you know it, blog prettiness (and practicality), and social media followers can be yours.
Here is the code used in the video. Copy and paste this into your widget and then replace the capital letters with your own social media addresses, the link for your icons and the hover text. It’s really not as complicated as it looks – the video will show you how.
| <!--social media icons---> <center> <a href="http://FACEBOOK PAGE ADDRESS HERE" target="_blank"> <img src="DIRECT LINK FOR FACEBOOK ICON HERE" border="0" alt=" facebookicon"/ title="TEXT ON HOVER HERE"></a> <a href="http://TWITTER ADDRESS HERE" target="_blank"> <img src="DIRECT LINK FOR TWITTER ICON HERE" border="0" alt=" twittericon"/ title="TEXT ON HOVER HERE"></a> <a href="http://PINTEREST ADDRESS HERE" target="_blank"> <img src="DIRECT LINK FOR PINTEREST ICON HERE" border="0" alt=" pinteresticon"/ title="TEXT ON HOVER HERE"></a> <a href="http://GOOGLE PLUS PAGE ADDRESS HERE" target="_blank"> <img src="DIRECT LINK FOR GOOGLE PLUS ICON HERE" border="0" alt=" googleplus icon"/ title="TEXT ON HOVER HERE"></a> <a href="http://YOUTUBE CHANNEL ADDRESS HERE" target="_blank"> <img src="DIRECT LINK FOR YOUR TUBE ICON HERE" border="0" alt=" youtubeicon"/ title="TEXT ON HOVER HERE"></a> <a href="mailto:YOUR EMAIL ADDRESS HERE"> <img src="DIRECT LINK FOR EMAIL ICON HERE" alt="Click to email me" title="Click to email me"></a> </center> |
