Home » Blogger Tutorials, Tricks and Hacks » Blogger Tricks » Add A Metro-Style Social Sharing Widget To Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add A Metro-Style Social Sharing Widget To Blogger

Add A Metro-Style Social Sharing Widget To Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

2,096 views

Today’s featured Blogger widget design comes from Rehmat Alam, and he shares it with us in the form of a social sharing widget. His widget’s design is based on the user interface of Microsoft’s latest OS (Windows 8) known as Metro style.

Now you can also now bring a bit of that Windows 8 touch and feel into your Blogger blog as well using Alam’s Metro-style inspired social sharing widget design.

NOTE: This tutorial assumes that your sidebar’s width is at least 300px. If it’s any smaller than that then you might have to do some minor adjustments by editing your template’s CSS code.

To install is quite easy. Just follow the steps below:

  • Log in to your Blogger dashboard and go to the Design section.
  • Head over to ‘Template’ and click on Edit HTML.
  • Place a check inside the Expand Widget Templates box.
  • By pressing Ctrl+F, look for ]]></b:skin> inside your blog’s template code.
  • Copy/paste the following code below just above ]]></b:skin> and then save your template.
.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 .4s ease-in-out;

-webkit-transition:all .4s ease-in-out;

-o-transition:all .4s ease-in-out;

transition:all .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 .1s ease-in-out;

-webkit-transition:all .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 .1s ease-in-out;

-webkit-transition:all .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 .1s ease-in-out;

-webkit-transition:all .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 .1s ease-in-out;

-webkit-transition:all .1s ease-in-out;

}     
  • Now head over to Layout and click on an Add a Gadget button.
  • Select HTML/JavaScript and copy/paste the code below.
 <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/GooglePlusUserID/'/></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurnerUserName'/></a></li>
</ul>     
  • Replace the all the necessary info (highlighted in red) according to your own URL/user details.
  • Save the widget and you’re done!

Liked It ? Please Share

Comments

4 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. IreneH33 says:

    Try adding NewsAssist to your list of tools? NewsAssist is an open source Firefox add-on that provides an editor (blogger, journalist) all necessities for News Searching, Editing, Publishing, Content distribution to social media. It is a powerful tool and a great working environment that is fully integrated with Firefox. It is aimed to increase the productivity of blog and website editors without having to leave the web browser. Thanks.

    “firefox add-on”:http://www.newsassist.org

  2. yatuts says:

    thank you brother for this widget

  3. Pradip says:

    I installed this widget on my blog but i Cant see the widget in Internet explorer

  4. I like what you guys tend to be up too. This type of clever work and coverage!
    Keep up the excellent works guys I’ve you guys to my blogroll.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here