Metro Style Social Media Widget for Blogger Blogs

social-media-metro-style-widget-blogger
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. View its demo here.

Liked the widget? I hope you did so. If you have liked it, then you will surely want to add it to your Blogger blog. To do so, follow below simple steps:

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, learn now to edit your blog's template)
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://lh4.googleusercontent.com/-6tuOBGcpzGc/URPO_I2Yj9I/AAAAAAAAC_0/qBm56PAG1yY/h120/facebook.png") no-repeat center center;}

    #supportive .twitter{width: 148px;

    height: 74px;

    background: rgba(59,89,152,1) url("http://3.bp.blogspot.com/-hak4MMDUFy0/UQNWX7ZFzVI/AAAAAAAAFME/1-6Kt65O5Xk/s1600/Twitter.png") no-repeat center center;}

    #supportive .googleplus{width: 148px;

    height: 74px;

    background: rgba(59,89,152,1) url("http://2.bp.blogspot.com/-jeIkKF52wSU/UQNX5OwGt-I/AAAAAAAAFMc/xlLSwvc24nk/s1600/google+plus.png") no-repeat center center;}

    #supportive .rss{ width: 299px;

    height: 74px;

    background: rgba(59,89,152,1) url("http://4.bp.blogspot.com/-Ebrw9duZtTI/UQNTcS_wDHI/AAAAAAAAFLk/XPBiCPYENEg/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://lh6.googleusercontent.com/-gp5q_y7kibQ/URPO_I6-sKI/AAAAAAAAC_w/twhFzlX2p1c/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://lh6.googleusercontent.com/-5-00TE6gtvM/URPO_ALyNwI/AAAAAAAAC_4/A4Dr7Hg7C6A/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://lh4.googleusercontent.com/-NjlbntNHzFI/URPPCHuQ_XI/AAAAAAAADAI/S2lzrz6uZ0c/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!!

Live Demo

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.

Labels: ,