ADDING A 3D EFFECT SOCIAL ICON TO YOUR BLOG (MUST READ)
Hey guys! I saw a 3d social icon with rotating spin effect on my friend’s blog, it was just so cool that I asked him for the code. After having the code I did some more touches and it was more beautiful, I couldn’t keep it to myself so i decide to share this awesome widget with you. In case you’re still wondering, what I’m i saying take a look at the image below.
Or better still; take a look at a live practical at by your right…
When putting your mouse on the icon, did you see how it rotates? How awesome is that? Don’t be afraid, click it to subscribe to our feed ***lol***.
3D SOCIAL ICON WITH ROTATE SPIN EFFECT
If you want one like that, copy the codes below
[php]<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -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; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social">
<p>
<!–Start Rss Icon–>
<a title="Grab Our Rss Feed" href="UR FEEDS URL HERE" target="_blank"><img border="0" src="http://www.onenaijablog.com/img1/RSS-48×48.png" style="margin-right:1px;" alt="Icon"/></a>
<!–End Rss Icon–>
<!–Start Email Rss Icon–>
<a rel="nofollow" title="Get Free Updates Via Email" href="UR EMAIL RSS URL HERE" target="_blank"><img border="0" src="http://onenaijablog.com/img1/RSS-EMAIL-48×48.png" style="margin-right:1px;" alt="Icon"/></a>
<!–End Email Rss Icon–>
<!–Start Facebook Icon–>
<a rel="nofollow" title="Like Our Facebook Page" href="UR FACEBOOK PAGE HERE" target="_blank"><img border="0" src="http://onenaijablog.com/img1/FACEBOOK-48×48.png" style="margin-right:1px;" alt="Icon"/></a></p>
<p>
<!–End Facebook Icon–>
<!–Start Twitter Icon–>
<a rel="nofollow" title="Follow Our Updates On Twitter" href="UR TWITTER PAGE HERE" target="_blank"><img border="0" src="http://onenaijablog.com/img1/TWITTER-48×48.png" style="margin-right:1px;" alt="Icon"/></a>
<!–End Twitter Icon–>
<!–Start Google+ Icon–>
<a title="Follow Us On Google+" rel="nofollow" href="UR GOOGLE PAGE HERE" target="_blank"><img style="margin-right:1px;" src="http://onenaijablog.com/img1/GOOGLE-PLUS-48×48.png"/></a>
<!–End Google+ Icon–>
<!–Start Pinterest Icon–>
<a title="Follow Our Pins" rel="nofollow" href="UR PINTREST URL HERE" target="_blank"><img style="margin-right:1px;" src="http://onenaijablog.com/img1/PINTEREST-48×48.png" alt="Follow Me on Pinterest" /></a>
<!–End Pinterest Icon–>
</p>
</div><br/> </center>[/php]
Have you copied it? Or do you want it to be straight like the image below?
[php]<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -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; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social">
<p>
<!–Start Rss Icon–>
<a title="Grab Our Rss Feed" href="UR FEEDS URL HERE" target="_blank"><img border="0" src="http://www.onenaijablog.com/img1/RSS-48×48.png" style="margin-right:1px;" alt="Icon"/></a>
<!–End Rss Icon–>
<!–Start Email Rss Icon–>
<a rel="nofollow" title="Get Free Updates Via Email" href="UR EMAIL RSS URL HERE" target="_blank"><img border="0" src="http://onenaijablog.com/img1/RSS-EMAIL-48×48.png" style="margin-right:1px;" alt="Icon"/></a>
<!–End Email Rss Icon–>
<!–Start Facebook Icon–>
<a rel="nofollow" title="Like Our Facebook Page" href="UR FACEBOOK PAGE HERE" target="_blank"><img border="0" src="http://onenaijablog.com/img1/FACEBOOK-48×48.png" style="margin-right:1px;" alt="Icon"/></a>
<!–End Facebook Icon–>
<!–Start Twitter Icon–>
<a rel="nofollow" title="Follow Our Updates On Twitter" href="UR TWITTER PAGE HERE" target="_blank"><img border="0" src="http://onenaijablog.com/img1/TWITTER-48×48.png" style="margin-right:1px;" alt="Icon"/></a>
<!–End Twitter Icon–>
<!–Start Google+ Icon–>
<a title="Follow Us On Google+" rel="nofollow" href="UR GOOGLE PAGE HERE" target="_blank"><img style="margin-right:1px;" src="http://onenaijablog.com/img1/GOOGLE-PLUS-48×48.png"/></a>
<!–End Google+ Icon–>
<!–Start Pinterest Icon–>
<a title="Follow Our Pins" rel="nofollow" href="UR PINTREST URL HERE" target="_blank"><img style="margin-right:1px;" src="http://onenaijablog.com/img1/PINTEREST-48×48.png" alt="Follow Me on Pinterest" /></a>
<!–End Pinterest Icon–>
</p>
</div><br/> </center>[/php]
TO INSERT IT ON YOUR WORDPRESS
Go to your wordpress admin section and click appearance click widget and drag the “Text” widget to where you want the icons to be. Now paste the code and save it, voila! You now have an awesome 3d spinning social icon on your blog.
TO INSERT IT ON YOUR BLOGGER BLOG
Go to your blogger blog admin panel and click “Layout” click “Add a Gadget” on the new interface that comes out, choose “HTML/JavaScript” and paste any of the choosing codes click save and you’re done..
How do you find this post? You can drop your comment using the comment box below.
Do click the like button subscribe and share us with friends if you find the post interesting. Don’t forget to subscribe to our feed for latest update on the go.
Hey babanature!
Thanks for the code…I had icons on my blog before, but I wanted something different and this my friend is totally different!
Thanks Again!
Marc Bell
Hello Marc,
Thanks for liking the 3d social icon spinning effect. it is totally different from your regular social icons. thanks for the comment
Hey Babanature,
Well that was cool, I like how they spin around. I’m not much on the 3D icons myself but that was still cool to watch. I’m sure you’ll find a few people eager to grab this code.
Thanks for sharing.
~Adrienne
Hello Adrienne,
A lot of people will truly love the icons that’s why i just can’t keep it to myself. glad you like the spinning effect. Thanks for the comment Adrienne.
thanks with the core of my heart for sharing the post. love the icons let me put them on my blog.
Hello Rani,
Glad you find the post useful. thanks for the comment!
Hiii Friend, Nice Buttons I have Add it on my blog but it is not spinning …help me friend my link is -sciencerelief.blogspot.com
Hello Omkar,
really! Did you edit the code?