Add a Glued Fixed Flaping Widget in Blogger

We can create a good and professional designs by using the CSS and HTML and they both are sisters of each other and that's why we can create such a professional designs by using these languages so today there is also a new widget is waiting for you, this widget all made by these both CSS and HTML there is no any kind of javascript used so it will be very easy to use and also very easy to install in template and there will no be any kind of error comes in the template and also your template will be remain as same.

Add a Flap Fixed Widget in Blogger

Don't try to change codes because all codes are very highly sensitivity.

• Login to Blogger > Dashboard
• Click on Drop Down Menu and Select Template
• Backup your Template before making any changes to your blog
• Press Ctrl + F and search the code shown below

]]></b:skin>

• Paste below code before above code.

ul.wgsqurflip{
position:fixed;
padding:0 0 3px 0;
bottom: 22%;
margin-left:0px;
float:left;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.wgsqurflip li{
margin:0;
display: block;
width: 25px;
height: 25px;
margin-bottom: 39px;
background: transparent;
text-transform: uppercase;
text-align: center;
}
ul.wgsqurflip li a{
display:table;
font: bold 36px Arial;
width: 100%;
height: 100%;
color: black;
background: transparent;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out;
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
ul.wgsqurflip 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;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.wgsqurflip li a img{
border-width: 0;
vertical-align: middle;
}
ul.wgsqurflip li:hover a{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: transparent;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.wgsqurflip li:hover a span{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

• Now find below code 

</body>

• Paste below code before </body>

<ul class='wgsqurflip'> 
<li><a href='https://www.facebook.com/#'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgglE_h3jmpHw9lflPgiDwBzmqQ0RTW2Pzd9FVriOAaK6-Be4zCsphdy4lDuUvHtLCgnPaLNIlHTVnnesG9f-ChCkmC4hviCPuOtvWtpZYqZsJIKK9suDgBs1HnA3nbisK6br1ecSQ8UuBa/s1600/facebook.png'/></span></a></li> 
<li><a href='http://www.twitter.com/#'><span><img src='http://3.bp.blogspot.com/
-8Vffl9w_qBA/U3zioQ0tjHI/AAAAAAAAERo/rmE_WFsLssM/s1600/twitter.png'/></span></a></li> 
<li><a href='https://plus.google.com/b/#'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguP4EjBh6lgg4ypTbr6L07bONL_fDBt2m56cQSaZy16dgRBkwKRdPkzAE6tRmycwLsIzsmaWz0HcF6X1cz_KQ-NfI9xviPN08dFqw0LGbO2eNHACBfmqrXsLFJfzVW183IPo7RfHhAYZ56/s1600/googleplus.png'/></span></a></li> 
<li><a href='http://feeds.feedburner.com/#'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtT1HH2dAA4oHqGzW-fKpACva9gsNz_UGRLRAXandk4Ka1gd9AsrlYSqwLf9u79axaJgD8bd6Wjj8ih7C-DTPFDnvZ62CGmZCId0-eZY1py5QvDbdpnUNUVsdhWkt1WseM1reg5-1xL1dK/s1600/rss.png'/></span></a></li> 
  <li><a href='http://www.youtube.com/#'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheyPpkG2Zhcbxl9QbYH-a8C1kM3jqdGB0VjnB9Qf4aKpJ9cd7OHoOk-oKO7pYrc37u9bhkzjzQnZMuDmwFeYMhdEv4tYN64XdeauvYVdTYP1YyM1PMF_DP-EOmBwTdNdbas344rEV_GO5s/s1600/youtube.png'/></span></a></li></ul>

• Now finally Save your template.

Make Changes....!

Do some below given changes before save your template.

• Replace # with your username in social media accounts (5 times)