New Metro Style Social Media Widget for Blogger Blogs for 2013

Live Demo

Related Recommended Reading : Social Sharing Widget

                                              Lets decorate your Blogger blog with a beautifully designed social media widget. This widget is called Metro Style Social Media Blogger Widget and allows you to place your social profile links of Facebook, Twitter, Google+ and Feedburner with beautiful CSS effects. This widget is cool in several aspects as it occupies a smaller space on your blog and reflects a decent appearance. Your visitors will be attracted by this widget and they will follow you on social profiles as well as will subscribe for latest content on Feedburner. Before adding the widget to your blog, you would surely like to see it in action that how it will look like on your Blogger blog.

How to use this code in Blogger :

1. Sign-in to Blogger dashboard, select your blog, download a backup of its template and then edit its HTML (if you don't know, how to edit Blogger templates.

2. Now find ]]></b:skin> by pressing Ctrl+F and paste below CSS code just above ]]></b:skin>

    .widget-item-control a{display:none;}

    .widget-item-control a{display:none;}

    #supportive{width: 300px;

    float: left;margin-top: 10px;}

    #supportive li{position:relative; cursor:pointer; padding: 0 !important;}

    #supportive .facebook, .googleplus, .rss, .twitter{

    position: relative;

    -moz-transition: all 0.4s ease-in-out;

    -webkit-transition: all 0.4s ease-in-out;

    -o-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

    z-index: 5;

    display: block;

    float: left;

    margin: 1px;}

    #supportive .icon{overflow:hidden;}

    #supportive .facebook{width: 147px;

    height: 150px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg00UCvq5eQQA0yGs-IrI6zUBGj9Xx_5U5ueoKctxTBs2I_-BXEJsyWpVcZ6JuwvpJ0QA5y0rk1YwEvIk-Vmq6jiXWzo4HCgDdMXmMVIfmhab7SK0Ou26FGyCL-M_fQqhKm5lI3vhaNX10/h120/facebook.png") no-repeat center center;}

    #supportive .twitter{width: 148px;

    height: 74px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYSQOp07neDHkdQYzjMl7EugQWlWeNYMknbrmKb1bg_dAV4Bt7vFtb_AXAoC4QDEqFkR9cWVuTW2xGLjirJrwCzqM3BMdcoaJUyps8Fe7nqgkvJ9oLFRz9EuznF1MWZBgjdrWjTg8FLQAP/s1600/Twitter.png") no-repeat center center;}

    #supportive .googleplus{width: 148px;

    height: 74px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ARYLrss9T3EpxUj7QZdNAgJPOhnBqjdSUVznxw_S8_cOvXxiS9K2KE0T-DQf_8tQe4qM2ivdW_xbmaI6zmi7gu2B_kvF61bEEUtklYcpO_g7MTC2SppTzlaGlVdrlZ898vaMeSs4HfBa/s1600/google+plus.png") no-repeat center center;}

    #supportive .rss{ width: 299px;

    height: 74px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSD6dkSJFGIyaMJmR1ZQhYiuRSCw9zdasLCzLX6RULx3wBMXwt8RYGADeagMIMQN4dIBOABRsRHBLzkAfguE96OM_eM9jHK6SGBgV5Ca0LzwzFo4tuXN5C-bo2ZfdbuklK-Xzmo2T7xuo8/s1600/rss.png") no-repeat center center;}

    #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

    #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3EvBx4i6VauaBQnCGNJ9i0tU59SWPlhANVdYb9cVO3aCqfNJ6IMcIFLEMzfhHUOn7rrmZsOM6l78Y-Px1hNVP_QSb_eVabEK1xGmUbtt5oGxV_MMwXcb0bHke8mcQFxPGw8ChQhbXqgc/h120/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

    #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin5gM8UlJf8FpE4BlNukNoknLe_xzU9f8UBCu7vnKeen2qdHRtbcn6MNuatrmY9GzlcTpOBJdZgaYbF94-zuSaVxZXfb3BPg-_rRrQu8G6vNytixsvot1i-bp6WLOYYATP9rl7URO8JH0/h120/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

    #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5pGk9V_ySgMin_c1AaAlFm79fEjbawocujfdBr4b8suLDieHIryzT-OpEhK5xubzpjiW3TiAdW_Y5nBlHE-j2VMVZMDka0mV6mh6b60lqPQBCH4Oci7aj55WO3O3Hi1Fhgy3q1lpfJo8/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

3. After pasting the code, save your template and close editor
4. Now go to your blog's layout and add a new gadget by selecting HTML/Java Script with below provided code. Add it to your sidebar which is best suited place for this widget.

<ul id='supportive'>

<li><a class='icon facebook' href='http://www.facebook.com/FaceBookPage/'/></a></li>

<li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li>

<li><a class='icon googleplus' href='https://plus.google.com/GooglePlusUser/PageID/'/></a></li>

<li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurnerUserName'/></a></li>

</ul>

5. After pasting the code in the box, replace highlighted values with your ones and save your gadget. You are all done!!

Note : Please keep it in mind that the CSS code of this widget defines its width as 300px. If your sidebar's width isn't 300px and the widget looks ugly, please modify the CSS code. If you can't do it by yourself, comment below and tell us about what should be the width of the widget for your blog. We will fix it for you.

End.

[ content source : SupportiveHands ]