FACEBOOK AND OTHER SOCIAL MEDIA GADGET FOR BLOGGER

HaiThis 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. 

• Go to Blogger Dashboard
• Now click on Layout tab
• There, you will see option to Add a Gadget, click on it
• Now a pop-up will appear
• Select the HTML/JavaScript gadget from the list
• 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.

• Go to Blogger Dashboard
• Click on Template tab
• Click on Edit HTML button, and proceed
• Using Google Chrome default search feature (Ctrl+F) find </head>
• 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/AVvXsEhHv-6KziUhfk10fqJsQw7KLHG_dq6MlIVazKHpQ8KCqvUJuJ7-dNEBq7k4wkXCGeCsyzPWXbUFbKnE2WFjhJPsZWrLwWAJngYcCdGZKT-ScJD_6iLpVjL0Qz93Zhx9rKH36lc-d-b27jdt/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>