3 Image Slide-Show With 'Shade Effect' In Your Blog

If you like to have some of your favourite images as slide-show with shade effect in your blog with an ease then follow the steps below, its as simple as cut-paste process.

Here we go:

• First of all you will have to upload the images you want in the slide-show to some image hosting site like photobucket. If possible keep all the images in same size-ratio.
• Now logon to your blogger account, go to Layout>Edit Html and take a backup of your template and then find <b:skin><! [CDDATA[/* and put the following code just above it (see image1 for help):

Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

• Download the Javascript file here and upload to some file hosting site like sigmirror, and get the path link of your uploaded file as you need to give this path to the code in the next step.
  
• Now find ]]></b:skin> and put the following code just below it (see image2 for help).

Code:

<!-- JQUERY i -->
<script src="YOUR UPLOADED JAVASCRIPT FILE PATH" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.pics').cycle({
fx:  'fade',
speed:  2500,
pause:  1
});
});
</script>
<!-- JQUERY e -->

• Save your template and get back to 'Layout' page and click on 'Add a gadget'>'HTML & Javascript' and put the following code in the content box.
  

Code:

<div style="height:200px; margin-bottom:10px; border:4px solid #DCE7D1;" class="pics">
<a href="YOUR TARGET LINK HERE" src="YOUR IMAGE SOURCE HERE"/></a>
<a href="YOUR TARGET LINK HERE" src="YOUR IMAGE SOURCE HERE"/></a>
 <a href="YOUR TARGET LINK HERE" src="YOUR IMAGE SOURCE HERE"/></a>
 <a href="YOUR TARGET LINK HERE" src="YOUR IMAGE SOURCE HERE"/></a>
</div>

• Here you can play with the sizes, margins etc. in above code to get it perfect as per your blog settings or according to the area of your blog layout where you wish to put your slide-show, but please do change the texts in red in all codes above with the required field.
• Save your layout and view your blog, voilla it's looking great!

See a live demo of this slide-show here.