Min menu

Pages

Hot

How to Add Metro Style Social Widget for Blogger

Today I will give you a very nice addition to your blog and frankly I liked this widget a lot. It is a social networking sites widget on the form of Metro as in windows 8.

Adding the widget in Layout
1. Go to Blogger Dashboard  → Layout → click on "Add a gadget".
2. Select "html/java script" and add the code given below.
<div class="metro-social">
<li><a class="fb" href="Your Facebook URL here"></a></li>
<li><a class="tw" href="Your Twitter URL here"></a></li>
<li><a class="gp" href="Your GooGle + URL here"></a></li>
<li><a class="fd" href="Your FeedBurner URL here"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: 
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>
<br />
3. Replace "Your ..... URL here" with Your URL.
4. Click on save.
I hope you enjoy & happy blogging! :)
reaction:

Comments

13 comments
Post a Comment
  1. StatMyWeb gives detailed analysis and deeper insights into millions of websites across the web. It lets you explore detailed stats and history of any website. You can see when a site was created, where is it hosted, how much its worth, how high it ranks and its safety ratings.

    ReplyDelete
  2. Very nice, just what I need. Thanks...

    ReplyDelete
  3. Here I am going to share a fresh and Do Follow High PR sites to get high Ranking In search engines. These Sites surely helps you in Building great backlings. These site are tested even after Penguin update and obtained good results from these sites here......
    http://newseowebs.blogspot.com

    ReplyDelete
  4. Get A Free Search engine optimization (SEO) Analysis & Proposal Today..

    http://www.h1skswebstudios.co.uk/

    ReplyDelete
  5. I do trust all the concepts you've introduced in your post.
    They are very convincing and can certainly work. Nonetheless,
    the posts are very brief for starters. May just you please prolong them a bit from
    subsequent time? Thank you for the post.

    Stop by my web page :: massage tips taxable

    ReplyDelete
  6. thank u bro, iwant to ask u, what about the step about make a liker facebooook in my blog?

    ReplyDelete
    Replies
    1. It's just a code bro u must to put it in your blog..!

      Delete
  7. Excellent article. The blog is useful and more informatic What is search engine optimization

    ReplyDelete

Post a Comment