Flip Style Social Media Subscribe Widget With Search Box

0 /

Also Read

Flipboard Style Social Media Subscribe Widget With Search Box


How To Add Flip Style Social Media Widget For Blogger

1. Log in to blogger account.
2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code
<style type="text/css">
#flipboard_bloggersstand{ width:300px;}
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
ul.flipboard_bloggersstand 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_bloggersstand li a{
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_bloggersstand li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
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_bloggersstand li a img{
border-width: 0;
ul.flipboard_bloggersstand li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff;
-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_bloggersstand li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
#bloggersstand-searchbox {
    border-radius: 5px;
    background: URL(http://3.bp.blogspot.com/-thVugJfodHE/T_2KIQRrP0I/AAAAAAAACCw/92aQhyWOPMk/s1600/green.png) no-repeat scroll center center transparent;
    width: 290px;
    height: 50px;
    disaply: block;
form#bloggersstand-searchform {
    display: block;
    padding: 7px 16px;
    margin: 0;
form#bloggersstand-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;
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
<div id="flipboard_bloggersstand">
<a style="font-size:25px;" >Connect With Us </a>
<br />
<ul class="flipboard_bloggersstand">
<li><a href="http://www.pinterest/bloggersstand"><img src="http://4.bp.blogspot.com/-RFXNOXNvtlM/UbSS0UFHh-I/AAAAAAAAAlg/5RweJEBrw3c/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/bloggersstand"><img src="http://2.bp.blogspot.com/-X-AzrrLMUmU/UbSS0BXsreI/AAAAAAAAAlY/2p0Q547x6V4/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/115587840274121878323"><img src="http://2.bp.blogspot.com/-dkXrjHjFx6s/UbSS0P8YPaI/AAAAAAAAAlc/tSvC9X75cpw/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/bloggersstand"><img src="http://1.bp.blogspot.com/-jQG7qXLQeG4/UbSS1J2680I/AAAAAAAAAl4/8rm8quxTSWs/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/bloggersstand"><img src="http://1.bp.blogspot.com/-5gm3I3l6uLI/UbSS04dF7NI/AAAAAAAAAlw/5LPPDF8wM68/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
<div id="bloggersstand-searchbox">
<form action="/search" id="bloggersstand-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Search..." />
        <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />

  • Change bloggersstand with your Feedburner ID .
  • Change bloggersstand with your Facebook username.
  • Change bloggersstand with your Twitter Username.
  • Change 115587840274121878323 with your Google Plus Username.
  • Change bloggersstand with your Pinterest Username.
5. Now save your 'HTML/Javascript'. Done !

how to Flip Style Social Media Subscribe Widget With Search Box,subscriber,sharing,subscription gadget for blogger blogspot,sidebar widget social network profile follow us join connect with us widget for blogger



Post a comment Blogger Disqus

0 Comments on "Flip Style Social Media Subscribe Widget With Search Box" So Far - Comment Now!
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Team Bloggersstand