Metro Style Social Media Widget And Search Box with CSS Effects For Blogger

6/10/2013 CSS , Metro Style , Widgets 0 Comments

Hi guys today i have an awesome widget for blogger with metro style social media widget and search widget fully metro styled.

Install It Into Blogger

<style type="text/css">
#flipboard_baxe{ width:300px;}
ul.flipboard_baxe{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_baxe 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_baxe 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_baxe 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_baxe li a img{
border-width: 0;
}
ul.flipboard_baxe 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_baxe li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#baxe-search {
    background: none repeat scroll 0 0 #359BED;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}
#baxe-search-box {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 0 none;
    padding: 10px;
    width: 160px;
}
</style>
<div id="flipboard_baxe">
<br />
<ul class="flipboard_baxe">
<li><a href="http://www.pinteresr/macksee88"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqKm3CnILHnxkOEuDWPy10wkCSHQAA6m_3BnKJmxaxZYGpv3F-FsDNRcZF5Wh2yhBaZCtgHsRma06XIzmpvdQKt4YNPXqEY3dsjcrA-S5XgjLe9xfrfREdZKw2XKa2_cyyPmwGlF9obYXV/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/marklin44"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1_0SuWU8Bd2M5pNrKxcEMVdIXH86rQMOvtL1uYhePItH5VyWq94OoCNeXxBKawKajBIoRll15myUIRLpumP_eFhXEYsP2wyrJatjEq6aynPbvUAgtJpmSMaRxkIALORCmUWKJ5yCsQHh1/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj67P-m1vJ5Sy-HlT3elGfIfaaBmIwqfmKqrzgAsepSTv4jR6_X7dnK4p_AOvD0sdFxsEThNOZtny1PNmzl4zRAU73vmW7CsW03_S8WYn_-6hGjEV3lMsnAff7kec1jkpe9R3l-WaRN2kF/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/macksee88"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh400KxxW7MXEWXQHjhY9xE5UKFlGlY80CG8Ote1JPVgc1_zXM1c_011oybSAUfwWHjiCSnSzLstKTNP7QafhzdRMdP2rwcFYHgZlQH4zDQMuNyK__KDi6YGDb0tJY35Ug0AoUhzpHwe-CD/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/bloggeraxe"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXb5eXK9JWfqWed9Pj3oer67tMjodjJgEWNmfTMo2m_CEH9E9hXD1uT0skf92nAWyaFD0d88XGS-yois_KScG3QCjD4BHAfWrx-onrl4_Yex69E6_CjUh5sxPxHoFgtvqR6VQIUmieS110/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>
  <br />
  <center/>
  <div>
  <form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="baxe-search-box" name="q" size="40" type="text" placeholder="  Type! :D "/>
<input id="baxe-search" value="Search" type="submit"/>
</form>
  </div>
</div>

6. Click Save

And DoNe.