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.
- Go to Blogger >> Your Blog Dashboard >> Layout
- Click on Add a Gadget on the Sidebar
A Popup window will appear like this
- Add Html/javascript
- 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(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/bloggerplanet"></a></li>
<li><a class="twitterbt" href="http://twitter.com/bloggerplanet"></a></li>
<li><a class="googleplusbt" href="https://plus.google.com/115508725363370825317"></a></li>
<li><a class="pinterestbt" href="http://www.pinterest.com/bloggerplanet"></a></li>
<li><a class="linkedinbt" href="http://www.linkedin.com/bloggerplanet"></a></li>
<li><a class="youtubebt" href="http://www.youtube.com/user/bloggerplanet"></a></li>
<li><a class="rssbt" href="http://feeds.feedburner.com/bloggerplanet"></a></li>
</div> <center>
<span id="linkit"><a href="http://www.bloggerplanet.com">Social Widget</a></span></center>
- Save and Exit
>Customize Metro Style Social Widget for Blogger:
Replace the highlighted links in RED with your own social profile links.
If you have any doubt in your mind, you may ask via comments or contact form.
DON'T FORGET TO "SUBSCRIBE" or"LIKE" FOR FURTHER UPDATES
Post a Comment