Implementing Bubble Slideshow in Blogger

Bubble Slideshow is a very a interesting plugin. It features bubble animation effect which creates a illusion of separate bubbles popping up to show the next image. When the amount of bubbles reaches a certain level ,the remaining image fills in the space occupied by the previous image. As most of the work is done by the plugin ,this is quite easy to implement with some minor bugs due to some conflicting CSS rules with default Blogger Templates (A Work-around possible).

             

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.

<link rel="stylesheet" href="Your-Hosted-File-Server/jquery.bubbleSlideshow.css" /> 

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]--> 

<style>

*{

 margin:0;

 padding:0;

}

#slideShow{

 margin:150px auto 0;

 border:7px solid #fff;

 width:635px;

 height:415px;

 

}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<script src="Your-Hosted-File-Server/bgpos.js"></script> 

<script src="Your-Hosted-File-Server/jquery.bubbleSlideshow.js"></script> 

<script src="Your-Hosted-File-Server/script.js"></script> 

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

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

<link rel="stylesheet" href="Your-Hosted-File-Server/jquery.bubbleSlideshow.css" /> 

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]--> 

<style>

*{

 margin:0;

 padding:0;

}

#slideShow{

 margin:150px auto 0;

 border:7px solid #fff;

 width:635px;

 height:415px;

 

}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<script src="Your-Hosted-File-Server/bgpos.js"></script> 

<script src="Your-Hosted-File-Server/jquery.bubbleSlideshow.js"></script> 

<script src="Your-Hosted-File-Server/script.js"></script> 

4.Now for adding the images into Bubble Slideshow, you will have to access the script.js file ,After opening this file it will look something like this:

As you can see the "var photos" contains the address of all the Pictures that will appear in the Slideshow. Just change the address of these pics with yours.


5. Now where you want this slideshow to appear, just include the following code:

<ul id="slideShow"></ul>

The minor bug that I was talking about earlier is that if the border color (present in the style tag) is different from the background color then border will extend beyond the images on the right side (empty space between Pic and Border).To work-around this problem just give the border color same as that of the background on which it is placed or just remove the border Rule in the style tag.


6.Now save the Post/Page.

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