Floating Images for Blogger

Floating Images

This is not a simple image but this is also a social share icon for share your post on Facebook. In this widgets you can use any type of image for display on blog. This widgets 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.
• Paste code before </body> tag.
• Save

<!-- Floating Monkey -->
<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="right: 0%; position: fixed; bottom: 0%;">
<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/AVvXsEj2eQsqTeKSfTaFoe1iJWqM9-x6Lb0N9vjv8EgK8jsBBulF3JZ-qujTjHN9V1SHjT9ffuHW6gSSaGW2Edw52Kn6zPFyQx0X52qrFcmtjV9Futo5jqLmVQsmC-SL3_0CMsK_136KgJgXkgLU/s1600/gorilla.png" height="200" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px;" width="130" /></a>
</div>
<!-- end Floating Monkey -->

Settings

• You can increased or decreased  size on icons
• You can also change position of floating icons 
•  position: fixed; bottom: 0% it means icons display 0% up from bottom.
•  right: 0%; it means icons display after some distance form right side.
• you can also change image https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2eQsqTeKSfTaFoe1iJWqM9-x6Lb0N9vjv8EgK8jsBBulF3JZ-qujTjHN9V1SHjT9ffuHW6gSSaGW2Edw52Kn6zPFyQx0X52qrFcmtjV9Futo5jqLmVQsmC-SL3_0CMsK_136KgJgXkgLU/s1600/gorilla.png.