Color flip Social media widget for Blogger/Wordpress

Color flip Social media widget for Blogger/Wordpress
Sprite Color flip social media profile widget is very popular and modern looking widget what can be found on most websites and blogsites header or footer nowdays. These widgets icons change color on mouse hover, right? These social media widgets are made of a CSS image transition technique call CSS sprite. use a two layer of icons base background and design the background position like that change it's icons color on mouse hover with flip effect. CSS sprite widget reduce HTTP request on server and because a general widget if have 10 icons than every time your page's load this widget will make 10 http request  on server, but using magic of CSS sprite you can have 10x faster widget performance plus if your CSS sprite widget show 10 icons with hover effect will show 20 icon on a single widget very simple! Here I made a css sprite widget for Blogger and wordpress. This Sprite flip social media widget contains basic 8 social media profiles Facebook, Twitter, Pinterest, Google, Instragram, Youtube, Linkedin and feed burner profile slot. It easy to configure and adding your site. Let's see how it looks like and how to add this widget in your blogger blog, wordpress sites.

 Color flip Social media widget for Blogger/Wordpress



/* CSS starts*/
ul.ks-spriteiconz {float:right;}
ul.ks-spriteiconz li {float:left;list-style: none outside none;border:none;}
ul.ks-spriteiconz li a{background-color:transparent;background-image:url('');background-repeat:no-repeat;background-size:321px;border:0 none;color:white;direction:ltr;display:block; height:41px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:40px;}
.ks-spriteiconz li a{background-image:url('')}
ul.ks-spriteiconz li.facebook a{ background-position:0 0}
ul.ks-spriteiconz li.twitter a{ background-position:-40px 0}
ul.ks-spriteiconz li.pinterest a{ background-position:-80px 0}
ul.ks-spriteiconz a{ background-position:-120px 0}
ul.ks-spriteiconz li.instragram a{ background-position:-160px 0}
ul.ks-spriteiconz a{ background-position:-200px 0}
ul.ks-spriteiconz li.linkedin a{ background-position:-240px 0}
ul.ks-spriteiconz li.feed a{ background-position:-280px 0}
ul.ks-spriteiconz li.facebook a:hover, #sidebar ul.ks-spriteiconz li.facebook a:hover{ background-position:0 -40px}
ul.ks-spriteiconz li.twitter a:hover, #sidebar ul.ks-spriteiconz li.twitter a:hover{ background-position:-40px -40px}
ul.ks-spriteiconz li.pinterest a:hover, #sidebar ul.ks-spriteiconz li.pinterest a:hover{ background-position:-80px -40px}
ul.ks-spriteiconz a:hover, #sidebar ul.ks-spriteiconz a:hover{ background-position:-120px -40px}
ul.ks-spriteiconz li.instragram a:hover, #sidebar ul.ks-spriteiconz li.instragram a:hover{ background-position:-160px -40px}
ul.ks-spriteiconz a:hover, #sidebar ul.ks-spriteiconz a:hover{ background-position:-200px -40px}
ul.ks-spriteiconz li.linkedin a:hover, #sidebar ul.ks-spriteiconz li.linkedin a:hover{ background-position:-240px -40px}
ul.ks-spriteiconz li.feed a:hover, #sidebar ul.ks-spriteiconz li.linkedin a:hover{ background-position:-280px -40px}
/* CSS ends*/
<! sprite widget starts-->
<ul class="ks-spriteiconz">
<li class="facebook">
<a href=" profile" target="_blank" title="Join us on facebook" rel="nofollow"></a></li>
<li class="twitter">
<a href=" profile" target="_blank" title="Follow us on Twitter" rel="nofollow"></a></li>
<li class="pinterest">
<a href=" profile" target="_blank" title="Follow us on Pinterest" rel="nofollow"></a></li>
<li class="google">
<a href=" profile" target="_blank" title="circle us on Google+" rel="nofollow"></a></li>
<li class="instragram">
<a href=" profile" target="_blank" title="Follow us on instragram" rel="nofollow"></a></li>
<li class="youtube">
<a href=" channel" target="_blank" title="Subscribe us on Youtube" rel="nofollow"></a></li>
 <li class="linkedin">
<a href=" profile" target="_blank" title="Follow us on Linkedin" rel="nofollow"></a></li>
<li class="feed">
<a href=" id" target="_blank" title="Never miss a post" rel="nofollow">
<! sprite widget ends-->

How to add this widget in Blogger
  • First log in to your Blogger, select your Blog, 
  • Go to 'Layout' tab then click 'add a gadget'  
  • Select 'html/javascript'  from pop up menu. 
  • Copy following codes and configure

How to add this widget in Wordpress
  • From dashboard hover mouse on appearance tab,
  • From appearance menu select 'widgets', 
  • Then drag and drop 'Text' content box in widget area, 
  • Copy following codes and paste into 'text' box
  • For new dashboard: Click on 'Text' add it to sidebar and paste following codes.

How to configure
Configuring this widget is very easy, First collect your following social media profiles direct links and replace with default links. Example- profile with your Facebook fan page link. And configuring feedburner replace feed id with your website's feedburners id. Configurable links are pink colored.

So any question about this Color flip social media widget leave with comment ;) happy blogging!

Popular posts from this blog

Easily Get 50000 free Backlink for your website

13 Best Forum CMS/Script to use

7 best CMS/script for building Social networking website

Add Cool Social Media Sharing icons below posts in Blogger

6 Best Local Web Server software

12 best free Article Rewriter/Spinner you can use

Read Download Stephen King's Novels ePub & Apk

Read Download ePub Harry Potter Books & Apk

10 Best Free Flash Editor software to use

Top 6 Best Alternatives to ZBIGZ