Spinning Coffee Cup Social media widget for Blogger/wordpress

Posted on April 28, 2014 by 
Spinning Coffee Cup Social media widget for Blogger/wordpress
Spinning coffee cup style social media profile widget it's a very appealing and demanding fancy social media profile widget ever! And now you can easily add this very cool and very attractive social media profile widget in your Blogger or wordpress sites and make fan for your site very fast. This widget offer's 4 social media profiles and your site's feed (Facebook, Twitter, Linkedin, Google plus, feedburner). It made with CSS and HTML and enhanced with CSS3 animation. Let's see how it look like, how to set up and add this to your Blogger blogs and wordpress site.

Spinning Coffee Cup Social media widget for Blogger/wordpress


Preview-

Facebook Twitter Google+ Linkedin Feed



Codes- (Offer's Big social media icons)



<style>/*crawlist.net CSS starts*/
.ks-coffee { width:300px; margin:auto;}
.ks-coffee 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-coffee 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-coffee"><!--crawlist.net wwidget starts-->
<a title="Like us on Facebook" href="http://www.facebook.com/your profile" target="_blank"><img src="http://goo.gl/h4b9Yy"/></a>
<a title="Follow us on Twitter" href="http://www.twitter.com/your profile" target="_blank"><img src="http://goo.gl/yUsyHs"/></a>
<a title="Circle us on Google+" href="http://plus.google.com/your profile" target="_blank"><img src="http://goo.gl/Skm7O2"/></a>
<a title="Add us on Linkedin" href="http://www.linkedin.com/your profile" target="_blank"><img src="http://goo.gl/xAQAuf"/></a>
<a title="Grab our Feedburner feed" href="http://feeds.feedburner.com/your profile" target="_blank"><img src="http://goo.gl/TKH2Bu"/></a><!--crawlist.net wwidget ends--></div>


Codes- (Offer's Small social media icons)



<style>/*crawlist.net CSS starts*/
.ks-coffee { width:300px; margin:auto;}
.ks-coffee 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-coffee 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-coffee"><!--crawlist.net wwidget starts-->
<a title="Like us on Facebook" href="http://www.facebook.com/your profile" target="_blank"><img src="http://goo.gl/4WShVO"/></a>
<a title="Follow us on Twitter" href="http://www.twitter.com/your profile" target="_blank"><img src="http://goo.gl/aSeSGl"/></a>
<a title="Circle us on Google+" href="http://plus.google.com/your profile" target="_blank"><img src="http://goo.gl/ezKBvn"/></a>
<a title="Add us on Linkedin" href="http://www.linkedin.com/your profile" target="_blank"><img src="http://goo.gl/qD9f9e"/></a>
<a title="Grab our Feedburner feed" href="http://feeds.feedburner.com/your profile" target="_blank"><img src="http://goo.gl/0mlORO"/></a><!--crawlist.net wwidget 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. 
See your widget in live action

How to add this widget in Wordpress
  • From dashboard, hover your mouse on 'Appearance' 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
For new dashboard
  • Hover mouse on 'Appearance' tab and select widgets, 
  • Select 'Text' and add it to sidebar. 
  • After configuring see this widget on your wordpress site.

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

Courtesy to
Land of web for icons

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