"Floating" icons in the blogger

How to add static icons on the right side of the screen in the blogger?

1. Open Edit Template (HTML)

2. Save the existing one.

3. Find (ctrl + f) the following word: </body>

4. Copy THIS code above that line.

<!-- SimpleBloggerTutorials.com -->
<div class="flt-wdt">
<!-- Facebook -->
<a href="http://www.facebook.com/Page id" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="http://your-image.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/Your profile" title="Follow me on Twitter" target="_blank"><img alt="Follow me on Twitter" src="http://your-image.png" /></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/feed-address" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="http://your-image.png" /></a>
<!-- Email -->
<a href="http://your blog.blogspot.com/p/Contact page" title="Email me" target="_blank"><img alt="Email me" src="http://your-image.png" /></a>
<!-- Example/Delete -->
<a href="Any Social Site" title="Give it a title"><img alt="Give it a title" src="your image.png" /></a>
</div>
<!-- End -->

Instead of "ID" and "Your image URL", type the link of your page and the link of the icon thumbnail (I recommend .png format 32 × 32 or 48 × 48). Do the same with all the links. You can add another profile if you wish.

5. Find (ctrl + f) the word: ]]> </ b: skin>

6. Copy THIS code above that line.

.flt-wdt{
position:fixed;
right:10px;
top:40%;
}
.flt-wdt img{
float:right;
clear:right;
margin:5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
}

Don't change anything here (unless you know what you're doing)

7. Save and that's it.