Announcement:

This is a Testing Annocement. I don't have Much to Say. This is a Place for a Short Product Annocement

Sunday, 9 June 2013

Spinning CSS 3D Social Sharing Widget

Spinning CSS 3D Social Sharing Widget
Want to have another designer set of social sharing icons to put on your Blogger blog? Well, why not try out these nicely designed CSS icons? These gorgeous animated 3D icons spin every time you hover your mouse cursor over and off of them.
Installing them in your blog is pretty much the same as with other widgets: simple and easy. Follow the steps below:
  • Go to the Design page in your Blogger dashboard.
  • Click on Layout.
  • Click on any Add a Gadget placeholder where you’d like to put the social icons.
  • Choose HTML/JavaScript on the list of gadgets.
  • Copy/paste the following code below:
<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">
 <!--Start Rss Icon-->
 <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt1kBIuk6bE_Y_VKPrjQ2G5MPhixxi8AjN1Qrrsx-0aM8hCf1qni9Rbc6tRYr89f7RhaDQWCyNwPOAJov985MjX1YhQqQOYtzrUwEUqm7wxIJCqsv8PtJC0bngPpaQgw61ZAYP5ayJ3hW/s1600/RSS-48x48.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="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo1qbkVKR8jCRhpszdVIKJ9Vr9vas_0XqTSHVmrHfOWcwHnIxlcsaiXVAsotYs2IBXclxdWmp0UUZjogFC7q45yqSudAVj9vUI7lQXcbBkRXvqiH2Pl13fzq9l834I_VqWlVQZRYcom4m8/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
 <!--End Email Rss Icon-->
 <!--Start Facebook Icon-->
 <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJwrScH8V_GVoMhFPupZQkI5OTZPrPuw9dwMkyd-wyJUDT1-q6PzvApRKBJBFlOWYxO5VLUeeKqVVhydyZmBdghu6aciq6xZgWAX3H6UdhK97Kkvl4TTzyquwsUMScCkpYVIDVe35E-Vyc/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
 <!--End Facebook Icon-->
 <!--Start Twitter Icon-->
 <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhBhDmBK5Q8-Xr_ylX1u-8kCkbDUapy615LPSSRbMkf_8fbcjnMdCLew8Nczpinc7pkIvmPtVlHuBM5UYD8pDLU6Ql2hnjg0Bq0pjYinSeB0bkodPqXxYXuRn3c5n2KuOts8rehDIKruws/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
 <!--End Twitter Icon-->
 <!--Start Google+ Icon-->
 <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJSrlvkJd4wv1jK0xVaXQosnILNEVt8kwV_cL81NBZW7_vmUkTP2y6bg90CNYVrHqzop8T1zSNAYTVMwnHEvlO0u6U0yuT3k1ROQi9MrMhSkv218BWpGzTIwbkHV-QIZPGrWZ2A4mefFIY/s1600/GOOGLE-PLUS-48x48.png"/></a> 
 <!--End Google+ Icon-->
 <!--Start Pinterest Icon-->
 <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhebaso_z__9AhX3FPa6Ii47rQwPFR5PA8Ewr2MFOvGXctYYLclxI0ZJqxNAJMBtHeqjnP2l4_gWt_wVFimDa8e-Hi_2cXbnYHuOkWmnjEEFkLmrvSKUravd2qQaR-lPx17hUtTqjiRpWM7/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>
 <!--End Pinterest Icon-->
 </div>
</center>     
  • Replace all of the necessary info (i.e. URLs) with that of your own.
  • Save the widget and that’s it. You’re done!
View your blog to see how it looks. Have a good day!

Share it Please

Islamicvideoportal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

0 comments:

Post a Comment

Copyright @ 2013 All Tutorials and Information . Designed by Templateism | Love for The Globe Press