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 'Ctrl' + 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>
2. Now find out
</head>
( press 'Ctrl' + 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
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
<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 :)
