Animated Dock menu in Blogger

Ever Imagined a total pimped up blog with an animated dock menu in your blogger powered blog. Somewhat similar to your desktop cool right! Well just try it out in a test blog or visit this demo

For your ease of installation,I’ve written a tutorial for this hack to implement Animated dock menu for you blogger blog. Enjoy!

Before you start any hack I recommend you to backup your blog template.

before+uploading Animated Dock menu in Blogger

Find the head tag in the blogger blog

<head>

And right below the head tag add the following code below

Now you will have to edit the part of your template skin for that search for the following code

]]></b:skin>

And before this line add the following code

/* Dock menu by www.iblographics.com
———————————————– */
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{

height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}

/* Fin del dock menu
———————————————– */

And Now its the last code you need to enter into your blog. Please note that you can tweak your dock menu if you are well versed in HTML, Otherwise I recommend you to use it in the default position
Now you need to find the body tag

<body>

And below it add the following code;

<a class=’fisheyeItem’ href=’#'><img src=’http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACbeYOO5I/AAAAAAAAAUk/_Zfiy_TiZtA/s1600/rss2-trans.png’ width=’30′/><span>Email</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQeWOkPI/AAAAAAAAAUU/-1lW9Q0I4-A/s1600/link-trans.png’ width=’30′/><span>Display</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQfGZMrI/AAAAAAAAAUM/7HS7vAdCjls/s1600/home-trans.png’ width=’30′/><span>Clock</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP2ct3iI/AAAAAAAAAUE/Wq7jf6tILFE/s1600/history-trans.png’ width=’30′/><span>Web</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP5KHlaI/AAAAAAAAAT8/0PJpHH9DzLE/s1600/email-trans.png’ width=’30′/><span>Home</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP6w_J0I/AAAAAAAAAT0/RXNWTRfB9po/s1600/video-trans.png’ width=’30′/><span>Email</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACPp7mBQI/AAAAAAAAATs/UKxtQ51vOF0/s1600/rss-trans.png’ width=’30′/><span>Display</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACBJFd9ZI/AAAAAAAAATk/oJ5lL_SGpFI/s1600/email-trans.png’ width=’30′/><span>Clock</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUABzssGnaI/AAAAAAAAATc/hxJx2j7VRQA/s1600/calendar-trans.png’ width=’30′/><span>Web</span></a>

$(document).ready(
function()
{
$(‘#fisheye’).Fisheye(
{
maxWidth: 15,
items: ‘a’,
itemsText: ‘span’,
container: ‘.fisheyeContainter’,
itemWidth: 30,
proximity: 70,
halign : ‘center’
}
)

}
);

</script>

Yea now all you have to do is edit your links by replacing # by your own links.

That’s it! Now enjoy the Dock menu for your blogger template just like the one you use on your desktop! Could you be caring enough to drop a comment here? We would love to design a new theme for this menu. Thank You

Credits: iBloGraphics
(tutorial for animated dock menu in blogger)

Comments
Trackbacks

8 Comments

Liam Alexander

01.07.2009


A very cool menu; thanks very much for sharing
Liam Alexander

01.07.2009


A very cool menu, thanks for sharing
Sudha

01.07.2009


Looks very nice!!! I would love to have this in my blog
anshul

01.12.2009


Nice menu cheth Good Found !!!
Anonymous

03.02.2009


)
Jo

04.12.2009


Looks very cool, but I only got one icon when I copy and pasted the code in (and the icon wasn’t one that was supposed to be there). Ended up having to restore my old template. Very sad …

Would also be great if you included instructions on how to change the icons. Thanks!
Sketches and Scribbles

04.13.2009


Very cool Cheth I love it.. You are truly inspired. now to get this cool stuff on my blog site.. = ) Thank you so much for sharing =)
KK

05.09.2009


=)) It can’t work on my blog. Still debugging.

There are no trackbacks to display at this time.