animated “Duck Menu” in blogger

Thursday, May 6, 2010 | Tags: blogger tricks and hacks

Digg it | Stumble it | Save to Del.ico.us

Amazing new duck menu now can be added for blogger
blogspot animated navigation menuBlogger graphics
All of us saw duck menu in windows and some where els,

and we all love it and the way it moves,
so it’s going to be great thing to see it again here in our blogger “blogspot” blogs.
and here is live demo to try it Click here
(It’ll open in a new window) and see how nice and charming is it.
We need to say here thanks to iBloGraphics.com

- Before We Start:
- You need to be careful while changing your template.
- Before you make any changes, Back up your template and save it at safe place.

Please go to blogger.com and log into your account,
once you are in your account dashboard click “Layout” and then select ” edit html”
at “edit html” page Make sure to check the “expand widget templates”

after that we’ll start adding the codes,
we’ll add 3 codes, first one, is the java code, second one is is the css and the third will control where is the menu will be displayed on your blog.
so lets go to add the first code.
at “edit html” page find


<code><head><br></code><font color="#009900"><strong></strong></font>

and just after it add the next code


<code><script src='http://iblographics.com/jquery.js' type='text/javascript'/><br><script src='http://iblographics.com/interface.js' type='text/javascript'/><br></code><font color="#009900"><strong></strong></font>

Adding second code.
Find the next code

<code>]]></b:skin><br></code><font color="#009900"><strong></strong></font>

and Just “Before” it add the next code


