Round Green Social Media Icons Widget for Blogger with 3 different sizes

Hi Friends, This is my first for Bloggers, I thought to start with something simple yet undeniably important. A simple social media Icons Widget contains 10 round green social media icons with 3 different sizes, namely Facebook, Google plus, Twitter, Instagram, LinkedIn, Pinterest, Stumbleupon, Tumblr, Youtube and RSS.

So today we will be making a simple social media widget for your sidebar or footer. You need not to have knowledge of CSS or HTML to install this widget.

Follow these steps to install this Widget

Step 1: Login to your Blogger Account
Step 2: Now move your cursor over the side menu and Layout
Step 3: Click on Add a Gadget Link
Step 4: Copy the code below (which size you want) and paste it inside the empty box

For 32px * 32px copy this code

<div class='metro-social'>

<li><a class="fb" href="http://www.facebook.com/smartpik"></a></li>
<li><a class="tw" href="http://twitter.com/smartpik"></a></li>
<li><a class="gp" href="https://plus.google.com/+smartpik"></a></li>
<li><a class="pi" href="http://pinterest.com/smartpik"></a></li>
<li><a class="ins" href="http://feeds.feedburner.com/smartpik"></a></li>
<li><a class="ln" href="https://www.linkedin.com/company/smartpik"></a></li>
<li><a class="stm" href="http://www.stumbleupon.com/stumbler/smartpik"></a></li>
<li><a class="tl" href="http://smartpik.tumblr.com/"></a></li>
<li><a class="yt" href="https://www.youtube.com/user/smartpik"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/smartpik"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.ins,.yt,.fd,.ln,.stm,.tl{z-index:7;float:left;margin:6px;position:relative;display:block}
.metro-social .fb{background:url(https://lh3.googleusercontent.com/-NGvqFgM-QiU/Vj3wyUhLIDI/AAAAAAAACWU/UhFsv0AzCOo/s128-Ic42/facebook.png) no-repeat center center;width:32px;height:32px}
.metro-social .tw{background:url(https://lh3.googleusercontent.com/-Qw3y0YE-bKE/Vj3w0ZvtwmI/AAAAAAAACXE/AM9SscZlBQY/s128-Ic42/twitter.png) no-repeat center center;width:32px;height:32px}
.metro-social .gp{background:url(https://lh3.googleusercontent.com/-w9CvLRKMjQE/Vj3wyWxkKVI/AAAAAAAACWo/OVSNVqi9tYY/s128-Ic42/google%25252B.png) no-repeat center center;width:32px;height:32px}
.metro-social .pi{background:url(https://lh3.googleusercontent.com/-cq68iXN6R2M/Vj3wzUsSllI/AAAAAAAACXQ/R0R6pYhRm-Q/s128-Ic42/pinterest.png) no-repeat center center;width:32px;height:32px}
.metro-social .ins{background:url(https://lh3.googleusercontent.com/-POQn5WG04vc/Vj3wyRB9UOI/AAAAAAAACWg/EL7LGtW66RA/s128-Ic42/instagram.png) no-repeat center center;width:32px;height:32px}
.metro-social .yt{background:url(https://lh3.googleusercontent.com/-hTtRNO3X01Y/Vj3w0muYUWI/AAAAAAAACXI/M8pEd-voev8/s128-Ic42/youtube.png) no-repeat center center;width:32px;height:32px}
.metro-social .ln{background:url(https://lh3.googleusercontent.com/-_IVKsCAXwTc/Vj3wzNNX4xI/AAAAAAAACXM/lcf2JWiKCoQ/s128-Ic42/linkedin.png) no-repeat center center;width:32px;height:32px}
.metro-social .stm{background:url(https://lh3.googleusercontent.com/-SyxmyJWdiNc/Vj3wz1fEwSI/AAAAAAAACXA/UQfbKA8Gelc/s128-Ic42/stumbleupon.png) no-repeat center center;width:32px;height:32px}
.metro-social .tl{background:url(https://lh3.googleusercontent.com/-q1SDxBBNV4I/Vj3w0PQbJiI/AAAAAAAACW8/ZfuCmPm0h3g/s128-Ic42/tumblr.png) no-repeat center center;width:32px;height:32px}
.metro-social .fd{background:url(https://lh3.googleusercontent.com/-AFwpp43DlgE/Vj3wzRrTB-I/AAAAAAAACWw/TThLDwNxGHo/s128-Ic42/rss.png) no-repeat center center;width:32px;height:32px}
</style>

For 48px * 48px copy this code

<div class='metro-social'>

<li><a class="fb" href="http://www.facebook.com/smartpik"></a></li>
<li><a class="tw" href="http://twitter.com/smartpik"></a></li>
<li><a class="gp" href="https://plus.google.com/+smartpik"></a></li>
<li><a class="pi" href="http://pinterest.com/smartpik"></a></li>
<li><a class="ins" href="http://feeds.feedburner.com/smartpik"></a></li>
<li><a class="ln" href="https://www.linkedin.com/company/smartpik"></a></li>
<li><a class="stm" href="http://www.stumbleupon.com/stumbler/smartpik"></a></li>
<li><a class="tl" href="http://smartpik.tumblr.com/"></a></li>
<li><a class="yt" href="https://www.youtube.com/user/smartpik"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/smartpik"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.ins,.yt,.fd,.ln,.stm,.tl{z-index:7;float:left;margin:6px;position:relative;display:block}
.metro-social .fb{background:url(https://lh3.googleusercontent.com/-qOqAsno6yv4/Vj38HCl6MpI/AAAAAAAACXo/wvJFTf9Mu0E/s128-Ic42/facebook.png) no-repeat center center;width:48px;height:48px}
.metro-social .tw{background:url(https://lh3.googleusercontent.com/-1JpAPYo9zPo/Vj38TvgEBVI/AAAAAAAACYo/uktgfSxleGI/s128-Ic42/twitter.png) no-repeat center center;width:48px;height:48px}
.metro-social .gp{background:url(https://lh3.googleusercontent.com/-m-o4VgpSAX4/Vj38SI5PIxI/AAAAAAAACY4/xEJwb3rNPok/s128-Ic42/google%25252B.png) no-repeat center center;width:48px;height:48px}
.metro-social .pi{background:url(https://lh3.googleusercontent.com/-n9z0yyZ06es/Vj38SgcqzmI/AAAAAAAACYw/ML_CmkHxiuk/s128-Ic42/pinterest.png) no-repeat center center;width:48px;height:48px}
.metro-social .ins{background:url(https://lh3.googleusercontent.com/-LofJIxBJfPY/Vj38SBP50UI/AAAAAAAACYY/KtKiWD_KC7M/s128-Ic42/instagram.png) no-repeat center center;width:48px;height:48px}
.metro-social .yt{background:url(https://lh3.googleusercontent.com/-pFbxYaTXrOM/Vj38T1zLo3I/AAAAAAAACY0/XhMbziRLU64/s128-Ic42/youtube.png) no-repeat center center;width:48px;height:48px}
.metro-social .ln{background:url(https://lh3.googleusercontent.com/-b7wEWMqdabc/Vj38SKZFxcI/AAAAAAAACYI/fxJqESJhKyI/s128-Ic42/linkedin.png) no-repeat center center;width:48px;height:48px}
.metro-social .stm{background:url(https://lh3.googleusercontent.com/-d-7N18i39_0/Vj38TC2HxPI/AAAAAAAACYs/8OMcu1we3c4/s128-Ic42/stumbleupon.png) no-repeat center center;width:48px;height:48px}
.metro-social .tl{background:url(https://lh3.googleusercontent.com/-d6Wn5Njpo04/Vj38TeE68SI/AAAAAAAACYk/WL1nqVq_sVM/s128-Ic42/tumblr.png) no-repeat center center;width:48px;height:48px}
.metro-social .fd{background:url(https://lh3.googleusercontent.com/-cGBBWiZECZU/Vj38S73atEI/AAAAAAAACYc/rT6_vPp7Pho/s128-Ic42/rss.png) no-repeat center center;width:48px;height:48px}
</style> 

For 72px * 72px copy this code

<div class='metro-social'>

<li><a class="fb" href="http://www.facebook.com/smartpik"></a></li>
<li><a class="tw" href="http://twitter.com/smartpik"></a></li>
<li><a class="gp" href="https://plus.google.com/+smartpik"></a></li>
<li><a class="pi" href="http://pinterest.com/smartpik"></a></li>
<li><a class="ins" href="http://feeds.feedburner.com/smartpik"></a></li>
<li><a class="ln" href="https://www.linkedin.com/company/smartpik"></a></li>
<li><a class="stm" href="http://www.stumbleupon.com/stumbler/smartpik"></a></li>
<li><a class="tl" href="http://smartpik.tumblr.com/"></a></li>
<li><a class="yt" href="https://www.youtube.com/user/smartpik"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/smartpik"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.ins,.yt,.fd,.ln,.stm,.tl{z-index:7;float:left;margin:6px;position:relative;display:block}
.metro-social .fb{background:url(https://lh3.googleusercontent.com/-TXhH6H2FsYk/Vj3-HFqouvI/AAAAAAAACZs/t8qVyw9AO0o/s128-Ic42/facebook.png) no-repeat center center;width:72px;height:72px}
.metro-social .tw{background:url(https://lh3.googleusercontent.com/-AvtGkICtXiQ/Vj3-I0i73dI/AAAAAAAACaU/qIlAAkKjyM4/s128-Ic42/twitter.png) no-repeat center center;width:72px;height:72px}
.metro-social .gp{background:url(https://lh3.googleusercontent.com/-wEfXXdPRaFY/Vj3-HI6qD5I/AAAAAAAACZo/7BLy2lL8sgs/s128-Ic42/google%25252B.png) no-repeat center center;width:72px;height:72px}
.metro-social .pi{background:url(https://lh3.googleusercontent.com/--D2B7XCuiRQ/Vj3-IE9D7NI/AAAAAAAACaM/qGSl3jpECqw/s128-Ic42/pinterest.png) no-repeat center center;width:72px;height:72px}
.metro-social .ins{background:url(https://lh3.googleusercontent.com/-t707BTORqyw/Vj3-HPUyauI/AAAAAAAACZY/kmq3SB3nRc8/s128-Ic42/instagram.png) no-repeat center center;width:72px;height:72px}
.metro-social .yt{background:url(https://lh3.googleusercontent.com/-FuwzbeICKhs/Vj3-JeFnugI/AAAAAAAACaY/SasMMsFN-EY/s128-Ic42/youtube.png) no-repeat center center;width:72px;height:72px}
.metro-social .ln{background:url(https://lh3.googleusercontent.com/-T6nSEADCCeE/Vj3-H-ErWwI/AAAAAAAACZw/TgEEc267bG8/s128-Ic42/linkedin.png) no-repeat center center;width:72px;height:72px}
.metro-social .stm{background:url(https://lh3.googleusercontent.com/-mWNWluyYOrM/Vj3-IgE3BuI/AAAAAAAACaE/nO-JOTBEyYY/s128-Ic42/stumbleupon.png) no-repeat center center;width:72px;height:72px}
.metro-social .tl{background:url(https://lh3.googleusercontent.com/-R3zfD4R7MSE/Vj3-I3IH_MI/AAAAAAAACaQ/Xjo9fHPwPEg/s128-Ic42/tumblr.png) no-repeat center center;width:72px;height:72px}
.metro-social .fd{background:url(https://lh3.googleusercontent.com/-U_8akmAXm1I/Vj3-IDp05jI/AAAAAAAACaA/dVkCKRYG-V8/s128-Ic42/rss.png) no-repeat center center;width:72px;height:72px}
</style>

Step 5: Press Ctrl+F and search for smartpik and replace it with your social media usernames.The numbers shown in blue color are the width of the widget(285px) and distance between(6px) your icons.

Hit the Save button and that’s it!