Implementing Milkbox in Blogger

Milkbox is a lightbox-type script for Mootools. The script supports images, image galleries and flash animations.

Main features:

Swf support. You can add swf links to your galleries as well as images.
Use the rev attribute to tell width and height of the swf file.
AutoSize and maxHeight options.

             

Steps to Add it to Blogger:

1.Login to the Blogger account.

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it. 

<script src="http://dl.dropbox.com/u/27675057/Milkbox/mootools-1.2.5-core-yc.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/Milkbox/mootools-1.2.5.1-more.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/Milkbox/milkbox-yc.js" type="text/javascript">
</script> 
<style type="text/css">
@import url(http://dl.dropbox.com/u/27675057/Milkbox/default.css);
@import url(http://dl.dropbox.com/u/27675057/Milkbox/main.css);
@import url(http://dl.dropbox.com/u/27675057/Milkbox/milkbox.css);
</style>

2.Go to the Post/Page you want to add the Milkbox and go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<script src="http://dl.dropbox.com/u/27675057/Milkbox/mootools-1.2.5-core-yc.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/Milkbox/mootools-1.2.5.1-more.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/Milkbox/milkbox-yc.js" type="text/javascript">
</script> 
<style type="text/css">
@import url(http://dl.dropbox.com/u/27675057/Milkbox/default.css);
@import url(http://dl.dropbox.com/u/27675057/Milkbox/main.css);
@import url(http://dl.dropbox.com/u/27675057/Milkbox/milkbox.css);
</style>

4.Now for adding the images into Milkbox ,Firstly add the image normally using Insert Image button


Now When you see the code in the edit HTMLwindow it would be something like this

<a href=" large3.jpg"=""><img border="0" height="90" src="/small3.jpg" width="120" /></a>

Make it like this

<a href=" " rel="milkbox" ><img src=" " /></a>

As you can see we added only a rel="milkbox".

For adding Gallery the code is 

<a href=" " rel="milkbox[example]" ><img src=" " /></a>

<a href=" " rel="milkbox[example]" ><img src=" " /></a>




In the above the example can be changed by any name of your choice

For adding SWFs

<a href="logo.swf" rel="milkbox" rev="width:600,height:200" title="This is an Swf file. You need Flash Player 10 to see it correctly"><img alt="" height="100" src="logo.jpg" width="100" /></a>

5.Now save the Post/Page and see the magic.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.