Friday

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




Digg Technorati del.icio.us Stumbleupon Reddit
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

Vote

Vote to My site to be nominated for Best Geek Blog!

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