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
- Popup Like Box Widget for Blogger and WordPress
- Facebook Floating Like box Widget for Blogger and WordPress
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.
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
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
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.
[…] Also Read – Metro Style Social Media Widget for Blogger […]
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/
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
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.
Thankyou so much,
and thanx again for reminding such an important thing i ignored 🙂
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..
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!! 🙂
You are most welcome Ramesh, Happy that you have found it better for you. And you have all the rights to make the changes.. 🙂 Enjoy
[…] you also try using some other blogger widgets to make your blog look more stylish. You can also add metro style social sharing widget or automatic numbering popular posts widget in your blogger […]
[…] Also Read – Metro Style Social Widget […]