Metro Style Social Icons for Blogger

Posted On // 4 comments



Metro Social Icons
Recently I posted how you can add a Metro Style Search bar to Blogger and today I am going to show you how you can add Metro Style Social icons to  your blogger blog. These icons are purely made of CSS without use of any JavaScript. It comes with hover effect and looks elegant and cool.

This widget which was created by +Vinay Prajapati contains 7 famous social networking site icons. They are - Facebook, Twitter, Youtube, Google+, LinkedIn, Pinterest and RSS. The demo of this widget can be seen below














  • Once you have seen the demo we can move on how you can add this widget to your blog.

     

    Adding the widget in Layout


    Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code.

    <div class='metro-social'>
    <li><a class="fb" href=http://www.facebook.com/AllBloggerTricks rel="nofollow"></a></li>
    <li><a class="tw" href=http://twitter.com/AllBloggerTricks></a></li>
    <li><a class="gp" href="https://plus.google.com/AllBloggerTricks"></a></li>
    <li><a class="pi" href=http://pinterest.com/AllBloggerTricksrel="nofollow"></a></li>
    <li><a class="in" href=https://www.linkedin.com/in/AllBloggerTricksrel="nofollow"></a></li>
    <li><a class="yt" href=http://www.youtube.com/AllBloggerTricks></a></li>
    <li><a class="fd" href=http://feeds.feedburner.com/AllBloggerTricksrel="nofollow"></a></li>
    </div>
    <style>
    .metro-social{width:285px}
    .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
    .metro-social .fb,.tw,.gp,.pi,.in,.yt,.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:68px;height:70px}
    .metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
    .metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
    .metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
    .metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
    .metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;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 .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
    .metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
    .metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
    .metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
    </style>

    Once you have added the code change the text which is highlighted in various colors. After that save the widget and lastly save the Template.

    You are done now. Now you and your visitors can see this awesome Metro UI Social Icons widget on your blog.

    4 comments

    9 December 2013 at 23:30

    Great Widget.
    Thanks a lot

    Reply
    joya khan Author
    18 December 2013 at 22:03

    facebook image and you tube image not working not

    Reply
    Umer Prince Author
    16 February 2014 at 04:28

    Facebook and YouTube images not working fine please remove short URLs from coding :)

    Reply

    Post a Comment

    Please do not spam here. All comments will be moderated.
    Don't You Think this Awesome Post should be shared ??
    | Metro Style Social Icons for Blogger |