Floating share buttons are designed to float in a fixed position and this position can be controlled using CSS. Floating social media share buttons remain fixed in a particular position even if reader scrolls the page which makes them the best option for increasing social engagement.
These floating share buttons are completely designed by the livthreads.com using pure HTML and CSS. If you like this gadget you can share these codes but don't forget to give a backlink.
Key Features:
Step1: Go to Blogger > Theme > edit html .
Step2: Click any where in the codes and search for </body> using Ctrl + F. Paste below codes before </body>
Step3: Now, Search for ]]></b:skin> and place below CSS before it.
Step4: Save changes , that's it. Check you post pages.
Key Features:
- Faster and smooth function.
- Requires no external data or scripts.
- Only appears in post pages.
- No mobile tag.
- Easy installment.
How to install floating social share button in blogger ?
Step1: Go to Blogger > Theme > edit html .
Step2: Click any where in the codes and search for </body> using Ctrl + F. Paste below codes before </body>
<b:if cond='data:blog.isMobileRequest != "true"'><b:if cond='data:blog.pageType == "item"'><div class='atset'><div style='position:fixed;width:50px;height:auto;left:5px;top:150px;z-index:9999;'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' target='_blank' title='Share On facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnkT6WHG_4FR-IW76ZAFpuQJ5h8LZHMBc4bAEUk24S3Y8hWWhfKxn3vHCCcu45g64A12Pj-7bkDe9a-H1G3-48iHgj1NiWECCZwaav6fJfPnbCMkDfdKsZvX1EmfAX14YzAqCB4sWB7TGG/s1600/facebook-icon-preview.png'/> </a><a expr:href='"https://plus.google.com/share?url=" + data:blog.url' target='_blank' title='Share On Google+'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimjEipSw0lRSAXy-E8HnirEp7Fo9b4LQpmxF-YrAwb1GcDDzCusfeyDpWEYakYK2nIgWM2zfd7DcgvbybiuFsjDLhq_oPcRt5152rl5iZ0jVFfx5WefTtQakyBE02zGk8OgYY6ZISOzeKq/s1600/unnamed.png'/> </a><a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:blog.url' target='_blank' title='Share On linkedin'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieDbtWQ2ghTsncXywM-UOZfisNtk4OG3yq5qIxiIobCt0Ex7xgC-Qgt7Hd2dzrebv2qn5qjtizXj_QHfvME6mcu3V_ODM5Dq7851N6vZbiHJCN_oSa5Wdx6l1imvoeAgN88yhhJnauR5P3/s1600/linkedin-recruiters-connection.png'/> </a><a expr:href='"https://twitter.com/share?url=" + data:blog.url' target='_blank' title='Share On twitter'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtDz9_7BeN7hVNVNkYIWGtXhx4mqZL4E1i_ahkwNyv-DmsEJosYO25lI3SoiMdom5l5mobtnK09yPV-iYyVk-GWeyCqhHUCUUqqtD1g7lvXQ0UGVM4ahPFgr42saSJVdFJGVc8UyLwVi-N/s1600/Twitter.png'/> </a><a expr:href='"whatsapp://send?text=" + data:blog.url' target='_blank' title='Share On whatsapp'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpKffoVbIzbXNW77DrZuqYwXaCJ3_QAS4eYEwyW0Cb891hLBow1XYGtZHUO9GqZgk6nGo-KXp2-lMKJN9j6ZMhp30EyfYwDnmWhpjT6AHnl-_xVK5-8lKdldGCV5nSUUIjPOgODdGgmJz-/s1600/whatsapp-logo-PNG-Transparent.png'/> </a><a expr:href='"http://www.stumbleupon.com/likecontent?url=" + data:blog.url' target='_blank' title='Share On stumbleupon'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5f0hOeRgTgkbeTFIImxmgrn0hGj5SiXLkrcYZ-jJgPLC2GZdeH92HpnsyDWpp-PUASTPnz_exL-bOBU8EFbTQLeEGK-n63Slos-lkSfnt2RREAwb4CZW7rjKhAPrwQRNVMSmqvR537Z3/s1600/unnamed+%25281%2529.png'/> </a><a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' title='Share On pinterest'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn4AKi3dtxiG_VMYZz3k9KnBZk3rDFXRbtpRdW1nch4rJZiNUMrZUZR00AAIlywyiivRzvjv-0u5VVGixjVrg3OdGoTtz8t_467DXyHJgYQFAvjK_vqjjbVvIzzjt65WcCUMrbT3i4j_wH/s1600/pin.png'/> </a></div></div></b:if></b:if>
Step3: Now, Search for ]]></b:skin> and place below CSS before it.
.atset img:hover{transform:rotateY(30deg);}
Step4: Save changes , that's it. Check you post pages.
