How to Add Social Icons in blogger Sidebar

Adding the social bookmarking buttons at the top of your blogger post, will make things easier when your readers will want to share your posts via the networking sites. The widget includes buttons for Del.icio.us, Twitter, Facebook, StumbleUpon, Technorati and Digg. Any thing You Want

How to Add Social Icons in Blogger Sidebar





Add Social Media Icons to Blogger Sidebar

First and foremost log in to your Blogger Account >> Select a Blog >> Go to Layout >> Add a Gadget and select HTML/JavaScript gadget from the list of Gadgets. Copy the below code and Paste it in the empty widget box
 
 

<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://www.facebook.com/xxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsEnkYDNTA86PtsKhP2-ZqaxgI5GxSK0HvkjUXuiHZU4jhSIdCUawdeyuqaFOYxxVGBAViFgEum25eNovHv6LNV3zVJC24L-Fi8jMnplkUAsj-JUI9JlptAOldvTRX8g9aOZn5Z-VANL1N/s1600/facebook.png" /></a>
<a class="social-icons" href="https://www.twitter.com/xxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPUT3-ymPi7m5NmteOSFl1HCAM0ywN_bSItlL2JffI2cS0mUjJWxfLjHMZt7cmEJqdfVsXgHrE4I9zj6NfQYne9GKy4ys0lxDToH7auPORT-Ce0BxK7wFiX_IkLU7sDNJ60pZzgddJi8-x/s1600/twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/xxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2o4KmS4p8uly-dItTVIVoe4p3A3gNp5jSOIJTIhh9QB3s_g88LVyT_VIQYcs9eHQ6EUwVainEkSLxsLhX3YF-7o__WUy5-QaoZTmhwPBGb6ebOC0is1F-f08llzZSrpcxtmeCRs1bF2z/s1600/google+.png" /></a>
<a class="social-icons" href="http://feeds.feedburner.com/xxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPIuh-SV3WELtDoJGvocDfaf0Bh6mcl28TaFgAF9ZK06i7btrLFN1pKDsX2CNpvX9WQcpLYQlX-Z1IxbwmbEV0xk3BFAJn-VpVWr915tiIhqP_X3JrnEiKfBxc1S88HWAFmNHRDhHJkUb/s1600/rss.png" /></a>
<a class="social-icons" href="http://www.pinterest.com/xxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEKoisBjWqj34PMHRb8Bza9SwAcXmBIK5Zi979FxWi9TXj5zhCKsGUseZ1KyGn9cqcUhqeNjbMaGf2zLrySamK7HFyurQHHiPTlR0ivXu_8L3kR9C3iKrklV6iHL80noKeNXsdWmqmQAYS/s1600/pinterest.png" /></a>
</div></div>
 
 
 for Animation effect
over the icons you can add in the script, with the above code

<style>
#sidebar-subscribe-box{width:317px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:transparent repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:0px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
a.social-icons{margin-right: 5px;height:50px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
 

<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://www.facebook.com/xxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsEnkYDNTA86PtsKhP2-ZqaxgI5GxSK0HvkjUXuiHZU4jhSIdCUawdeyuqaFOYxxVGBAViFgEum25eNovHv6LNV3zVJC24L-Fi8jMnplkUAsj-JUI9JlptAOldvTRX8g9aOZn5Z-VANL1N/s1600/facebook.png" /></a>
<a class="social-icons" href="https://www.twitter.com/xxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPUT3-ymPi7m5NmteOSFl1HCAM0ywN_bSItlL2JffI2cS0mUjJWxfLjHMZt7cmEJqdfVsXgHrE4I9zj6NfQYne9GKy4ys0lxDToH7auPORT-Ce0BxK7wFiX_IkLU7sDNJ60pZzgddJi8-x/s1600/twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/xxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2o4KmS4p8uly-dItTVIVoe4p3A3gNp5jSOIJTIhh9QB3s_g88LVyT_VIQYcs9eHQ6EUwVainEkSLxsLhX3YF-7o__WUy5-QaoZTmhwPBGb6ebOC0is1F-f08llzZSrpcxtmeCRs1bF2z/s1600/google+.png" /></a>
<a class="social-icons" href="http://feeds.feedburner.com/xxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPIuh-SV3WELtDoJGvocDfaf0Bh6mcl28TaFgAF9ZK06i7btrLFN1pKDsX2CNpvX9WQcpLYQlX-Z1IxbwmbEV0xk3BFAJn-VpVWr915tiIhqP_X3JrnEiKfBxc1S88HWAFmNHRDhHJkUb/s1600/rss.png" /></a>
<a class="social-icons" href="http://www.pinterest.com/xxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEKoisBjWqj34PMHRb8Bza9SwAcXmBIK5Zi979FxWi9TXj5zhCKsGUseZ1KyGn9cqcUhqeNjbMaGf2zLrySamK7HFyurQHHiPTlR0ivXu_8L3kR9C3iKrklV6iHL80noKeNXsdWmqmQAYS/s1600/pinterest.png" /></a>
</div></div>
 
 
 
if you Don't like icon you change it by yourself 
search social icon on google
you have to copy picture in hard disk 
then follow the steps
 
here is step you can follow by pictures

Step 1:

 
 

Step 2


Step 3


Step 4


Step 5


Step 6


Step 7


Step 8


Step 9

 

Step 10

 


Step 11

 
 
 
Note:-
  • Replace https://www.twitter.com/xxx with your Facebook Fan page URL
  • Replace https://www.twitter.com/xxx with your Twitter Username
  • Replace https://plus.google.com/xxx with your Google+ Account URL
  • Replace http://feeds.feedburner.com/xxx with your RSS feed URL
  • Replace http://www.pinterest.com/xxx with your Pinterest Account URL
Hit the Save Button

 You've successfully added social media icons to your blogger blog.

hope that this article may have helped you in adding social media icons to your blog.
 
 Share this widget with your friends and don't forget to subscribe us!
 
Labels: