Flipping Social Widget with Subscription Box

Flipping Social Widget

Here Flipping Mean when you bring mouse on FB,G+ or Twitter Button it will flip vertically and animate.

To add this Blogger gadget:

• Go To Blogger.
• Go To Layout and click on add gadgets.
• Select HTML/JAVA SCRIPT.
• Copy following code and Paste There...in Body Section

Code:

<style type="text/css">

#flipboard_btrix{ width:300px;}

ul.flipboard_btrix{

margin:0;

padding:0;

list-style:none;

-webkit-perspective: 10000px; 

-moz-perspective: 10000px;

-o-perspective: 10000px;

perspective: 10000px;

}

ul.flipboard_btrix li{

display: inline-block;width: 55px; height: 50px;margin-right: -px; background: white;font: bold 36px Arial; 

text-transform: uppercase;

text-align: center;

cursor: pointer;

}

ul.flipboard_btrix 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.flipboard_btrix li a span{

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

padding-top: 5px; 

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.flipboard_btrix li a img{

border-width: 0;

}

ul.flipboard_btrix li:hover a{

-moz-transform: rotateY(180deg); 

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

background: #cef1ff; 

-webkit-border-radius:7px;

-moz-border-radius:7px;

border-radius:7px;

-webkit-box-shadow:0 0 5px #eee inset;

-moz-box-shadow:0 0 5px #eee inset;

box-shadow:0 0 5px #eee inset;

}

ul.flipboard_btrix li:hover a span{

-moz-transform: rotateY(180deg); 

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

}

#btrix-searchbox {

    border-radius: 5px;

    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-AbPsSzwTBw8tzKwKB-5SfInPKwVPJvzOQRJG7BCSvPbDBLX3iuPcQDvFQpu9BG7g6l2A0lSsBAR_BRCe9iSM4hCwyPAGmQeJuJcbe6phYrMKYFElab695PvtDBSOkWKaqlszap41wNO6/s1600/green.png) no-repeat scroll center center transparent;

    width: 290px;

    height: 50px;

    disaply: block;

}

form#btrix-searchform {

    display: block;

    padding: 7px 16px;

    margin: 0;

}

form#btrix-searchform #s {

    padding-left: 24px !important;

    padding: 7.5px;

    margin: 0;

    width: 198px;

    font-size: 16px;

    font-family: georgia;

    font-style: italic;

    color: #666666;

    vertical-align: top;

    border: none;

    background: transparent;

}

form#btrix-searchform

#sbutton {

    margin: 0;

    padding: 0;

    height: 40px;

    width: 74px;

    vertical-align: top;

    border: none;

    background: transparent;

}

</style>

<center>

<span style="font-size:22px;" >Follow Us </span>

<br /><br />

<div id="flipboard_btrix">

<ul class="flipboard_btrix">

<li><a href="http://www.facebook.com/allin1web"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOy-Mzhyphenhyphen_Jm-fwgw0RmLFJihjpZtvtfcYJUcdbnKAAlfgKa9fKH-T2y7hNBEoD9J7NxfJH-wPCj0Kses_j3ff44GTZsczc7S6h6qmqOk494uDfPIJ_hYKZNynrXN1rKgf6hxz6F33X3BuB/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>

<li><a href="https://plus.google.com/Google+ ID"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJ964fnWLponZUM-xYciIgTXf_dQUlS6f_sJPl0jlG4rNgRasWfqBl_ZvKDP3U88ywcbWopXvAyga65wXqeBE0kKCrglz_5NzNj5MqjopY3wSwsjiL1MY1dYTE7SL0L_lwCwbAnPSvOzE/s1600/btrix_google+.png" title="Google plus" /></a></li>

<li><a href="http://www.twitter/allin1web"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAcIUTEd89VQU4dd4zKgY08pMY7W1hfGNGJ0TGXv9qMHjlY6J60XfBDSwPH-srZaqfOM7A3Rj5qKq9RT4KOY-lFxPIkzmbHbDE4yDUDGvtk9rhptaR2R6SZnoBHmVqVwHmBQhOTv6nxF9Y/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>

</ul><br />

<b><font color="red" size="+1">Subscribe</font> Us For latest <font color="orange" size="+1">Shayri</font></b>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=allin1-web&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" target="popupwindow">

<input class="follow-by-email-address" name="email" placeholder="Type Your Email address..." type="text" />

<input class="follow-by-email-submit" type="submit" value="Subscribe" />

<input name="uri" type="hidden" value="allin1-Web" />

<input name="loc" type="hidden" value="en_US" />

</form>

</div></center>

Customization:

• Replace   allin1-Web with your RSS user Name
• Replace Google+ ID with your G+ ID No.
• Replace allin1web with your FB and Twitter User name Respectively