Add metro style social bookmark style icon with hover effect same like Wordpress for Blogger blog. This metro style widget is basically available only for Wordpress user but now you can add this unique style widget to your Blogger Blogspot blog too. This widget works every simple with easily code you can customize even in your style too. On hover it will show little change on it.This widget is super cool and look great in every template you can aslo add some other icon too.
This is the demo of this beautiful social bookmark icon widget.
Add Code to Blogger Blog:
- Go to your Blogger account and open the layout tabs right of your Blogger dashboard.
- Click on the edit widget and open it. Open the HTMl/Text and past the below code on it.
<center>
<ul id="PFL-social-icons">
<li class="rss-icon">
<a href="http://feeds.feedburner.com/FEEDID" target="_blank">
<img
height="147"
src="http://goo.gl/4z6acp"
width="147" />
</a></li>
<li class="twitter-icon">
<a href="http://www.twitter.com/TWITTERID" target="_blank">
<img
height="147"
src="http://goo.gl/NbQxG5"
width="147" />
</a></li>
<li class="facebook-icon">
<a href="http://www.facebook.com/PAGEID" target="_blank">
<img
height="147"
src="http://goo.gl/z3HdtX"
width="147" />
</a></li>
<li class="google-icon">
<a href="https://plus.google.com/YOURID" target="_blank"><img
height="147"
src="http://goo.gl/VX2bJC"
width="147" />
</a></li>
</ul> </center> <style> #PFL-social-icons li { float: left; width: 147px; height: 147px; margin: 0 6px 6px 0; padding: 0 0 0 0; border-bottom: none; list-style: none; } #PFL-social-icons li a { line-height: 1px; display: block; } #PFL-social-icons li a:hover img { -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; } #PFL-social-icons li a span { display: none !important; } </style> |
After add the code save your template and refresh you blog, now your blog and smile.
About Post Author:
This post is fruit of pen-clipping of Mohammad Hamza Frough, poineer of ProFeedLinks. He likes to shear about his thought and experience with others.
Read more about Mohammad Hamza Frough »
0 comments:
Post a Comment
Share your Feedback and suggestion with us. Any question or need some please contact us and get instant help. Do not post Spam or Back links comments. If spam or post backlinks comments on this blog, your comment will be deleted.