Aug 26, 2010

Add Mac/iphone style dock menu in blogger blog

In my previous post, I explained the different ways to implement Mac/iPhone style dock menu in your website. In this post, the steps are explained to implement in free hosted blogger blog.
Demo: here

1. Login to blogger account.
2. Go to Design tab > Edit HTML
3. First backup existing template by downloading full template.
4. Add following css before “]]></b:skin>”

#dock {
	width: 100%;
	bottom: 0px;
	position: fixed;
	left: 34%;
#dock a{
	font: bold 12px Arial, Helvetica, sans-serif;
	width: 50px; 
	color: #000; 
	bottom: 0px; 	
	text-align: center;
	text-decoration: none;

#dock a img {
	border: none; 
	margin: 5px 5px 0px; 	

5. Add following html code before </body> tag

<div id="dock">
<a target="_blank" href=""><img src= "" alt="techbrij" lang="TechBrij" title="TechBrij Home" /></a>
<a target="_blank" href=""><img src= "" alt="RSS" lang="RSS" title="RSS subscription" /></a>
<a target="_blank" href=""><img src= ""  alt="Twitter" lang="Twitter" title="Follow on Twitter" /></a>
<a target="_blank" href=""><img src= ""  alt="Facebook" lang="Facebook" title="Follow on Facebook" /></a>
<a target="_blank" href=""><img src= ""  alt="netbrij" lang="netbrij" title="NetBrij-A search engine for .NET Developer" /></a>
<a target="_blank" href=""><img src= ""  alt="Dammani Family Chart" lang="Dammani Family Chart" title="Dammani Family Chart" /></a>

6. Replace image and navigation links with your image and navigation links. Add following script after this:

<script type='text/javascript'>
var xm = xmb = ov = 0;
var M = true;

function dock(dock, sMin, sMax)
this.icons = document.getElementById(dock).getElementsByTagName(&#39;img&#39;);
this.s = sMin;
this.N = this.icons.length;
this.ovk = 0;
this.pxLeft = function(o)
for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
return x;
for(var i=0;i&lt;this.N ;i++)
style.width = sMin+&quot;px&quot;;
style.height = sMin+&quot;px&quot;;
className = &quot;dockicon&quot;;
} = function()
for(var i=0;i&lt;N;i++)
var o = icons[i];
var W = parseInt(;
if(ov &amp;&amp; ov.className==&quot;dockicon&quot;)
if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
s = Math.min(sMax,s+1);
s = Math.max(s-1,sMin);
W = Math.max(W-N,sMin);
} = W+&quot;px&quot;; = W+&quot;px&quot;;
if(s &gt;= sMax) M = false;
document.onmousemove = function(e)
if(window.event) e=window.event;
xm = (e.x || e.clientX);
M = true;
xmb = xm;
ov = (;
window.onload = function()
dock = new dock(&quot;dock&quot;, 48, 85);
setInterval(&quot;;, 16);

7. Click on save template
8. Open your blog and enjoy it.

Don’t forget to add your reaction in comment box.
Hope, It helps.


  1. okay finally i found what i want lol ….. i am in a need to a dock panel like the one in the buttom of your website ….by the way I AM NOT USING A BLOGGER its a php website…… plllzzzzzzz tell me how lol …. i ll make you some links on stumble upon and facebook as a thank you …. plz contact me or post it in ur blog and i ll check it soon …. thanks alot bro for the hints ….. keep the good work

Leave a Reply

Your email address will not be published. Required fields are marked *