Flipping TV icon social media widget
Preview-
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.
