Flat Flipping Floating Fixed Stay Connected Social Widget For Blogger

We have shared many Social Media widgets with you since we started sharing widgets. We have come up with this new Flat Flipping Floating
Widget For Blogger Nowadays Stay connected Widget are very important websites and blogger owners. Whether you run a website or you are a blogger, you definitely need social subscription widget. To tell your users or visitors about your social media accounts. With the increase of the use of social media, it has rather become a necessity to have social media accounts. But choosing the right social icons according to your theme is also important. You don’t want your visitor to just ignore your social media links, due to ugly looking icons.

This way they not only stay in touch with their users, but also it provides a quick and easy way to promote your posts or products. People won’t visit your website that often as they use their social media accounts.

LIVE DEMO

STEP.1:Insert CSS Style Sheet in Blogger Template

First we will insert the CSS style Sheet to stylize our quote box.

Go to Blogger >> Your Blog >> Template >> EDIT HTML >> Proceed
And now Search For ]]></b:skin> With (CTRL+F)
After you find ]]></b:skin> just above it paste the following coding

ul.flatflipbuttons{
position:fixed;
padding:0 0 3px 0;
bottom: 22%;
margin-left:0px;
float:left;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.flatflipbuttons li{
margin:0;
display: block;
width: 25px; /* dimensions of buttons. */
height: 25px;
margin-bottom: 39px; /* spacing between buttons */
background: transparent;
text-transform: uppercase;
text-align: center;
}
ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
color: black;
background: transparent;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}
ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: transparent; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover a span{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

STEP.2

Go to Template > Edit HTML and click anywhere inside the HTML editor.
Press Ctrl+F (Cmd+F in Mac), and a search box should appear in the upper right corner of the editor.
Type or paste the following code in search box and hit enter

</body>

and paste the follwing code before/above "</body>"

<ul class='flatflipbuttons second'>

<li><a href='https://www.facebook.com/mybloggerstricks'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgywThPaCnSHOPxz8lheAQFGv_mlDbQ0Abc2XA0e7qoUyE9kL-HPE3R1Lhe-9vOLk6yp07n_C2xrR9f2q0C8wN9TB_IovRkFp5jFERTydszSuFizXbba56xtGqhmIXRdQo5YqFV4rICzsTs/s1600/facebook.png'/></a></li>

<li><a href='http://twitter.com/bloggerplanet'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQmg7JoDYVaOc-s12OTYzIbh1hdHG5lM25J9JXI_1nRe6bC5GMmTgyt8CHEGEeU2ohfqn0JWIybrHGxAgdINkAzLIRfz2RvfGzsUjMS2deNuv3xhpIEDt3BB02D_OTSbYRm-LMpBqchA8S/s1600/twitter.png'/></a></li>
<li><a href='https://plus.google.com/u/0/b/115508725363370825317'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCdG5avjZzl1Mgzkl5iek38hnbxdCg8U-ZQKZ5Y3iT4G5_pFei0Mqea0XPx569SW_k_-4mR4r5r-k65hXjbSQt1Vbp3WJJuc0O6SDKXklxaSUVPMTflhuKG5sz2YFkLf6fDXiAvaxJaIjQ/s1600/googleplus.png'/></a></li>
<li><a href='http://www.pinterest.com/bloggerplanet'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9dn9zaPw_EYZtn1vu-pO8qTxcAEE-rU1874IQLd0KiU1-RCb-b8vGLq5cPgLbnszQaj5HNwows2qKUloWh0rpgEI9tFTdSlnYOETiDmXTDfxcwD987Hq82gWQyWDv9Dz_AdeES2AogqON/s1600/pinterest.png'/></a></li>
<li><a href='http://feeds.feedburner.com/bloggerplanet'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE-_pylrz6_sLVqVVFlTvJIfUdc-wULmKmkVWbH6DzaDZWLen_vPSHl6O7d6wOz717rCLoejyg3kBsgi4sjXozVDDzuNWMnCjSZCOBEHEw-pxS7Z8U1c9WMZyJpVJXRrIVMRPgYoGw4MN9/s1600/rss.png'/></a></li>
<li><a href='http://www.youtube.com/bloggerplanet'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcdQjfZTdxEmslYaA0Zes5tDEwh1elMm9OAEk7drO8FmX9bynT3o7gmtMq4cGv1HV1nPdYtPtRPEDpnqGBcBJyv-7do9SaoXG_m1KknzgmLVy4kxp4VM0Iov2iULU9Mt3vTxso6vqCNybO/s1600/youtube.png'/></a></li></ul>