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.
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(http://technoratan.in/wp-content/uploads/2014/04/bt-facebook.png)
no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social
.twitterbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-twitter.png)
no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social
.googleplusbt{background:url(http://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(http://technoratan.in/wp-content/uploads/2014/04/bt-pinterest.png)
no-repeat center center #d73532;width:68px;height:69px}
.metro-social
.linkedinbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-linkedin.png)
no-repeat center center #0097bd;width:69px;height:69px}
.metro-social
.youtubebt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-youtube.png)
no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .rssbt{background:url(http://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(http://technoratan.in/wp-content/uploads/2014/04/bt-facebook1.png)
no-repeat center center #1f69b3}
.metro-social li:hover
.twitterbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-twitter1.png)
no-repeat center center #43b3e5}
.metro-social li:hover
.googleplusbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-google+plus1.png)
no-repeat center center #da4a38}
.metro-social li:hover
.pinterestbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-pinterest1.png)
no-repeat center center #d73532}
.metro-social li:hover
.linkedinbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-linkedin1.png)
no-repeat center center #0097bd}
.metro-social li:hover
.youtubebt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-youtube1.png)
no-repeat center center #e64a41}
.metro-social li:hover
.rssbt{background:url(http://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" rel="nofollow">Get
This 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