chethstudios Design Magazine: 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.

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;

<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5G7Wv0RjpL_iHUrRORlOyN3G9Pr2DMNuYxbRskv7aRhjLQqVmPLMeOpvNsnJJC5Siyucid_qJGvpx202mXoHp1UsBYwaqQdC40oDKoeTV1WGpvUHbyl7Hx5hWDzk8rqSaqDwjwww5/s1600/music-trans.png' width='30'/><span>Home</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSlIJss_aFMEa87ChYpzNhOkJwm03vSnLomh7SI3SSg8a703hPaMcTyI-IalJOMAZyt2p1R-7-Xh1zvTAews_EtsgGtcm_SDhhlaSt4b_JAXf6t4UB6V6qcQABZEp_h9J-XDUNPq9i/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnC0OOyYLginGBlcNYJWV8B_YqS989dXiY6toBblTkkVjLMpMOn4m29n5INerH5Rbf43DusxX_3GgdgeFs2lEjZZusDT3Q6jtHswNt0XSQolq1Qa-R4JTArPWVxHpY-6iwnRiyQKvN/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkHwhQ5WCvbK3J_f9QdICu_KkyzcnSUHy0somJEAXV0QdKnb2YVHTvLyoBhNBJLF5qEHTzEjkiwN_uXbDO-PRFocBAPAjNkjizNvnkknCEz8pgX7O9687cf_mYJvlDse-f5EYtpfcn/s1600/home-trans.png' width='30'/><span>Clock</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5IEoNfvoR3SWXZ9ZztREo3bo7g_4eaGQeRHHxfypBq3U3c_Os3yFUdrhyphenhyphen9d3-uH8Xnr_0Cn0xB7dDzv1ju3w8AujnY79bSZb3CU_xLJCDUby6MS0Il5P9JCqjdX86K0ZPeUILZd_e/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc0rmnmCreeagrPnTMxw2eYfz9seLlBCGw-dgyzyxh8cvbPo56KKNPSQ0cPPPxmhPaT8pFXa4yYYGr0_wzJ_dQhMcJLS5S4IYhZ3zTtixRE8HrWhD0yTBclddSoRq2keJUdGV0P1n7/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDxHwOAYVIkL7vHfkQ4GODqpsH6RIQi_SaPLC348dT2sjjKKflkKvFdSdomSMVIhjdZU0kG3NsDfYBGMcl3oVE4oUBELs61gw2492Ncqn02ZHtg6sqQpStIoUTGklu6ffqjxKTTsY4/s1600/video-trans.png' width='30'/><span>Email</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9FGS-v0gb9gbfAi_B9cBPKI6ugi9HeWjIIj8xzR8i42yGy8zp8_7sj_79-XzMvfRi6UCK5_JoqNPw5o_gtgrLj9bwicJvyUohmrOHwlZjYj7qvkJ-N26lO6TrVTJ_jpv-cEHQkKQj/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi57fIRg1nD1-kaxblH-IvvM3Bw2tDBPJMWGVo7VRs4uy3ckQVlsyFjoGbNMUfV9cvqgr_mx1Rt-6nHqefia8Q8Tjb9wJJDJHLXzoB_HLpcnSDTnNkXF3rChnq5r62PHtvNcyCM-XsK/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFYk9gLnEPSrjOatze9R-btc08MTx2RClijrra5f_b_lYv8ls5D5Wd-WHtwhqlAONzwNEmWdu9TTHPsBT0rbgvQOn4nFIacpiQMutfrwQ3aXd7Z0k7iOHKgcqLdEsk3Fp0LTK-GDDb/s1600/calendar-trans.png' width='30'/><span>Web</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPY_mbqk0BGbWjc4QwW-MM-ySy_gep0AWPDLL7KNxzW-TjuKEJeP5ny6XstLfdybg2I0tOcGc-kI6X2wQZF0yDvCB5ZPmqBjX4jkSwvVt2w1GKFZK2u-1E3Q_7n2wNlBBNgt1qlHDX/s1600/portfolio-trans.png' width='30'/><span>Web</span></a>
</div>
</div>

<script type="text/javascript">

$(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)

8 comments:

AnonymousJanuary 7, 2009 at 5:38 PM
A very cool menu; thanks very much for sharing
AnonymousJanuary 7, 2009 at 5:40 PM
A very cool menu, thanks for sharing
SudhaJanuary 7, 2009 at 7:24 PM
Looks very nice!!! I would love to have this in my blog :)
AnonymousJanuary 12, 2009 at 3:01 PM
Nice menu cheth Good Found !!!
AnonymousMarch 2, 2009 at 1:46 PM
:))
JoApril 12, 2009 at 5:54 AM
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 ScribblesApril 13, 2009 at 8:05 PM
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 =)
KKMay 9, 2009 at 8:54 PM
=)) It can't work on my blog. Still debugging.

Please Don't Spam that's all. Grab our RSS Feed and we would Love to see you in our comments section more often.

Wednesday, January 7, 2009

Animated Dock menu in Blogger

8 comments: