Home Blogger Tips Metro Style Social Media Widget for Blogger

Metro Style Social Media Widget for Blogger

By
Gautam Sehgal
-
5997
10
Metro Style Media Widget

We have shared many Social Media widgets with you since we started sharing widgets. We have come up with this new Metro Style Social Media Widget for Blogger. Previously we had shared

We are sharing another Social media Widget for blogger that would enhance the view and appearance of your blog. This enables your visitors to connect with you on Social Network easily. Metro Style Social Media widget provides a look like win 8 home screen. Which attracts the visitors and make them click on the links. We have observed that Metro Style Social icons are liked by most of the viewers and creates attraction.

Metro Style Social Media Widget

Add Metro Style Social Media Widget to Blogger

  • Go to Blogger Dashboard
  • Click on Layout
  • Click on Add a Gadget on the Sidebar

A Popup window will appear like this

add javascript-Html

Click on Add Button and insert the below code into the box

<style>
.metro-social{width:315px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .facebookbt,.twitterbt,.googleplusbt,.pinterestbt,.linkedinbt,.youtubebt,.rssbt{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .facebookbt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .twitterbt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .googleplusbt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-google+plus.png) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pinterestbt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .linkedinbt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .youtubebt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .rssbt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .facebookbt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-facebook1.png) no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-twitter1.png) no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-google+plus1.png) no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-pinterest1.png) no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-linkedin1.png) no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-youtube1.png) no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url(https://technoratan.in/wp-content/uploads/2014/04/bt-feed1.png) no-repeat center center #e9a01c}
</style>

<div class="metro-social">
<br />
<li><a class="facebookbt" href="http://www.facebook.com/TechnoratanIndia"></a></li>
<li><a class="twitterbt" href="http://twitter.com/technoratan"></a></li>
<li><a class="googleplusbt" href="https://plus.google.com/+technoratanIndia"></a></li>
<li><a class="pinterestbt" href="http://www.pinterest.com/Technoratan"></a></li>
<li><a class="linkedinbt" href="http://www.linkedin.com/company/technoratan-india/"></a></li>
<li><a class="youtubebt" href="http://www.youtube.com/user/technoratanindia"></a></li>
<li><a class="rssbt" href="http://feeds.feedburner.com/technoratan"></a></li>
</div> <center>
<span id="linkit"><a href="http://technoratan.in/blogger-tips/metro-style-social-media-widget-blogger">Social Widget</a></span></center>

Save and Exit

We had Also Shared

[AdSense-C]

Customize Metro Style Social Widget for Blogger

  • Replace https://www.Facebook.com/TechnoratanIndia with your Facebook User ID
  • Replace http://twitter.com/technoratan with your Twitter User ID
  • Replace https://plus.google.com/+technoratanIndia with your Google Plus ID
  • Replace http://feeds.feedburner.com/technoratanindia with your RSS Feed Address
  • Replace http://www.youtube.com/user/technoratanindia with your Youtube Channel ID
  • Replace http://www.linkedin.com/company/technoratan-india/ with your Linkedin User ID
  • Replace http://www.pinterest.com/Technoratan with your Pinterest ID

If you have any doubt in your mind, you may ask via comments.

Previous articleSafety Applications | Secure Your Kids
Next articleNokia Lumia 930 – The best of Microsoft and Nokia | Technical Review
Gautam Sehgal
https://technoratan.net/
He is a 27 year old guy who is instilled with the art of Blogging, He loves to Blog day in and day out,He is a Network Engineer and a always keen at learning . Connect with him on Facebook, Follow on Twitter and Google+

RELATED ARTICLESMORE FROM AUTHOR

10 COMMENTS

  2. Its good to know about the Metro Style Social Media widget. Blogger users have another widget to improve their social media campaign. I see the widget emphasizes on the popular social platforms in a colorful way 😀

    I have shared this comment in kingged.com – the content syndication and social marketing platform for Internet marketers, where this post was shared.

    Sunday – kingged.com contributor

    http://kingged.com/give-professional-blog-adding-metro-style-widget/

  3. Great!

    Glad to know about these freebies of Metro Style. 🙂

    Simple, yet engaging design is catching enough as for my own opinion. Being in simplicity is beauty, right? Widgets can improve a blogger’s social media campaign. Well, these widgets provided above are all stylish and looks like a pro.

    Thanks for sharing such informative content. This content will indeed useful for every blogger.

    Have a good day ahead! 🙂

    Best,
    Ann07

    By the way, I found this post shared on Kingged.com

  4. This looks good and sweat!

    ps: Don’t forget to remind others to change the image URLs as well, otherwise they’ll be sucking your bandwith. Or, you could upload the images to imgur and replace the links on your post.

  5. The widget you have shared looks quite good as its colorful, the layout is also simple and can easily be placed in any blog or even in websites to.

    But when it comes to make a professional looking website or blog, I would not suggest this kind of gadget to place on a website. There are other good options available for social platform integration.

    1. Add This: The most popular and great service to integrate social media links and share tools in one’s blog and website. There are many kind of layout are available for placing on a site/blog.
    It also provides stats of social media sharing through the share buttons and social links.

    2. Share This: This is another great service in this segment with almost same service and features. They too provides various layouts, stats analysis for social integration tool.

    Anyways, that’s a recommended gadget for general sites and thanks for sharing it on Kingged.com..

  6. Thanks for sharing this post. I was finding a suitable social widget for my blog. I surfed many widget like “add this widget” but it was not matching with my blog. Then I landed on your page. It was really amazing to use metro style social widget.. though I modified it a bit. thanks again!! 🙂

Share your Experience