Metro Style Social Sharing Widget For Blogger

Metro Style Social Sharing Widget For Blogger

Decorate your Blogspot Blogger Blogs with this beautiful designed social sharing widget. This widget is called Metro Style Social Sharing Widget For Blogger and gives a feature to you to place your social media profile links of Facebook, Google+, Twitter and Feedburner with amazing CSS effects. 

Features Of This Widget

This widget takes smaller space on your blog 
Beautiful reflect and a decent appearance.
Your visitors will be attracted by this widget towards your blog.
They will follow you on social profiles and subscribe as well 
for latest widget and articles on Feedburner.

Before we start see the Demo of this Widget.

                                      Demo

Metro Style Social Sharing Widget For Blogger

Step 1
Go To Your Blogger Template
Find This Code
]]></b:skin>

Now Paste Below Code Above It

---

/***** metro style Social Sharing Widget from http://www.futurelearning4u.blogspot.com start*****/.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/AVvXsEjwlqVtb5CtK0m9hE_CqAEjuKfClUFOY9rWf7v8oTN9lXws52_vTqP4ggc8smA5WWLeACdxfk4poJKZIyQn2uTme721Jxt2hI9F5_id-tnI5-RUxh7rkGH2qUjbgk1o2mOYkVzjltVztsA/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/AVvXsEhqgiAHNI6U6_xoCtZwYqqSIdI3ll4TEf86nU_N4b5HP-F6dnikSlULYF-i5wM-5UkW4JNrhgdcNBbCmx2m2V_YtNT0Ld100t9Svqi1poOfT1uvMWqZ0J8kvv4AD4PjzELBbUCn0ymiUhvB/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/AVvXsEg-IVMqXY53ZDapdcHSdCzDALyuD7c4HFMj_FCnxxSIcopU7u41kyE1RyciiHDbgoGi4qCWN1L50VUQ_W1shN2dbX8PiLr5blnYR_HJMzPOIz0Fonaf1X1k9wgE8MMUZmSzDG0UM9_y6_r4/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/AVvXsEiGhRgTpJv_ENmr1DdOmAZ58zHhhcEcPP1MkQxd0qbWvUBlfaoz1NC-6PPvp-Lgpb6i9Rc7MpF28iadYOVp8MjzQ3uA5tlWO6seLYS0vfw3PLhKsuM-Zc8Vy4cCggIrR1ozBTcC2UHGuhs2/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/AVvXsEjb0j3j49dyE8Xa8Z3yCjVxYqa4YPpJRt3AO56PQMPZbK1zyKo2CeCJk7GjIbQ608WeuzfdIlDmQqoWJEfyHgBtEguRUo7CKdSBWeqcReiXzhRyqT-0RCIWRdSr925sx1szMu8lV2J6IvA/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/AVvXsEjm3xSklIGUQPkwC5wQCnZLAy5EGT_9oDBqTyQyg9Hp6i9iU2UebhRbiGaLiwLbCmzt0dK-aLjTRKm_yaBw10LKNrGgprVbI8alUT1oBzW714KQFKusgl4Gy0DN7e01lZ-1jfv9jYu95l0/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/AVvXsEiDV-jL4yFNzxBhg2qD7ou86pLeZpl1K_buqVPiwd5VsMppzqbbIDbnwes0FlE43oxbvg3ZA0feEjXdzy2gWa74__e9dEl6bk5oF8MSF8S9N41j-VaH0esCCaJqSF_rr1B4mg6DNllYZtc/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;}/***** Metro style Social Sharing Widget from http://www.futurelearning4u.blogspot.com end*****/

---

Step 2

Now Go To Layout

Select HTML/JAVA Widget

And Paste Below Code In It

---

/***** Metro style Social Sharing Widget from http://www.futurelearning4u.blogspot.com end*****/<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>/***** Metro style Social Sharing Widget from http://www.futurelearning4u.blogspot.com end*****/

---

Instruction

If you want to add your Facebook Page change this FaceBookPage
If you want to add your Twitter Username change this TwitterUserName
If you want to add your Google+ Id change this GooglePlusUser/PageID
Want to add your FeedBurner Username change this FeedBurnerUserName

Note

if you find any problem regarding'Metro Style Social Sharing Widget For Blogger' then feel free to comment below.