If You Have Knowledge, let others light Their candles At It. Margaret Fuller
To Know What You Know And What You Do Not Know, That is True Knowledge -Confucius

Saturday, 31 May 2014

Spinning Social Icons With CSS3 Gadget For Blog


Well we always want something that will attract readers/viewers. This Spinning Social Icon is so much attractive that most of the bloggers want this in their blog. It Looks Great too. So I am gonna show you how to add this in your blog. The Social Icons will spin when you move your mouse pointer on them. Yeah, isn't it amazing? Absolutely Awesome. So If you want there on your blog to attract readers add this. Just Follow
The Steps Given.

1. Go To Your Blog.
2. Click On Layout
3. Click Add A Gadget.
4. Then Click on HTML/Javascript
5. Copy Any 1 of the code of the style you like and paste it.
6. Replace 'xyz' form the code below to your username and all.
7. Click Add And It Will Be Added

#Style 1

Social Icons will be spinning Clockwise

<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#hb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
/* Spinning Social Icons Widget By HelperBlogger */
</style> 
<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/xyz/">
<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/
AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/xyz/">
<img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/
AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/
AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/xyz/">
<img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/
AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/xyz/">
<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/
AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>
</p></cente>

#Style 2


Social Icons will be spinning Anti-Clockwise

For This Style Copy This Code :-
<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#hb_socialicons img:hover {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
/* Spinning Social Icons Widget By HelperBlogger */
</style> 
<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/xyz/">
<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/
AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/xyz/">
<img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/
AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/
AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/xyz/">
<img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/
AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/xyz/">
<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/
AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>
</p></cente>



Floating Vertical Bar With Share Buttons widget by techiterian

No comments:

Post a Comment

Designed By Seo Blogger Templates