Test Blog by DragonD: Nerd

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.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 </head>

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

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

In this lesson , i am going to teach you how to change your existing images of your blog template.This is very useful and also essential for every blogger.

Changing your logo's image

In many blog template , the designer use their own image or a image that they like to use as the logo. But in some occasions you may don't like it. So you have to change it. Here is this lesson i have explained how to change a logo's image. ( Read Lesson )

Not only logo , you may also want change other images.

so here is what to do

1. Edit your template ( How to edit your template )
2. Press Ctrl+F and search under some extensions of images.

ex:-

.gif
.png
.gpj

in most occasions , designers use gif images to small images ( because .gif makes big images ugly due to loss of colors )
.png for some what big images

and jpg images are used in small images or rarely in large images. ( designers don't use .jpg as extentions of big images because they need more bytes. )

now when you searching under these extensions you may find out some likes like these

My gadget's back ground image

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlQybe9ni2F9B6dhUicxS8q4sn3fMKdh6tJ9ADs7TDGsfNKDtPMMzH3mQmiRkHjFq4cAxXB0oKT3cRF-R0TyT9fdUEn_fkQeVE6GD-baZW2TjQp509ZJuHyaQ878J-73TLi22jcx8UdE/s1600/widget-title.gif

RSS 's image

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSeoOrH584eWUfgdom-3fdaAKgmCPujivE0JWs2UuwUoHz964rxgQyIQhPAfcRhWir12eV3ANtNvGt_7df-Gl_HjMwIydS2ctcAGajDtONGmD9MrDUfduSgsFmgJt1id95uUHWTxT_fEM/s1600/rss.gif

Backgound Image

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ5WuG01QTxxxJiaqsmV2Dz7oP0pf9Aw3GDCXKYkaBXEtpvG8RLjiHOafgyVZBoqPmoe534uzHgp-rNJnncpXSPvuRErlxKCtmcUHIUgQ8tUPvcYYIkSRafsvZHfY3o-UsDe0rkpYDj-Y/s1600/topbg.png

Header

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs_k7T3ij9MNtFgLRde2HUBEi_2DX2iuioWxyymgG1rj5P7mbFW9pOt9tNokZ7F312TUW2knkZ810ByvrVEFL15MY4ZWxakqg01r3FI4JwAejG8ACncgxl-VXl7zcgZYBZ4a_PqRTtMpI/s1600/header.png

Now you just have to copy and paste these links in your browser's address bar and press Enter key.you have the image.

Save it.

Now open it using your Image editing software and edit it.

Don't you know any thing on image editing ? just ask your friend who knows about image editing or you can use MS Paint for this. ( Believe it , my all logos , buttons , headers , images ..all have created using MS Paint and Power Point 2007 )

Now upload your images a image hosting service like Imageshack.us

How ever , lets say your image hoster suddenly vanishes. All gone ! you are done !

so here is what to do.go to sites.google.com

use a existing site or create a new site.Now upload your images to that site.Now select the images you want. ( copy your image's URL ) and paste on existing one in your template.

Now follow the Safety Saving Steps.

And

Test Blog by DragonD

Adding a Dock menu

Lesson on Images

Labels

Blog Archive