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('img'); 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<this.N ;i++) { with(this.icons[i]) { style.width = sMin+"px"; style.height = sMin+"px"; className = "dockicon"; } } this.run = function() { with(this) { for(var i=0;i<N;i++) { var o = icons[i]; var W = parseInt(o.style.width); if(ov && ov.className=="dockicon") { 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+"px"; o.style.height = W+"px"; } if(s >= 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("dock", 48, 85); setInterval("dock.run()", 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.
Your demo is so useful for others.
Thanks for your comment
thats ko0oo0l man
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
You can use same css/Javascript code for your website. You need to HTML Decode entities means replace < to < and " to " in javascript.
Hope, It helps.
You can use same css/Javascript code for your website. You need to HTML Decode entities means replace < to < and " to ” in javascript.
That,s really nice posts man can you tell me how to resize these box sizes. i want them little bigger for my blog thanks.
Thanks a lot mate. Works great.