October 21, 2014

Tuesday, October 21, 2014
Flipping TV icon Social Media widget for Blogger/Wordpress
After publishing some unique fancy social media widget like spinning Coffee cup and Candy or Social media widget with fan count I thought about to publish something fancier looking social media widget for bloggers. Than I found this awesome TV icon set on web and realize to build something upon it. Using CSS3 webkit perspective and webkit transform rotate (both generates 3D sideway flipping effect) on icons I build this widget. Flipping TV icon social media widget offers 6 slots Facebook, Twitter, Google plus, Linked in, Pinterest and Feedburner. If you planning to use this widget on a small space of your sidebar, Bad news this widget usually will eat up some spaces on sidebar! Let’s see how it looks like, how to install it on Blogger and Wordpress blogs and how to configure. Read on-

Flipping TV icon social media widget

Preview-

Flipping TV icon Social Media widget for Blogger/Wordpress


Live demo- (Click here)

Codes for copy-

<style>/*crawlist.net CSS starts*/
.ks-total {width:280px;}
ul.ks-tvflip{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.ks-tvflip li{
display: inline-block;
width: 80px;
height: 80px;
margin-right: 5px;
background: white;
font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.ks-tvflip li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.ks-tvflip li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 15px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.ks-tvflip li a img{
border-width: 0;
}
ul.ks-tvflip li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #f5f5f5;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.ks-tvflip li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}/*crawlist.net CSS ends*/
</style>
<!--crawlist.net tv flip starts-->
<div class="ks-total">
<ul class="ks-tvflip">
<li><a href="http://www.facebook.com/your profile" target="_blank" title="Join us on Facebook"><span><img src="http://goo.gl/SU736D"/></span></a></li>
<li><a href="http://www.twitter.com/your profile" target="_blank" title="Follow us on Twitter"><span><img src="http://goo.gl/2qDw5L"/></span></a></li>
<li><a href="http://plus.google.com/your profile" target="_blank" title="Circle us on Google+"><span><img src="http://goo.gl/80Vvf3"/></span></a></li>
<li><a href="http://www.linkedin.com/your profile" target="_blank" title="Follow us on LinkedIn"><span><img src="http://goo.gl/qanuj0"/></span></a></li>
<li><a href="http://www.pinterest.com/your profile" target="_blank" title="Follow us on Pinterest"><span><img src="http://goo.gl/ywUW68"/></span></a></li>
<li><a href="http://feeds.feedburner.com/your feed" target="_blank" title="Subscribe and Get update"><span><img src="
http://goo.gl/jIZC9f"/></span></a></li>
</ul>
</div><!--crawlist.net tv flip 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
  • 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. Links are shown in pink color
  • To configure Feedburner email subscription First collect your website's unique feed id. it can be find in this link https://feeds.feedburner.com/yourFeedId , and replace FeedId with your feed name. it red colored.
So, what you think about this widget and how it working on your Blogger or Wordpress blog don't forget to mention or give a feedback :) I would loved to hear.

0 comments:

Post a Comment

 
Copyright © 2013-16 Crawlist All Right Reserved
Designed By Me {K.Shazzad}