Floating Social icons for Blogger

Floating Social 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.

Live Demo

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-->
<style>
#socialicons img { -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} #socialicons img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}
</style>

<div id="socialicons" style="left: 1%; position: fixed; bottom: 1%;">
<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/AVvXsEgzJsVU_NGWveXqlrwoTqTooCf7CdZGvi-CTyDuxKTIEvyKs4XcOXf7KZ5oMVXTCRR5xDcWnyRI4fp-v9Xk07nbP_2zy9rHidgNahwXopnm51CIj4p7EGSYCL4ceCgLNPwGDeOvmjSiYQRI/s1600/facebook.gif" height="55" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px;" width="50" /></a>

<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/AVvXsEigfkToQWhWaA6ewyPAKFrY6o4ATvgkUbxPY4LKqouQTgKxnRpudfX1sW-nksdWHw9RWvuBNO8Ah2-6pPXuc1pdeA3Y6Uxpmddu14c7Y_wOE74ozJaV5rS2taV6-vJ4NuRl_q4Vm9mfV75U/s1600/google++black.png" height="55" style="background: transparent; border: 0px;" width="50" /></a>

<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/AVvXsEidYiwqNQVCRMmG_f5Dm0nRTE8032x2zC4lNy4YuQaacGlwAQjvd8uHnkCV57epPIHI_u_cZMiO3rwxahznLG6tZouAfVSmWdrMeQJhkT2gHNw8oTvUOMYfDckqKokRI6FS0UIOcc4WRJYs/s1600/twitter.png" height="55" style="background: transparent; border: 0px;" width="50" /></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 
• bottom:1%; it means icons display 1% up from bottom.
•  position: fixed; left: 1%; it means icons display after some distance form left side.