Facebook and other social media gadget for blogger

This tutorial will teach you how to create a good looking social media gadget for blogs

Social media buttons for blogger are very useful for visitor to connect with you on various social networks like Facebook, Twitter , Google+ etc. There are already these types of gadget for blogger in Blogger gadget list, but some people found it very non-stylish.


To make the button i will use CSS and HTML . You may paste the HTML code anywhere in your blog in layout tab, to do this follow some simple step. 

1. Go to Blogger Dashboard
2. Now click on Layout tab
3. There, you will see option to Add a Gadget, click on it
4. Now a pop-up will appear
5. Select the HTML/JavaScript gadget from the list
6. And paste this HTML code in it.

<div class="socialmedia-gadget">
<span><a href="YOUR-TWITTER-LINK" id="iconTwitter" target="_blank" title="Twitter">Twitter</a></span>
<span><a href="YOUR-FACEBOOK-LINK" id="iconFacebook" target="_blank" title="Facebook">Facebook</a></span>
<span><a href="YOUR-FEED-LINK" id="iconRSS" target="_blank" title="RSS Feed">RSS</a></span>
<span><a href="YOUR-YOUTUBE-LINK" id="iconYouTube" target="_blank" title="YouTube Channel">YouTube</a></span>
<span><a href="YOUR-GOOGLE+-LINK" id="iconGooglePlus" target="_blank" title="Google Plus">Google</a></span>
</div>

Remember to replace the link of Facebook,Youtube,Google+,Twitter and feed with your own profile links, save it and see your blog, the gadget is looking so simple, Isn't it ? So we will style it will the CSS. 


You may paste the CSS code in template, follow these easy steps.

1. Go to Blogger Dashboard
2. Click on Template tab
3. Click on Edit HTML button, and proceed
4. Using Google Chrome default search feature (Ctrl+F) find </head>
5. And paste this CSS code above the </head>

<style type='text/css'>
.socialmedia-gadget  
{
padding: 2em 0 1.5em 50px;
}
.socialmedia-gadget span a 
{
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81564fYMkOriEJSHba9Z3SSvN4eGf9vAJLWtEjVuNtlbXcx7MdfoWXZZI7cQ4GdaGkOKAbyn8finSRd10N3j-ixGzA8cQ5uo74C2MO8jdXzswZfVevdhHmJbXc73N9lBt1NHgTEcGb9QE/s1600/socialbuttons.png") 0 0 no-repeat;
}
.socialmedia-gadget span {
float: left;
display: inline;
margin-right: 8px;
}


#iconTwitter
{
background-position:-33px -33px;
transition:background-position .4s ease-in-out;
-webkit-transition:background-position .4s ease-in-out; 
-o-transition:background-position .4s ease-in-out; 
-moz-transition:background-position .4s ease-in-out; 
-ms-transition:background-position .4s ease-in-out; 
}
#iconTwitter:hover {
background-position: -33px 0;
}


#iconFacebook {
background-position: -66px -33px;
transition:background-position .4s ease-in-out;
-webkit-transition:background-position .4s ease-in-out; 
-o-transition:background-position .4s ease-in-out; 
-moz-transition:background-position .4s ease-in-out; 
-ms-transition:background-position .4s ease-in-out; 
}
#iconFacebook:hover {
background-position: -66px 0;
}


#iconRSS {
background-position: 0 -33px;
transition:background-position .4s ease-in-out;
-webkit-transition:background-position .4s ease-in-out; 
-o-transition:background-position .4s ease-in-out; 
-moz-transition:background-position .4s ease-in-out; 
-ms-transition:background-position .4s ease-in-out; 
}
#iconRSS:hover {
background-position: 0 0px;
}


#iconYouTube {
background-position: -99px -33px;
transition:background-position .4s ease-in-out;
-webkit-transition:background-position .4s ease-in-out; 
-o-transition:background-position .4s ease-in-out; 
-moz-transition:background-position .4s ease-in-out; 
-ms-transition:background-position .4s ease-in-out; 
}
#iconYouTube:hover{
background-position:-99px 0
}


#iconGooglePlus {
background-position: -132px -33px;
transition:background-position .4s ease-in-out;
-webkit-transition:background-position .4s ease-in-out; 
-o-transition:background-position .4s ease-in-out; 
-moz-transition:background-position .4s ease-in-out; 
-ms-transition:background-position .4s ease-in-out; 
}
#iconGooglePlus:hover {
background-position: -132px 0;
}
</style>

Pretty long CSS code, but useful too, remember paste this code above </head> in template, preview it, if it looks great save it.