Social Media Icons

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 perhaps you don’t like where they are by default 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.
Fear not – all the code you need is below, and you can follow through the step by step for how to add cute social media buttons to your site, in the 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>

If you need to make your icons smaller so that they will all fit in one row, set the size using width=XXpx where xx might be typically 40-62 pixels, or smaller if you have a narrow sidebar or a lot of icons.  The smaller the number = the smaller the icon.