Add OS style Dock on your blog

Step 1: Goto template tab on your blogger.

Step 2: Restore a copy of your template.

Step 3: Click on 'Edit HTML' and click on proceed.

Step 4: Find the end of body tag which is </body>. Ideally it will be towards the end of the coding.

Step 5: Copy the following code and paste it just above </body>

<!--OS dock style follow widget - Start-->
<!--Concept by www.zurb.com-->
<!--Optimized for blogger by www.coreblogging.in-->

<style type="text/css">
div.cap { display: block; height: 200px; width: 40px; background: url(http://www.zurb.com/playground/playground/osx-dock/dock-background-left.png) bottom left no-repeat; }
div.cap.left { position: absolute; bottom: 0px; left: 0px; }
div.cap.right { background-position: right bottom; position: absolute; top: 0px; right: 0px; }
ul.osx-dock { display: inline-block; height: 130px; padding: 0 40px 0 0; background: url(http://www.zurb.com/playground/playground/osx-dock/dock-background-left.png) no-repeat right bottom; overflow: hidden; margin: 0 0 0 40px; }
ul.osx-dock li { display: block; position: relative; float: left; width: 50px; height: 50px; margin: 60px 0 4px 0; -webkit-transition: 0.15s linear; -webkit-transition-property: -webkit-transform margin; text-align: center; }
ul.osx-dock li a { display: block; height: 50px; padding: 0 1px; -webkit-transition: 0.15s linear; -webkit-transition-property: -webkit-transform margin; margin: 0;
-webkit-box-reflect: below 2px
-webkit-gradient(linear, left top, left bottom, from(transparent),
color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));
}
ul.osx-dock li a img { width: 48px; }
ul.osx-dock li:hover {
margin-left: 9px; margin-right: 9px;
z-index: 200;
}
ul.osx-dock li:hover a {
-webkit-transform-origin: center bottom;
-webkit-transform: scale(1.5);
}
ul.osx-dock li.nearby {
margin-left: 6px; margin-right: 6px;
z-index: 100;
}
ul.osx-dock li.nearby a {
-webkit-transform-origin: center bottom;
-webkit-transform: scale(1.25);
}
ul.osx-dock li span { background: rgba(0,0,0,1); position: absolute; bottom: 80px; margin: 0 auto; display: none; width: auto; font-size: 11px; font-weight: bold; padding: 7px 6px; -webkit-border-radius: 6px; color: #fff; }
ul.osx-dock li:hover span { display: block; }
div#dockContainer { position: fixed; bottom: 12px; height: 120px; padding: 50px 0 0; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; width: 100%; line-height: 1; z-index: 100; }
div#dockWrapper { width: auto; display: inline-block; position: relative; border-bottom: solid 2px rgba(255,255,255,.35); line-height: 0; }
</style>

<div id="dockContainer">
<div id="dockWrapper">
<div class="cap left"></div>
<ul class="osx-dock">
<li class="active">
<span>Facebook</span>
<a href="http://www.facebook.com/CoreBlogging" title="Facebook" target="_blank"><img src="http://icons.iconarchive.com/icons/minisoft.es/so-smooth-social/48/facebook-icon.png" /></a>
</li>
<li>
<span>Twitter</span>
<a href="http://www.twitter.com/GireeshBlogs" title="Twitter" target="_blank"><img src="http://icons.iconarchive.com/icons/minisoft.es/so-smooth-social/48/twitter-icon.png" /></a>
</li>
<li>
<span>Google+</span>
<a href="http://www.plus.google.com/110594057591342594216" title="Google+" target="_blank"><img src="http://icons.iconarchive.com/icons/minisoft.es/so-smooth-social/48/google-icon.png" /></a>
</li>
<li>
<span>RSS</span>
<a href="http://feeds.feedburner.com/coreblogging" title="RSS" target="_blank"><img src="http://icons.iconarchive.com/icons/minisoft.es/so-smooth-social/48/rss-icon.png" /></a>
</li>
<li>
<span>Youtube</span>
<a href="http://www.youtube.com/CoreBlogging" title="Youtube" target="_blank"><img src="http://icons.iconarchive.com/icons/minisoft.es/so-smooth-social/48/youtube-icon.png" /></a>
</li>
</ul>
</div>
</div>
<div>Supported by <a href='http://www.coreblogging.in' target='_blank'>CoreBlogging</a></div>

<!--Concept by www.zurb.com-->
<!--Optimized for blogger by www.coreblogging.in-->
<!--OS dock style follow widget - end-->

Step 6: Do the following changes:

1. http://www.facebook.com/CoreBlogging - Replace CoreBlogging by user name of your facebook page.
2. http://www.twitter.com/GireeshBlogs - Replace GireeshBlogs by user name of your twitter page.
3. http://www.plus.google.com/110594057591342594216 - Replace 110594057591342594216 by your google+ profile id.
4. http://feeds.feedburner.com/coreblogging - Replace coreblogging by your feedburned id.
5. http://www.youtube.com/CoreBlogging - Replace CoreBlogging by your youtube channel name.

Step 7: Save the changes and Bingo! There you go. See your blog now for awesome Dock style follow widget.