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.
Great Widget.
ReplyDeleteThanks a lot
đồng tâm
Deletegame mu
cho thuê phòng trọ
cho thuê phòng trọ
nhac san cuc manh
tư vấn pháp luật qua điện thoại
văn phòng luật
số điện thoại tư vấn luật
dịch vụ thành lập doanh nghiệp
facebook image and you tube image not working not
ReplyDeleteFacebook and YouTube images not working fine please remove short URLs from coding :)
ReplyDelete