Adding a Dock menu

When i was surfing the net , i found some fascinating option that can use in blogger. It's really amazing. It a animating dock. You can see a edited version of it in my blog too ( Update :- 3D dock is removed in order to give a quick load ).it's similar to the dock in Mac OS and also to the Dock of Brico Pack Vista Inspirat update.How ever first all , i must say that any of these amazing codes are not written by me.Now lets see how to add this.




1. Edit your Template
2. Now find out


</head>


( press 'Ctr
l' + F to open your browser's search box)


now paste these codes , just after it



<script src='http://www.hotlinkfiles.com/files/2539743_ukzyr/mootools-for-dock.js]mootools-for-dock.js' type='text/javascript'>
</script>
<script src='http://www.hotlinkfiles.com/files/2539745_0murk/UvumiDock-compressed.js]UvumiDock-compressed.js' type='text/javascript'>
</script>
<link href='http://www.hotlinkfiles.com/files/2539744_t3g89/uvumi-dock.css]uvumi-dock.css' media='screen' rel='stylesheet' type='text/css'/>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.hotlinkfiles.com/files/2539746_jlbwr/uvumi-dock-ie6.css]uvumi-dock-ie6.css" />
<![endif]-->
<script type='text/javascript'>
var myDock = new UvumiDock("dock");
</script>



Now follow the Safety Saving Steps.

And


Now you have to download some icons.( or use your own ).There are some 3D , vista type icon set for free download at www.vistaicons.com . My Dock icons are too from vistaicons.com



After downloading , upload needed images to a image hosting server or to google pages. Now get thier Image URLs paste in the following code.



<ul id="dock">

<li>
<a href="Paste the URL of a web page"><img alt="Type a word discribing the page that link will direct ( tip tool )" src="Image's URL"/>
</a>
</li>

<li>
<a href="Paste the URL of a web page 2"><img alt="Type a word discribing the page that link will direct ( tip tool ) 2" src="Image's URL 2"/>
</a>
</li>

<li>
<a href="Paste the URL of a web page 3"><img alt="Type a word discribing the page that link will direct ( tip tool ) 3" src="Image's URL 3"/>
</a>
</li>

</ul>


*like this you can add any number of dock images and links.

ex:-



<li>
<a href="http://blogger-template-editing.blogspot.com/2009/05/about.html"><img alt="About" src="http://sites.google.com/site/dragonzstore/_/rsrc/1242275222949/buttons/about.png"/>
</a>
</li>


Now select "Add a Gadget" from Layout window and select "HTML\JAVA sript"
Now paste follwing codes in it. ( don't give a caption to your gadget )

and paste these code in it.

Now Press Save


Thanks go to jquery.com ,vistaicons.com, iblographics.com , Uvumi LLC , interface.eyecon.ro , mootools.net and also to blogger-template-editng.blogspot.com :)




feedburner

Every New lesson , directly to your Mail Box .....

3 comments:

I.N Rockz on May 17, 2009 at 8:25 PM said...

wow cool but dsnt dis luk odd 2 da blog

DragonD on May 17, 2009 at 10:09 PM said...

@ I.N Rockz

May be :)

Usman Pirzada on April 21, 2010 at 4:02 AM said...

umm NOT WORKING for me it is just normal NON ANIMATED icons wat am i doing wrong?

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

The Word Validation image has been removed and no need to Sign In. So don't be lazy ..........

 
This blog sucks under Internet Explorer.

Buy me a Coffee


Powered By

Latest Site News


Animated 3D Dock removed in order to speed up loading time and to help IE users.

This site will be come up with a DOMAIN name soon.

Link and Win competition will start as soon as the Domain name added. Join with us. You could be the winner.

Site Info

since 2009 April

Submit a Lesson

Visitors

of Visitors read Pages.

Lessons by DragonD | Template by Simran | Logo by lahirulcd | Temaplate redesigned by DragonD| Icons by DryIcons.com | Licensed under CC license Creative Commons License