Sunday, May 28

Floating Social Media Share Button For Blogger

Floating Social Media Share Button For Blogger

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 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:
  • 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 != &quot;true&quot;'><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='atset'><div style='position:fixed;width:50px;height:auto;left:5px;top:150px;z-index:9999;'><a expr:href='&quot;; + data:blog.url' target='_blank' title='Share On facebook'><img src=''/> </a><a expr:href='&quot;; + data:blog.url' target='_blank' title='Share On Google+'> <img src=''/> </a><a expr:href='&quot;;url=&quot; + data:blog.url' target='_blank' title='Share On linkedin'> <img src=''/> </a><a expr:href='&quot;; + data:blog.url' target='_blank' title='Share On twitter'> <img src=''/> </a><a expr:href='&quot;whatsapp://send?text=&quot; + data:blog.url' target='_blank' title='Share On whatsapp'> <img src=''/> </a><a expr:href='&quot;; + data:blog.url' target='_blank' title='Share On stumbleupon'> <img src=''/> </a><a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;;+Math.random()*99999999);document.body.appendChild(e)%7D)());' title='Share On pinterest'> <img src=''/> </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.


  1. I really loved reading your blog. It was very well authored and easy to understand. Unlike other blogs I have read which are really not that good.Thanks alot!jogos friv gratis 2019
    Jogos 2019
    jogos friv

  2. Whoaa,fantastic website framework!The time have you been posting pertaining to? you have made writing a blog appearance quick. The full appear within your website is exceptional, while well because subject material!
    kizi 2 player racing games
    free games
    friv free online Games 2019

  3. The cultural history of Inter-war Europe is filled with such powerful and influential interpretations of a reality that defeats the human capacity to imagine evil. Take Picasso's Guernica for instance. In June 1937, Picasso finished painting the Modernist classic in response to another April tragedy: the bombing of the Spanish city of Guernica during the civil war. It was his anguished creativity reacting to George Steer's eyewitness account of the incident.
    Jogos para crianças 2019
    360 jogos gratis
    friv online Games for kids 2019