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?

then copy the code 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.