Flipboard Style Social Media Widget For Blogger

In this postal service im gonna explicate how to awesome termination social media widget amongst low-cal search box
for your blog.So, this include 2 gadget. social profiles icons too search box.You tin hand notice link with
Facebook, Twitter, Google addition ,Pintrest too Rss Feed.you tin hand notice get got a await at inward present page.

In this postal service im gonna explicate how to awesome termination social  Flipboard Style Social Media Widget For Blogger


You may similar these articles
 
     Below Post Social Sharing Widget for Blogger
    
Extracting Hover Style Social Media Widget for Blogger
    
Wooden Style Social Media Widget For Blogger 
     5 Most Baffling Aspects of Pinterest
     Ultimate Traffic Driver For Your Site: Twitter

How to addFlipboard Style Social Media Widget

1. Log inward to blogger work concern human relationship too Click drib down.

In this postal service im gonna explicate how to awesome termination social  Flipboard Style Social Media Widget For Blogger

2. Now direct “Layout” Like Below.

3. Click Add Gadget too select ‘HTML/Javascript

4. Paste below 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(http://3.bp.blogspot.com/-thVugJfodHE/T_2KIQRrP0I/AAAAAAAACCw/92aQhyWOPMk/s1600/green.png) no-repeat scroll take in midpoint 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> <div id="flipboard_btrix"> <center> <a style="font-size:25px;" >Connect With Us </a> </center> <br /> <ul class="flipboard_btrix"> <li><a href="http://www.pinteresr/bloggertrix"><img src="http://4.bp.blogspot.com/-RFXNOXNvtlM/UbSS0UFHh-I/AAAAAAAAAlg/5RweJEBrw3c/s1600/btrix_pinterest.png" title="Flipboard Style Social Media Widget For Blogger" /></a></li> <li><a href="http://www.facebook.com/bloggertrix"><img src="http://2.bp.blogspot.com/-X-AzrrLMUmU/UbSS0BXsreI/AAAAAAAAAlY/2p0Q547x6V4/s1600/btrix_facebook.png" title="Flipboard Style Social Media Widget For Blogger" /></a></li> <li><a href="https://plus.google.com/userId"><img src="http://2.bp.blogspot.com/-dkXrjHjFx6s/UbSS0P8YPaI/AAAAAAAAAlc/tSvC9X75cpw/s1600/btrix_google+.png" title="Flipboard Style Social Media Widget For Blogger" /></a></li> <li><a href="http://www.twitter/bloggertrix"><img src="http://1.bp.blogspot.com/-jQG7qXLQeG4/UbSS1J2680I/AAAAAAAAAl4/8rm8quxTSWs/s1600/btrix_twitter.png" title="Flipboard Style Social Media Widget For Blogger" /></a></li> <li><a href="http://feeds2.feedburner.com/bloggertrix"><img src="http://1.bp.blogspot.com/-5gm3I3l6uLI/UbSS04dF7NI/AAAAAAAAAlw/5LPPDF8wM68/s1600/btrix_rss.png" title="Flipboard Style Social Media Widget For Blogger" /></a></li> </ul> <div id="btrix-searchbox"> <form action="/search" id="btrix-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" />     </form> </div> </div> 

Replace Bloggertrix with your twitter profile
Replace Bloggertrix with your facebook profile
Replace Bloggertrix with your feedburner profile
Replace Bloggertrix amongst your pinterest  Username
Replace UserId amongst your Google Plus User Id

5. Now relieve your HTML/Javascript’. You are done.
If y’all get got whatever work most Flipboard Social Media Widget, Just operate out a comment.
Sumber http://www.bloggertrix.com/