Color flip Social media widget for Blogger/Wordpress

Posted on July 05, 2014 by 
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


Preview-

Codes-

<style>
/*crawlist.net 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOqHRiumvnnHnx2prxx4I3UTD2ExE1G0JEsk70pxxXXkXkuIv0roX6jR1W83tHkDTePK6zwiggvCIwRlmRdZ6nFY-mhJu8mYKwdJDvWx5Q90K4TqWZ61aeaZQ6vioK0m5wA-RfXafn7tZL/s1600/l.png');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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOqHRiumvnnHnx2prxx4I3UTD2ExE1G0JEsk70pxxXXkXkuIv0roX6jR1W83tHkDTePK6zwiggvCIwRlmRdZ6nFY-mhJu8mYKwdJDvWx5Q90K4TqWZ61aeaZQ6vioK0m5wA-RfXafn7tZL/s1600/l.png')}
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 li.google a{ background-position:-120px 0}
ul.ks-spriteiconz li.instragram a{ background-position:-160px 0}
ul.ks-spriteiconz li.youtube 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 li.google a:hover, #sidebar ul.ks-spriteiconz li.google 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 li.youtube a:hover, #sidebar ul.ks-spriteiconz li.youtube 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}
/*crawlist.net CSS ends*/
</style>
<!--crawlist.net sprite widget starts-->
<ul class="ks-spriteiconz">
<li class="facebook">
<a href="http://www.facebook.com/your profile" target="_blank" title="Join us on facebook" rel="nofollow"></a></li>
<li class="twitter">
<a href="http://www.twitter.com/your profile" target="_blank" title="Follow us on Twitter" rel="nofollow"></a></li>
<li class="pinterest">
<a href="http://www.pinterest.com/your profile" target="_blank" title="Follow us on Pinterest" rel="nofollow"></a></li>
<li class="google">
<a href="http://plus.google.com/your profile" target="_blank" title="circle us on Google+" rel="nofollow"></a></li>
<li class="instragram">
<a href="http://www.instragram.com/your profile" target="_blank" title="Follow us on instragram" rel="nofollow"></a></li>
<li class="youtube">
<a href="http://www.youtube.com/your channel" target="_blank" title="Subscribe us on Youtube" rel="nofollow"></a></li>
 <li class="linkedin">
<a href="http://www.linkedin.com/your profile" target="_blank" title="Follow us on Linkedin" rel="nofollow"></a></li>
<li class="feed">
<a href="http://feedburner.com/feed id" target="_blank" title="Never miss a post" rel="nofollow">
</a></li></ul>
<!--crawlist.net 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- http://www.facebook.com/your 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!