Posted By Max On Wednesday, December 31st, 2008 In Blogger Tricks and Hacks
|
|
 |
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
Add a Post Divider (Separator) Between Blogger (Blogspot) Posts
Adding falling hearts for Blogger (1)
Views : 10,463 views 
Rating : 
Loading ...
Installation Error : Copy url &
Click here
Broken Link : Copy url & Click
here
[...] animated “Duck Menu” in blogger Blogger Templates and Tricks [...]
[...] animated “Duck Menu” in blogger Blogger Templates and Tricks [...]
hi, the demo does not seem to be working !
hi Anurag
thanks for your attention.
we fixed it and now it work
try it
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.
thanks anurag for your suggest, we’ll apply it as soon as possible
Hi , i add it carefully ,But not see in my blog
pls check my blog
Oh ..Thz Sir I got it .I `m very happy .thx alot
thanks.. its help full for me..![]()
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
KISHOR
please explain you words, we don’t understand
I added it successfully. Wow ! So cool !!!!!!!!!!!!!!
Hmmmm ! the item i added is shuting with each other , how can i edit links ?
shunting shunting shunting
hi., you can edit links by changing the code,
find: href=’#’
change ” # ” to URL you want.
If put it in any other place of the website – all the links and their names move & shuffle
What’s wrong?
and how can I make it BIGGER ?
Oh, they don’t shuffle – they are written in that order….sorry…got it.
The 2nd question still remains/
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.
Thanks for the reply.
I increased the size of the icons from 128×128 to 512×512px, uploaded them,linked – but that “duck menu” made them small again…
Do I need to change any parameters of the code?
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?
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.
sir,in my edit html,dun have ]]>
what should i do??
why it appear in the top
how i adding this code in the right please ??
it’s great to have duck menu in my website.
its not workin`
The element type “script” must be terminated by the matching end-tag “”.
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?
hai max, i finally figured out of changing the href=’#'…now the duck menu is working..thank you very much
hi jefky, sorry for my late comment, you are always welcome.
it worked but doesnt look good for me;(
is there a different color? like pink?
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
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!
here is my E-Mail.
guglemughal@gmail.com
hi STONE
please tell me what you mean by give separate links to each of the picture
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
its not working please check the code once
The demo is not working.
hay its working…… first i install this but it get me error…… so i changed code in my template… now its working……. thanks…
your site design is awesome,and i think its dock menu
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
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
@ electrinick, i’ll update this tutorial soon. sorry for the issue.
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.
Hi, sam
its working … but i need
To change on the code.
I see the href=’# all over,
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
working 5ne on my blog…..
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
hi bensow, please wait, i’ll add updated tutorial about adding this menu.