Floating Social Network Share Icons



Floating Social Icons


Floating Social Network Share Icons

These social buttons are appears on every page on blog, whenever some one visits on your bolg or sites then they can easily share any post on social network sites. This wigets is easy to install on blog or sites. This is also eye catching.

How to add this Widgets

  • Login on Blog
  • Click on Template
  • Edit Html
  • Copy and paste all the below code inside template.
  • Save
<!-- Social media share button left side-->
<div class="bookmark" style='top: 25%; position: fixed; left: 6%;'>
<a expr:href="&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href="https://www.blogger.com/null" rel="external nofollow" target="_blank"><img alt="facebook" class="bookmark-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQ7f1GdfofXnRFkkXvzJC7raysAR5SkEsx4TKTmg4V63P8RQrbhS-YlDmrg-7QvN2JE4M2fYIaBymRfOkba6TNChQKAJqYjqEH4lCDb7w6XEEs34rcuxBulONNQPZD4889ZTqNKawgBw/s1600/facebookicon.png" height="35" width="35" style="background: transparent; border: 0px;" /></a>
<br />
<a expr:href="&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href="https://www.blogger.com/null" target="_blank"><img alt="google-plus" class="bookmark-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn3NKdfZVtJxaV5KIy5LZyiuI7auHcuaoZYF7Jn25p4e1vR7BoB5k51boj7p9fwTMIsd1dbLlp-jIAcgwM1M7IoCmuohyoOcqmX9JRrJM0MB7jPLZY4UJMZasMJ9jUm0MOGxv5SBPQ8so/s1600/google-plus-icon.png" height="35" width="35" style="background: transparent; border: 0px;" /></a>
<br />
<a expr:href="&quot;https://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href="https://www.blogger.com/null" rel="external nofollow" target="_blank"><img alt="twitter" class="bookmark-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZpwFbTV_3mCLRpJjxmXOdDkRRRVIRcVKTvoIprLTAP1BpMW8qjaJcFR-bk-oKWFJTgyXXdsoWN9VC0FvyZD1GDZLbMMOeZip3Vd4iFF3EAvIIIfKSTTkrjMCKrh6w5GCdESgIu9kFEYE/s1600/twitter.png" height="35" width="35" style="background: transparent; border: 0px;" /></a>
<br />
<a expr:href="&quot;https://pinterest.com/pin/create/button/?url==&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href="https://www.blogger.com/null" target="_blank"><img alt="pinterest" class="bookmark-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDoIhzd7Qqscn6FF3avmH-MijpbYgcrzzyuy3v55BwjiRRX17xu3ZrQB2cTzZpXo1XcH1Uqe1k1h89uyIPJzWuaIPXl4lX5XKPxqUfNVU42sAxs0mzPqEa6VkJq_DvdsfcPBWH8y3R73U/s1600/pinteresticon.png" height="35" width="35" style="background: transparent; border: 0px;" /></a>
</div>
<!-- end Social media share button left side-->

Settings


  • You can increased or decreased  size on icons
  • You can also change position of floating icons 
  • top:25%; it means icons display 25% below from top.
  •  position: fixed; left: 6%; it means icons display after some distance form left side.



facebook
google-plus
twitter
pinterest

No comments :

Post a Comment