Home » Blogger Tutorials, Tricks and Hacks » blogger graphics » animated “Duck Menu” in blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

animated “Duck Menu” in blogger

animated “Duck Menu” in blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

17,207 views

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


<head>

and just after it add the next code


<script src='http://iblographics.com/jquery.js' type='text/javascript'/>
<script src='http://iblographics.com/interface.js' type='text/javascript'/>

Adding second code.

Find the next code

]]></b:skin>

and Just “Before” it add the next 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 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

 

<body>

And after it add this code


<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQn-ny4I/AAAAAAAAAUc/yy_PBS_YWrc/s1600/music-trans.png' width='30'/><span>Home</span></a>

<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>

<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUABnXdQNdI/AAAAAAAAATU/jPWR6TthALk/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>

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

Liked It ? Please Share

Comments

55 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Anurag says:

    hi, the demo does not seem to be working !

  2. Max says:

    hi Anurag
    thanks for your attention.
    we fixed it and now it work
    try it

  3. anurag says:

    Just a suggestion!
    You can actually improve it by using ‘ ALT ‘ feature for every image. this will make it easier for user to know what each image standa for.

  4. Max says:

    thanks anurag for your suggest, we’ll apply it as soon as possible

  5. Hi , i add it carefully ,But not see in my blog

    pls check my blog

  6. Oh ..Thz Sir I got it .I `m very happy .thx alot

  7. adiguna says:

    thanks.. its help full for me..

  8. KISHOR says:

    thanq for giving us the ideas
    can we can generate form for data calection form design by us
    data will store in blog
    data only show after blgger login

  9. Max says:

    KISHOR
    please explain you words, we don’t understand

  10. I added it successfully. Wow ! So cool !!!!!!!!!!!!!!

  11. Hmmmm ! the item i added is shuting with each other , how can i edit links ?

  12. shunting shunting shunting

  13. Max says:

    hi., you can edit links by changing the code,
    find: href=’#’
    change ” # ” to URL you want.

  14. John_Freeman says:

    If put it in any other place of the website – all the links and their names move & shuffle
    What’s wrong?

  15. John_Freeman says:

    and how can I make it BIGGER ?

  16. John_Freeman says:

    Oh, they don’t shuffle – they are written in that order….sorry…got it.
    The 2nd question still remains/

  17. Max says:

    hi John
    we can make them bigger by changing the images that the code linking to.
    you can understand this if you have some knowledge in HTML.

    you can easily do it, you’ll need to do 2 steps.

    1 . create bigger icons,
    2 . edit your code to link for this images.

    we hope this can help.

  18. John says:

    Thanks for the reply.
    I increased the size of the icons from 128×128 to 512x512px, uploaded them,linked – but that “duck menu” made them small again…
    Do I need to change any parameters of the code?

  19. derwisch says:

    Hi, I added this menu to my blog but the icons don’t change size when I move the mouse over them.
    I have to move the mouse to a little left instead of exactly on the icon in order to get them bigger. How do I correct this?

  20. rocky says:

    hi really thanks for your menu but i have got this error what to do i tried to check the code but there are so many “type” in the code pls help me

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The value of attribute “type” associated with an element type “null” must not contain the ‘<‘ character.

  21. calvin chew says:

    sir,in my edit html,dun have ]]>

    what should i do??

  22. mohamed ali says:

    why it appear in the top

    how i adding this code in the right please ??

  23. tenxen says:

    it’s great to have duck menu in my website.

  24. afrodita says:

    its not workin`
    The element type “script” must be terminated by the matching end-tag “”.

  25. jefky says:

    hi max, great menu but the URL doesn’t work.i have changed the href=’#’ with URL address but it just doesn’t work at all.what should i do?

  26. jefky says:

    hai max, i finally figured out of changing the href=’#’…now the duck menu is working..thank you very much

  27. Max says:

    hi jefky, sorry for my late comment, you are always welcome.

  28. Yani Lavigne says:

    it worked but doesnt look good for me;(

  29. mela says:

    is there a different color? like pink?

  30. Max says:

    hi mela
    it’s easy to change the icons but you have to play with html and images locations.
    i hope i can offer another one in different colors and icons soon

  31. STONE says:

    Hey that’s good article.
    I have a question, if we give separate links to each of the picture in the Duck Menu Bar, then what to do?

    Please if you could then solve it!

  32. Max says:

    hi STONE
    please tell me what you mean by give separate links to each of the picture

  33. koteswararao says:

    i am not getting how to insert the duck menu in my blog?
    to insert in the middle (or) top of the blog (or) down of the blog

  34. bharath says:

    its not working please check the code once

  35. Pakistani says:

    The demo is not working.

  36. Love Funlog says:

    hay its working…… first i install this but it get me error…… so i changed code in my template… now its working……. thanks…

  37. shvtrix says:

    your site design is awesome,and i think its dock menu

  38. Dheeraz says:

    Hi,Its showing only one menu image ,….Wat to do,Plzz any one help..Im getting only one menu item..wat abt remaining..i done it as per above guide.Plzz help

  39. electrinick says:

    Hi.it worked but I can only see one item.where are the others.I can see only this pic
    http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUABnXdQNdI/AAAAAAAAATU/jPWR6TthALk/s1600/portfolio-trans.png

  40. Admin-Amir says:

    Hello MAX.
    I have made the process that you have post here.
    but I just have Icon on the top of the blog.
    PPL here said that they have change the code?
    So way not to let all the users to know what
    They have to fix in the code to make it work.
    This is the part of community share.
    So if you please let us/me know what do I/us
    need to change on the code.
    I see the href=’# all over,so what is the next
    fix that has to be made with this please.
    Just to let you know ,It’s about to be on ALL
    Ultimate Edition blogs!
    So please give us hand hear.

    Thank you
    Amir.

  41. sulltan says:

    Hi, sam
    its working … but i need
    To change on the code.
    I see the href=’# all over,

  42. BenSow says:

    Hey Max I did everything correctly and tried again a few times it is still not animated.. And the words beside the images look very ugly. I need help here Thanks

  43. Chetan says:

    working 5ne on my blog…..

  44. Gym says:

    Hi…

    Can you update this post, this feature looks gretat, but the site http://iblographics.com it’s down, so it’s hard to see the live demo, and also can helt if you put a link to download the files: jquery.js and interface.js

    Also check that not all your links open in a new windows.

    Nice Blog

  45. Great duck menu and info

  46. Sai says:

    thnxxxxxxxxxxxxxxxxxxxx

  47. shahide says:

    Demo is not working
    plz check Demo

  48. Downloadtaky says:

    Is it possible to download the .js files and host them on my own HOST? Demo isn’t working because iBloGraphics.com is offline…
    Could you please post the script?
    Thank you so much!

    • Max says:

      hi Downloadtaky,
      unfortunately i don’t have the script, but i’ll search for it, if i found it, i’ll send you a mail and post it here.

  49. Great duck menu and tips

    Nice Blog

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here