Spinning Coffee Cup Social media widget for Blogger/wordpress

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 ;)

Popular posts from this blog

7 best CMS/script for building Social networking website

Add Cool Social Media Sharing icons below posts in Blogger

13 Best Forum CMS/Script to use

Easily Get 50000 free Backlink for your website

Read Download ePub Harry Potter Books & Apk

Read Download Stephen King's Novels ePub & Apk

11 Best Free Domain register sites to know about

10 Best Free Flash Editor software to use

12 best free Article Rewriter/Spinner you can use

Top 6 Best Alternatives to ZBIGZ