Spinning Candy Social media widget for Blogger/Wordpress

Posted on May 21, 2014 by 
Spinning Candy Social media widget for Blogger/Wordpress
Spinning social media profile widget is very cool and attractive. They easily grab visitor's attention and turn visitor into fan quickly. Couple of days ago Crawlist has published (link) one of cool Spinning social media profile widget, and now here it's the second version of spinning social media profile widget and it is sweeet candy styled. This Spinning candy social media widget offer's 4 major social media profile slot (Facebook, Twitter, Google plus, Linked in and your site's feed). You can use it in Blogger as well as in wordpress too. Let's see how it looks like how to set up and add this into your Blogger and wordpress site.

Spinning Candy Social media widget for Blogger/Wordpress


Live :- Preview
 
Facebook Twitter Google+ Linkedin Feed



Codes- (Offers Big social media profile icons)

<style>/*crawlist.net CSS starts*/
.ks-candy { width:300px; margin:auto;}
.ks-candy 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; opacity:1; margin-right:5px; height:50px; width:50px;}
.ks-candy img:hover {-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); opacity:0.7; margin-right:5px;height:50px; width:50px;}/*crawlist.net CSS ends*/
</style>
<div class="ks-candy"><!--crawlist.net widget starts-->
<a title="Like us on Facebook" href="http://www.facebook.com/your profile" target="_blank"><img src="http://goo.gl/Fgzv8f"/></a>
<a title="Follow us on Twitter" href="http://www.twitter.com/your profile" target="_blank"><img src="http://goo.gl/nXujxh"/></a>
<a title="Circle us on Google+" href="http://plus.google.com/your profile" target="_blank"><img src="http://goo.gl/RAuPQT"/></a>
<a title="Add us on Linkedin" href="http://www.linkedin.com/your profile" target="_blank"><img src="http://goo.gl/cHQHAp"/></a>
<a title="Grab our Feedburner feed" href="http://feeds.feedburner.com/your profile" target="_blank"><img src="http://goo.gl/U7Q6h3"/></a><!--crawlist.net widget ends--></div>


Codes- (Offer's Small social media profile icons) (Stranded)

<style>/*crawlist.net CSS starts*/
.ks-candy { width:300px; margin:auto;}
.ks-candy 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; opacity:1; margin-right:5px; height:32px; width:32px;}
.ks-candy img:hover {-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); opacity:0.7; margin-right:5px;height:32px; width:32px;}/*crawlist.net CSS ends*/
</style>
<div class="ks-candy"><!--crawlist.net widget starts-->
<a title="Like us on Facebook" href="http://www.facebook.com/your profile" target="_blank"><img src="http://goo.gl/KngLRt"/></a>
<a title="Follow us on Twitter" href="http://www.twitter.com/your profile" target="_blank"><img src="http://goo.gl/iSrm0X"/></a>
<a title="Circle us on Google+" href="http://plus.google.com/your profile" target="_blank"><img src="http://goo.gl/dIUVhg"/></a>
<a title="Add us on Linkedin" href="http://www.linkedin.com/your profile" target="_blank"><img src="http://goo.gl/vOMvf9"/></a>
<a title="Grab our Feedburner feed" href="http://feeds.feedburner.com/your profile" target="_blank"><img src="http://goo.gl/aT3xi8"/></a><!--crawlist.net widget ends--></div>


How to add this widget in Blogger
  • Log into your Blogger, select your blog, 
  • Go to 'Layout' tab, From sidebar select 'add a gadget', 
  • From popup window select 'Html/javascript', 
  • Copy following code and paste codes in content box, 
  • And configure, after configuring, save template. 

How to add this widget in Wordpress
  • From dashboard, hover your mouse on 'Apperance' tab, 
  • Form appearance menu select widgets, 
  • Drag and drop 'add text/html' content box in sidebar widget area, 
  • Copy following code, paste in 'text/html' content box, 
  • after configuring see this widget on your wordpress site
See your widget in live action

How to configure
To configuring Social profiles first collect your following social media profile's links and replace with default links. (all social media profile's links are red colored)

Courtesy to
Onextrapixel for icons

Hope y'all like this widget, don't forget to mention how it look like on your site. Happy Blogging ;)