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.
- 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/AVvXsEg-jKis2dwB2NRSJHr1XV7Ax-M3fKYWPiGwbgOBw2ODCm8YtTCmYbAR454ioenQpPA3AOac2wjmqpZvobzB0Ger706ul9j3FwE70TgctL9vKfMb8ZyFEan2RZv0gTxLPIEMBRYrJMdhjxv8/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/AVvXsEgSU1Ocnd7JAa91LzwUdls_gjmQ10aZqbKeiu0IymlJao1moBXYr4C0LpIv_hFurguxiVrOxh3Dlvl0byhbu157wwwAyrW_v95YXCX-FbbIaw_N33Wb96RYAteTO2ETgN8NKehHDDmihcM5/s1600/googleplus.png'/></span></a></li>
<li><a href='http://feeds.feedburner.com/#'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbUOTPxXUtoPUcGl_9yZRz-kMYemBy9AtFwv7bdBNVa7VVx7Uq7Y3K6WVq-SKIon-t4mDlNZT6vJFjz2gzSLVpedBh7Q5Jf0RlnK-iC-0RC5j1Vi11bU8LuaIwVNHpc_KVGYZwUkeI_cr9/s1600/rss.png'/></span></a></li>
<li><a href='http://www.youtube.com/#'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN28_ZEHVFDWjY34qLkNLY_UzPrtCGOsEP6PLLTSgaL4-MeIBBU8VhK6FBRGmTr6IN_PcEvDEoOIC5YY5el5C3enO84Fi9JMSJjGTZvWl9ylr_Aa0kAyH0CwwSVvl3EPVw9uTaMXww5oTD/s1600/youtube.png'/></span></a></li></ul>
Save your template
- Replace # with your username in social media accounts