New! Metro Style Social Media Widget With Search Box

I received so many positive feedback and emails from my loyal readers for my previous post of Metro UI V3.0 Icons Widget. Today we are going to share another Metro Style Social Media widget with search box. In this widget you can find five different type of social media networks and we can say the most usable networks in social media. It contains 5 social media icons such as: Facebook, Twitter, Google+, Pinterest, Linkedin, YourTube and RSS.

Add It To Blogger Blog

• Go To Blogger Dashboard >> Select Your Blog >> Layout
• Add A Gadget >> HTML/Javascript >> Proceed.
• Copy and Paste The Code Below In HTML/Javascript

<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/gaganmasoun"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEKk1GPYyPdCXhyphenhyphenVpyKBDy217oKGCvcpMNSEkH_V-jx16w8Sp0t10NxYY8ema8TAZABabks9VPKGHyvkrHP-igWW_XWzNC4toPjizIGW7zHFRPU_CpEGDyab33XA5_k6riK-dF-YpTRtaI/s1600/bd_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/BlogsDaddy"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCB4nacApSDhXIRy-X3rTGVSqYiR5z-M1GMgauPrJ_H8ePu806_PhBEk9BDqSVEhaKIsQrnIsLmEULpX9QMWrYsqMMhf2ttzj24J-xjK_D1mDg7FiDODVlOEFtiRhPkOVuK-mFHJHMLBjN/s1600/bd_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/106217413057730068740"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPGDJcoPTS2N-wM2KVBav702brV662yhaPDsT8N6RfSvHSmXLGjGAX_P0aBYU-PmFyM-Ww3Rym5u8yE0jw5xzK9xJSSKq_Fto5vT4W9nQGXKx3iAPQR2SgV1pFqpnBjpSrPZEhseD3zkU9/s1600/bd_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/BlogsDaddy"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2z7WwHdDy13seETo76iRhi3QYnCkYDMLKsNlOzIiTY0BMMMZmWV0HkLu4upvzMcYJGSDMHeu0b_otOIiqmuRPQHV6J9gWIsQmSN6ttHMplEXx04gZzXa80Ba55tsBEKdKPKLCAAlx190W/s1600/bd_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/BlogsDaddy"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifMptdZS9L_ULE7pJfQUTQyH7FiamTdomYJrFy48G9R4PUtuiHnfR1qRItFunEJE9PCzsA8BFnF4KhxrSwWpTk1o0tvNJdrjt3qObWwMO1yePmyYQlE0QNZ9fjDMFBdww0t-rvREaxq73T/s1600/bd_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>

Remember - Now make sure that you changed the colored user ids with your own.

The above mentioned steps are very easy. If you have any question about this widget then you can ask me via comments. Stay Blessed :)