Floating Images for Blogger



Floating Images

Floating Images for Blogger


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.

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.



facebook
google-plus
twitter
pinterest

1 comment

  1. nice widget but some not working ...
    http://blogtricksworlds.blogspot.com

    ReplyDelete