Dec 15, 2015

Metro Style Social Media Widget for Blogger

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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(http://technoratan.net/wp-content/uploads/2014/04/bt-facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .twitterbt{background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .googleplusbt{background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-google+plus.png) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pinterestbt{background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .linkedinbt{background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .youtubebt{background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .rssbt{background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .facebookbt{background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-facebook1.png) no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-twitter1.png) no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-google+plus1.png) no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-pinterest1.png) no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-linkedin1.png) no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-youtube1.png) no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url(http://technoratan.net/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.net/blogger-tips/metro-style-social-media-widget-blogger" rel="nofollow">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.

0 comments:

Post a Comment

Nam Le © 2014 - Designed by Templateism.com, Distributed By Templatelib