<code>]]></code><br><code>/* Dock menu by www.iblographics.com<br>----------------------------------------------- */<br>.fisheye{<br>text-align: center;<br>height: 62px;<br>position: relative;<br>}<br>a.fisheyeItem<br>{<br>text-align: center;<br>color: #000;<br>font-weight: bold;<br>text-decoration: none;<br>width: 40px;<br>position: <span class="IL_AD" id="IL_AD6">absolute</span>;<br>display: block;<br>top: 0;<br>}<br>a.fisheyeItem2<br>{<br>text-align: center;<br>color: #000;<br>font-weight: bold;<br>text-decoration: none;<br>width: 40px;<br>position: absolute;<br>display: block;<br>bottom: 0;<br>}<br>.fisheyeItem img<br>{<br>border: none;<br>margin: <span class="IL_AD" id="IL_AD3">0 auto</span> 5px auto;<br>width: 100%;<br>}<br>.fisheyeItem2 img<br>{<br>border: none;<br>margin: 5px auto 0 auto;<br>width: 100%;<br>}<br>.fisheyeItem span,<br>.fisheyeItem2 span<br>{<br>display: none;<br><span class="IL_AD" id="IL_AD1">positon</span>: absolute;<br>}<br>.fisheyeContainter<br>{<br><br>height: 50px;<br>width: 200px;<br>left: 500px;<br>position: absolute;<br>}<br>#fisheye2<br>{<br>position: absolute;<br>width: 100%;<br>bottom: 0px;<br>}<br><br>/* Fin del dock menu<br>----------------------------------------------- */<br></code>

And now we’ll add the last code, be careful adding this code in the right please will help you to make it appeare in the right place,
if you are have expirence with html, you’ll be able to add it where ever you want,
if you don’t have, you’ll add it to the default place,( top of blog ) .
so lets learn how to add it to the default place, find

<code><body><br></code>

And after it add this code


<code><div class='fisheye' id='fisheye'><br><div class='fisheyeContainter'><br><a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjqmKYkV56fQWJ9c7rOQ6wxRYAESFORyC5OlmtzTf_u1OjJO3WG4PvkKqLrAtWMqvjimKjVSZPI72Pv2IsEVuy4c9YDzuaSnv_p92wKr3ZUuHaoUGZwjcsAbYVQ7FDIYcq_juGb-rt/s1600/music-trans.png' width='30'/><span>Home</span></a><br><br><a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH28r7OMkivMsrb3O4UEtPUTO8zetqsiJ3EUQ2Xox_wLIom_RUnQ6FVoQ1dlzsoyrN3hznHOlE_3KCNyQVwXLOnGqcTaVvEOTlYKGxtf9KgmAJiKf6IMzlOXBqs0oQFtDhZYNq-ieC/s1600/rss2-trans.png' width='30'/><span>Email</span></a><br><a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN2c21p1XDuJsB7kUhQha7deiwIiGReZWbpG0y5bftHsyQ0CW3J-G6BDBQnYEzcIE-O1f5d5TtRyPrZKa1moUB7M3BJEBVESVzKejGgmU_91CgHBhHilVd5sq0eBsDHdesSIAoaeg2/s1600/link-trans.png' width='30'/><span>Display</span></a><br><a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZQbwFC3L5lulBe2PpQX4UIT7gWdMv9DJkINXfxLAGSWNee3uLb2QS_dBOecOXu5ZkyewkcE5SUT4g0jIf_7MaUCzn4pFJO2Vd3xkVMwU4NBoI9CWi21p-mNQJklD_aM5nrX4heGZq/s1600/home-trans.png' width='30'/><span>Clock</span></a><br><br><a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhftpeRU24mKuRd3Bb5-fJKmtOfqPZKU4OtenmfkDg5gu6Ku9Yj-kWevkB_-Ge8txjCwzQuLnDIuEzMPcQlh64CPefpt24X_xrpAmDYTB2aBlDyxgx6Q27VPUM2T8YVg3rvtRMbB5jp/s1600/history-trans.png' width='30'/><span>Web</span></a><br><a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj4jyTxMFT79Ifck78CSUqJFPpAsacz9yb5DpngMrSeO18uf7D8HH8UERnFiDdNHJjJLOxPN86Euolc391vjTcZ3Dkfds9-GHMdjap2lcOjPJYXMB9cLo4euZfFx15FxA4F4HUTmqb/s1600/email-trans.png' width='30'/><span>Home</span></a><br><a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUr0DSW-V6bs45mtEOnbsPNaXGe5rq5jkeGYIsPRy80JNyppFkTegfteby62pbX11KENpTnQPeGXXCGRzY53BInebh2bQap-sL3QFtJXHfG7et_u4axZIcwM8HiKX4NhqBXDZf_P3w/s1600/video-trans.png' width='30'/><span>Email</span></a><br><br><a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio8gVeA-LN7t7J6Wane3UhpkZjwbjUgSMjHsCoJs1fmpRFoK1aWfCdsHHRBg5QuaYEJ-CIeTs8JJX8TYCqpffosdX1VIGD7k-9evdUYUPxQoEjX_oStOjyHLlJcszmH1bqGjHL9czO/s1600/rss-trans.png' width='30'/><span>Display</span></a><br><a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFdReS7YZ_3HmKUj_L9XyAY3tAHhhiqGvjqvgzLN2gGvDguwb1RT8Zrxh1wuSOwbMbyBPuYBiegnW5ktyt3l84sQcRCPOSe1v9Ep4IEQRuiHZHIDhFpyfQiwqkxqJ5TdWgLDengAEE/s1600/email-trans.png' width='30'/><span>Clock</span></a><br><a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2tsdNeWN0H4SOJyNxhfvFe7rnzO8a4lh8UWyzI9OQ0yK1gBmSgSxFhw864jtih1Qr3VTSS0Hu8DG-pBVBpmkKarG0o-uR9-_wtmD-XdMsXiEFMF9JNseuSfOlYparXrLv75nYdGJi/s1600/calendar-trans.png' width='30'/><span>Web</span></a><br><br><a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdOQivziO1TE0yg1xxwZ_vfzZp9ZyLOt6xf_EGyIi4DFMPfmSlhOFUW59YmQd5cuOh2ikBzDRvUVJQSLjLazHbBX_vpm79jFNTGj4hTCBqq5MEJ9835719Fw941kIVxbFcn6eylf_o/s1600/portfolio-trans.png' width='30'/><span>Web</span></a><br></div><br></div><br><br><script type="text/javascript"><br><br>$(<span class="IL_AD" id="IL_AD7">document</span>).ready(<br>function()<br>{<br>$('#fisheye').Fisheye(<br>{<br>maxWidth: 15,<br>items: 'a',<br>itemsText: 'span',<br><span class="IL_AD" id="IL_AD2">container</span>: '.fisheyeContainter',<br>itemWidth: 30,<br>proximity: 70,<br>halign : 'center'<br>}<br>)<br><br>}<br>);<br><br></script><br></code>

Now click save and go to your blog to see the new menu and enjoy,
if any one have any suggestions about this menu icons and size please comment,
We’ll add new skins for this menu soon