After posting my previous tutorial to make modifications to the widget blogger profile, this time I want to set forth how to create a social networking profile widget draw with colored style.
features
- 7 includes social networking the most often used
- Hover effect and elegant design,
- Very neat and clean
- No JavaScript, No Jquery, purely with CSS
HOW TO ADD THIS WIDGET TO BLOG
To install this widget to your blog is very easy, good blog with flatfrom blogger, wordpress or other blogging service where the style CSS and HTML received on the widget or template. You only need to add the gadget / widget on the HTML / JavaScript.
Step by step for blogger
- In the menu on the dashboard >> Layout >> Add a Gadget >> Select HTML / JavaScript
- Copy and paste the following code in the content column:
<div class='metro-social'> <li><a class="fb" href=http://www.facebook.com/seobloggingtools rel="nofollow"></a></li> <li><a class="tw" href=http://twitter.com/seoblogtools></a></li> <li><a class="gp" href="https://plus.google.com/116382152511220195182"></a></li> <li><a class="pi" href=http://pinterest.com/seobloggingtools rel="nofollow"></a></li> <li><a class="in" href=https://www.linkedin.com/in/seobloggingtools rel="nofollow"></a></li> <li><a class="yt" href=http://www.youtube.com/seoblogingtools></a></li> <li><a class="fd" href=http://feeds.feedburner.com/seobloggingtools rel="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>
Customization: Change the link to my profile with your own link profile.
- Save and see the result of your blog.
Thus this tutorial, how to create a social profile widget on the blog. May be useful.
Nice info, thanks
ReplyDeletethis post is very usefull
Welcomw Dear!
Delete