Blogger Flipboard Style Social Share Widget

• LIVE DEMO

Add an awesome flipboard widget to your Blogger blog using this amazing tutorial from Bloggertrix. This one includes social icons for Pinterest, Facebook, Twitter and Google+. Also, a useful search box is right below all these social networks.

How To Add The Widget To Your Blog

1. Go to your blogger dashboard
2. Click on "Design" > "Page Elements" > "Add a Gadget"
3. Choose "HTML/JavaScript" from the list of the gadgets
4. Copy and paste the code below in the content box

<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/AVvXsEghOS4eg8Zbc9dFvPVZ9sQgQvX_5DJw_IczZz0bdznSlpuwHyMkX88TPuwy0lpZ1wPzV16SfrFrTYcOW_UCMGYU18skQ5XPniXoHvkCi4dovaoggBAwu5aMa-AbddkLf8v3IAE1Gx3wY3Kx/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><div id="flipboard_btrix"><center><a style="font-size:25px;" >Connect With Us </a></center><ul class="flipboard_btrix"><li><a href="http://www.pinterest/VAŠ-URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Vn4KowUsYSEzTzdUjNqejcX_8FQVNi6oYsgbaz7F8Y8ZUTmL2Co_SHnHsgjUb9lEb2ngMvYGfbyx3firXNCG_AX5nVhwKSon-YZIU0I4sUbvEBA8QBUbbql1LZ5TEnOktuNjtwqbiRg5/s1600/btrix_pinterest.png" title="Pinterest" /></a></li><li><a href="http://www.facebook.com/VAŠ-URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyKzQVRVkDrGo1nL-1zWr_WZmjFKkQP_RyTmHHWSbuVUboYRvt3OBwJP205EielEYIDm2BhCkHIGtpfbSWOIktsaUW08rA6pNFuYQ3VYnz-BBhf2WUrr8nomUGol9paLdgrVGyXCk6LNV5/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li><li><a href="https://plus.google.com/VAŠ-URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGB2S-BIQJ_W_SalndKS0M6CI955eAUavUl9JTvSYyipP9c6NXccsqZ7asumv9c5GaVTr4XZX6KBejMFUrpQlGgU-u5W-2XhIO11F16_SQ7zVStysNT3cBF3pU1BVQFJzBb1dSnCFS5MW/s1600/btrix_google+.png" title="Google plus" /></a></li><li><a href="http://www.twitter/VAŠ-URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAKpJcuYhjMK2Yrzp1hdu0ZJx_lgWzIczJIO_NDPXlbZUahOr46tkD7ffpV2x7_ybE3j-PWgmap0LtXWl1r3HXr9_KDZfhWg_LY0ekSLMaiRqZ3_1VFhYo4R3j8ieLcMZIDjsXiBbjCLvn/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li><li><a href="http://feeds2.feedburner.com/VAŠ-URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb_jVR_cRfYldbbb8nyGGae9Sg6jRAk1ZbTwUghoR2ciuYqSxkgSHkYzW2S-N69Z6P4JdPf4jd8BmNENHkACZaQFs0QQfdA5nEl2KO54LU4CmkknUazfFP5G5UnObhyphenhyphenbXYvlFwdpjS630j/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li></ul><div id="btrix-searchbox"><form action="/search" id="btrix-searchform" method="get"><input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." /> <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" /> </form></div></div>

Replace values and URLs with your feed title/username
Now when you added effect, feel free to share, please leave a comment if you like and that's happy bloging.