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="http://www.techbrij.com"><img src= "http://www.techbrij.com/wp-content/themes/BrijTheme1/images/Home.png" alt="techbrij" lang="TechBrij" title="TechBrij Home" /></a>
<a target="_blank" href="http://feeds.techbrij.com/techbrij"><img src= "http://www.techbrij.com/wp-content/themes/BrijTheme1/images/Social_RSS.png" alt="RSS" lang="RSS" title="RSS subscription" /></a>
<a target="_blank" href="http://twitter.com/itechbrij"><img src= "http://www.techbrij.com/wp-content/themes/BrijTheme1/images/Twitter.png"  alt="Twitter" lang="Twitter" title="Follow on Twitter" /></a>
<a target="_blank" href="http://www.facebook.com/pages/techbrij/279683683368"><img src= "http://www.techbrij.com/wp-content/themes/BrijTheme1/images/FaceBook.png"  alt="Facebook" lang="Facebook" title="Follow on Facebook" /></a>
<a target="_blank" href="http://www.techbrij.com/nb/"><img src= "http://www.techbrij.com/wp-content/themes/BrijTheme1/images/netbrij.png"  alt="netbrij" lang="netbrij" title="NetBrij-A search engine for .NET Developer" /></a>
<a target="_blank" href="http://www.techbrij.com/dammani/"><img src= "http://www.techbrij.com/wp-content/themes/BrijTheme1/images/Dammani.png"  alt="Dammani Family Chart" lang="Dammani Family Chart" title="Dammani Family Chart" /></a>
</div>

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++)
{
with(this.icons[i])
{
style.width = sMin+&quot;px&quot;;
style.height = sMin+&quot;px&quot;;
className = &quot;dockicon&quot;;
}
}
this.run = function()
{
with(this)
{
for(var i=0;i&lt;N;i++)
{
var o = icons[i];
var W = parseInt(o.style.width);
if(ov &amp;&amp; ov.className==&quot;dockicon&quot;)
{
if(ov!=ovk)
{
ovk=ov;
}
if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
s = Math.min(sMax,s+1);
}
else
{
s = Math.max(s-1,sMin);
W = Math.max(W-N,sMin);
}
o.style.width = W+&quot;px&quot;;
o.style.height = 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);
if(xm!=xmb){
M = true;
xmb = xm;
}
ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
}
window.onload = function()
{
dock = new dock(&quot;dock&quot;, 48, 85);
setInterval(&quot;dock.run()&quot;, 16);
}
</script>

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.

Blogging