Recents in Beach

header ads

Metro Style Social Media Widget for Blogger

Unknown December 16, 2014
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
Tags:

Post a Comment

0 Comments

Post a Comment