Top Ad unit 728 × 90

How to Add Metro Style Social Media Widget in Blogger Blog

Today in this post i will share with you Metro Style Social Media Widget for Blogger Blog. It has awesome look and design having square icon shape, with this social gadget your blog's reader will increase and also your visitors and readers can share your blog with their friends easily. In this case your blog's rank will be increased and your fans also be grown by numbers. It also give a great beautiful look to your blog.

Metro Style Social Media Widget


Features in Metro Style Social Widget
  • It has great style and look as compare to others.
  • With Metro Media Social Gadget everyone can share your blog with their friends.
  • It contains Mouse Hover feature.
  • Simple to use...

How to Add Metro Style Social Media Widget in Blogger Blog

Go to Blogger Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript, and put one of the below set of code as your choice. If you want to show Metro V2 then simply copy the below piece of code and paste it in your blogger widget.
[post_ad]
The below set of code is for Metro Style V2 Social Media Widget
 <div class='metro-social'>
<li><a class="fb" href="https://www.facebook.com/pages/Bloggercellcom/935684026448561/" rel="nofollow"></a></li>
<li><a class="tw" href="https://twitter.com/bloggercellfans/" rel="nofollow"></a></li>
<li><a class="gp" href="https://plus.google.com/+BloggerCell/" rel="nofollow"></a></li>
<li><a class="pi" href="http://www.pinterest.com/bloggercell/" rel="nofollow"></a>
<li><a class="in" href="https://www.linkedin.com/in/bloggercell/" rel="nofollow"></a></li>
<li><a class="yt" href="http://www.youtube.com/bloggercell/" rel="nofollow"></a></li>
<li><a class="fd" href="https://feedburner.google.com/fb/a/mailverify?uri=Bloggercell-CompleteGuideForBlogging/" rel="nofollow"></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,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(http://2.bp.blogspot.com/-9_DzezXrt3I/VEuKbNOy21I/AAAAAAAAATs/bSykmOVezTw/s1600/fb1.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(http://3.bp.blogspot.com/-IFGb3xXVp9I/VEuKd_FfveI/AAAAAAAAAUg/tMSWtGyiZM8/s1600/tw1.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(http://1.bp.blogspot.com/-P8ghm6d912o/VEuKcW0SdlI/AAAAAAAAAUE/AQ2-_w58ZCs/s1600/g%2B1.png) no-repeat center center #da4a38}
.metro-social .pi{background:url(http://2.bp.blogspot.com/-Op0GeIizy3s/VEuKdI-t6pI/AAAAAAAAAUU/8O8YKX2vnto/s1600/pin1.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(http://3.bp.blogspot.com/-u2DyMy_wmsU/VEuKaE2sRwI/AAAAAAAAATg/xq_9PwsSVIs/s1600/Lin1.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(http://1.bp.blogspot.com/-1xwWVJ2PvnM/VEuKardE8bI/AAAAAAAAATk/EGtQQ2fIvv4/s1600/YT1.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(http://4.bp.blogspot.com/-CaPAju7pNGk/VEuKbukoZbI/AAAAAAAAAT4/9rsrqEB9ZzI/s1600/feed1.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(http://2.bp.blogspot.com/-x6xXA_avAPI/VEuKbVGIZkI/AAAAAAAAATw/H546Co9Imrk/s1600/fb2.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(http://2.bp.blogspot.com/-YCJmU1HmZhM/VEuKeDqJBBI/AAAAAAAAAUk/0pn_ML8vAtU/s1600/tw2.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(http://1.bp.blogspot.com/-rrNf9nYamUY/VEuKcevi4BI/AAAAAAAAAUI/K15JnD8isjc/s1600/g%2B2.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(http://1.bp.blogspot.com/-3V6kMJDOP7k/VEuKdBAHMDI/AAAAAAAAAUY/dxiTQ4EFkSA/s1600/pi2.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(http://3.bp.blogspot.com/-Md6RIK-JQPk/VEuKacM736I/AAAAAAAAAVI/4YC3_wA2Xbw/s1600/Lin2.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(http://2.bp.blogspot.com/-ZNZDEBaFWLo/VEuKedRQjmI/AAAAAAAAAUs/8tKgkYV9nA0/s1600/yt2.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(http://1.bp.blogspot.com/-xaMk9RYAtVg/UvAHHXiDdAI/AAAAAAAANZg/Afegk34so5E/s1600/feed2.png) no-repeat center center #e9a01c}
</style>

Please changing the below URL Addresses with your URL Address:
  • Change "https://www.facebook.com/pages/Bloggercellcom/935684026448561/" with your Facebook page
  • Replace "https://twitter.com/bloggercellfans/" with your Twitter page.
  • Change "https://plus.google.com/+BloggerCell/" with your Google Plus Page.
  • Replace "http://www.pinterest.com/bloggercell/" with your Pinterest Page.
  • Replace "https://www.linkedin.com/in/bloggercell/" with your LinkedIn ID.
  • Change "http://www.youtube.com/bloggercell/" with your YouTube Channel page.
  • Change"https://feedburner.google.com/fb/a/mailverify?uri=Bloggercell-CompleteGuideForBlogging/" with your FeedBurner ID.
Now Save it. You are done. Now reload your page and you can view this beautiful social widget.

Final Words

This is the simple tutorial in which i have told you complete way on Metro Style social Media Widget for your blogger blog. Hope you will enjoy this widget by adding it to blog or website. If you face any problem regarding to this widget then email me or comment me below, I will try my best to solve your problem.
Remember me in your Prayers...
How to Add Metro Style Social Media Widget in Blogger Blog Reviewed by Tariq Rafique on 10:41 am Rating: 5

No comments:

All Rights Reserved. www.BloggerCell.com © 2014-2015
Follow my blog with Bloglovin - Do not reproduce any article without author's permission.

Contact Form

Name

Email *

Message *

Powered by Blogger.