Implementing SuperSized in Blogger

Supersized jQuery PluginSupersized is a jQuery plugin that automatically resizes (background) images to the size of the browser while maintaining image dimension ratio and runs them as a slideshow in simple words its a Full Screen Slider.

There is no extra whitespace, no scrollbars – the entire browser window is always filled. It is lightweight and is compatible with Firefox, Safari, Opera, IE7, and IE6. It also allows integration with Flickr API.

See Demo

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.(For New Blogger Interface Go to Templates > Edit HTML)


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
  
<style>
#supersized {
position:fixed;
left:0;
top:0;
overflow:hidden;
z-index:-999;
height:100%;
width:100%;
}
#supersized img{
width:auto;
height:auto;
position:relative;
display:none;
outline:none;
border:none;
}
#supersized.speed img {
-ms-interpolation-mode:
nearest-neighbor;
image-rendering:-moz-crisp-edges;
}
/*----------------------------------------------------
{--------}  Speed  {--------}
----------------------------------------------------*/
#supersized.quality img {
-ms-interpolation-mode:
bicubic;
image-rendering:
optimizeQuality;
}
/*----------------------------------------------------
{--------}  Quality  {--------}
----------------------------------------------------*/
#supersized a {
z-index:-30;
position:absolute;
overflow:hidden;
top:0;
left:0;
width:100%;
height:100%;
background:#111;
}
#supersized a.prevslide { z-index:-20; }
#supersized a.activeslide { z-index:-10; }
#supersized a.prevslide img, #supersized a.activeslide img{ display:inline; }
</style>

<script type="text/javascript" src="http://stylifyyourblog1.googlecode.com/svn/trunk/supersize.js"></script> 
 

4.Now for adding the images into this plugin see the following markup:

<script type='text/javascript'>
//<![CDATA[
jQuery(function($){
$.supersized({
//Functionality
slideshow:1,//Slideshow on/off
autoplay:1,//Slideshow starts playing automatically
start_slide:1,//Start slide (0 is random)
random: 0,//Randomize slide order (Ignores start slide)
slide_interval:5000,//Length between transitions
transition:1,//0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed:1000,//Speed of transition
new_window:1,//Image links open in new window/tab
pause_hover:0,//Pause slideshow on hover
keyboard_nav:1,//Keyboard navigation on/off
performance:1,//0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect:1,//Disables image dragging and right click with Javascript
//Size & Position
min_width:0,//Min width allowed (in pixels)
min_height:0,//Min height allowed (in pixels)
vertical_center:1,//Vertically center background
horizontal_center:1,//Horizontally center background
fit_portrait:1,//Portrait images will not exceed browser height
fit_landscape:0,//Landscape images will not exceed browser width
//Components
navigation:1,//Slideshow controls on/off
thumbnail_navigation:1,//Thumbnail navigation
slide_counter:1,//Display slide numbers
slide_captions:1,//Slide caption (Pull from "title" in slides array)
slides:[//Slideshow Images
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wanderers-kitty.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg'},  
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg'},{image : 'http://4.bp.blogspot.com/-FbRA-c7XN7w/ToFyfWteFxI/AAAAAAAAAyI/5Wh2ELU1jC4/s000/1.jpg'},
{image : 'http://2.bp.blogspot.com/-RobdhmLJJqw/ToFyfzX1gcI/AAAAAAAAAyM/WpNVMsp3jeE/s000/2.jpg'},       
{image : 'http://2.bp.blogspot.com/-MFnQY9BN13o/ToFygdGxjRI/AAAAAAAAAyQ/fYOg05RsgjU/s000/3.jpg'}, 
{image : 'http://3.bp.blogspot.com/-C_x-CxMlq18/ToFyglftaKI/AAAAAAAAAyU/Id1R2ZTGUuQ/s000/4.jpg'},
{image : 'http://2.bp.blogspot.com/-En9rLi9a3Ag/ToFyhDg5lZI/AAAAAAAAAyY/CxUZyX6RONU/s000/5.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wilderness1.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/day2-emily.jpg'}
]
}); 
});
//]]>
</script>

All the options are explained with very understandable comments.



5.Now save the Post/Page.

Having any problem ,please feel free to ask

See Demo

Implementing Flex Slider in Blogger

Flexslider is a jQuery slider plugin which has been created, developed and maintained by Tyler Smith and released for Smashing Magazine and its readers. As usual, the plugin is absolutely free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options as well as all the navigation options you would expect in such a plugin — touch gestures inclusive! It uses simple, semantic markup to create the slider and is lightweight, weighing only 5 Kb (minified). The plugin has been tested in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. In five simple steps, you can have a fully responsive slider for your responsive design.

See Demo

Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script src="jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" />
 

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


2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .


3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script src="jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" />

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

4.Now for adding the images into this plugin see the following markup:

<div id="container">
<div class="flexslider">
     <ul class="slides">
      <li>
       <img src="1.jpg" />
       <p class="flex-caption">Captions</p>
      </li>
      <li>
       <a href="http://www.google.com"><img src="2.jpg" /></a>
       <p class="flex-caption">This image is wrapped in a link!</p>
      </li>
      <li>
       <img src="3.jpg" />
      </li>
      <li>
       <img src="4.jpg" />
      </li>
     </ul>
   </div></div>

The div block with id “container” is the outer wrapper of the images to be displayed.

The class “flex-caption” is used for displaying captions below the image

Now for hooking this to the Slider using this JavaScript:

<script type="text/javascript">
  $(window).load(function() {
   $('.flexslider').flexslider();
  });
 </script>

5.Now save the Post/Page.

See Demo

Download

Implementing Slicebox into Blogger

Slicebox is a simple 3D Slider which makes use of the 3D transforms properties and allows a different kind of effects. The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3d object. In case the browser does not support 3D transformations, a simple slider will be used as fallback. It comes in 6 versions.

See Demo

Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<link rel="stylesheet" type="text/css" href="demo.css" /> 
<link rel="stylesheet" type="text/css" href="slicebox.css" /> 
 <script type="text/javascript" src="modernizr.custom.13303.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
  <script type="text/javascript" src="jquery.slicebox.min.js"></script> 
  <script type="text/javascript"> 
   $(function() {
    $('#sb-slider').slicebox({
     slicesCount   : 15,
     sequentialRotation : true,
     sequentialFactor : 50,
     speed3d    : 250
    });
     if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script>
 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!. If this code shows error while adding into the template, then Click Here to Escape Code and then copy into it


2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .


3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel="stylesheet" type="text/css" href="demo.css" /> 
<link rel="stylesheet" type="text/css" href="slicebox.css" /> 
 <script type="text/javascript" src="modernizr.custom.13303.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
  <script type="text/javascript" src="jquery.slicebox.min.js"></script> 
  <script type="text/javascript"> 
   $(function() {
    $('#sb-slider').slicebox({
     slicesCount   : 15,
     sequentialRotation : true,
     sequentialFactor : 50,
     speed3d    : 250
    });
     if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script>

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

4.Now for adding the images into this plugin see the following markup:

<div id="sb-slider" class="sb-slider"> 
    <img src="1.jpg" title="The Title that will appear below the Image"/> 
    <img src="2.jpg" /> 
    <img src="3.jpg" /> 
    <img src="4.jpg" /> 
    <img src="5.jpg" />  
   </div>

Here are some customized JavaScript for changing default Options:

Vertical Effect

<script type="text/javascript"> 
   $(function() {
    $('#sb-slider').slicebox({
     slicesCount   : 5,
     disperseFactor  : 30,
     sequentialRotation : true,
     sequentialFactor : 100
    });
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     $('#sb-examples > li:gt(2)').remove();
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

Horizontal Effect

<script type="text/javascript"> 
   $(function() {

    $('#sb-slider').slicebox({
     orientation   : 'h',
     slicesCount   : 3,
     disperseFactor  : 25,
     sequentialRotation : true,
     sequentialFactor : 140
    });
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     $('#sb-examples > li:gt(2)').remove();
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

Vertical Flipping

<script type="text/javascript"> 
   $(function() {
 
    $('#sb-slider').slicebox();
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

Horizontal Flipping

<script type="text/javascript"> 
   $(function() {
    
    $('#sb-slider').slicebox({
     orientation   : 'h'
    });
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

Expanding Effect

<script type="text/javascript"> 
   $(function() {
 
    $('#sb-slider').slicebox({
     slicesCount   : 9,
     disperseFactor  : 50,
     sequentialRotation : true,
     sequentialFactor : 20
    });
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

5.Now save the Post/Page.


See Demo

Download

Implementing Flux Slider in Blogger

At some point in a site you might have used a slider of images for e.g. your featured articles or something. While there are literally hundreds of these out there, Flux goes a step further and while browser support is not the best , have a look at it as it utilizes some really great CSS3 effects. As the author states, you can either use jQuery or Zepto.js. In order to view the demo you need a browser that supports CSS3 transitions (Chrome or Safari ). It utilizes hardware acceleration wherever possible to improve performace on less powerful devices, such as mobiles & tablets making it mobile friendly specially iPad/Android.

See Demo

Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<!--[if lte IE 8]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
<!-- <script src="zepto.js" type="text/javascript" charset="utf-8"></script> -->   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="flux.min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript" charset="utf-8"> 
   $(function(){
    if(!flux.browser.supportsTransitions)
     alert("Flux Slider requires a browser that supports CSS3 transitions");
     
    window.f = new flux.slider('#slider', {
     pagination: true
    });
   });
</script> 

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


2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .


3.Now copy the code from below and paste it there. (How to copy code easily)

<!--[if lte IE 8]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
<!-- <script src="zepto.js" type="text/javascript" charset="utf-8"></script> -->   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="flux.min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript" charset="utf-8"> 
   $(function(){
    if(!flux.browser.supportsTransitions)
     alert("Flux Slider requires a browser that supports CSS3 transitions");
     
    window.f = new flux.slider('#slider', {
     pagination: true
    });
   });
</script> 

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

4.Now for adding the images into this plugin see the following markup:

<section class="container"> 
<div id="slider"> 
    <img src="avatar.jpg" alt="" /> 
    <img src="greenhornet.jpg" alt="" /> 
    <img src="ironman.jpg" alt="" /> 
    <img src="tron.jpg" alt="" /> 
   </div>
</section>

The class container gives the pagination and bordering style to the plugin.

5.Now save the Post/Page.


See Demo

Download



Facing any problems ,Please feel free to ask

Implementing Diapo in Blogger

Diapo is a jQuery plugin for creating content sliders with beautiful and custom transition effects. It can display images, videos or any other HTML and can be browsed manually (with prev-next buttons or pagination links that also displays thumbnails) or the auto-slideshow functionality. The plugin is mobile-ready and has options to enable-disable features for mobile usage . Transitions can also be customized by defining sliced rows-columns, the transition period and more.

             See Demo                                                                                            Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<link rel='stylesheet' id='style-css'  href='diapo.css' type='text/css' media='all' /> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script type='text/javascript' src='jquery.easing.1.3.js'></script> 
<script type='text/javascript' src='jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='diapo.js'></script> 
<script>
$(function(){
 $('.pix_diapo').diapo();
});
</script>

 

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


2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .


3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel='stylesheet' id='style-css'  href='diapo.css' type='text/css' media='all' /> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script type='text/javascript' src='jquery.easing.1.3.js'></script> 
<script type='text/javascript' src='jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='diapo.js'></script> 
<script>
$(function(){
 $('.pix_diapo').diapo();
});
</script>

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

4.Now for adding the images into this plugin see the following markup:

<div class="pix_diapo">


<div data-thumb="Small.jpg">
<img src="Large.jpg">
<div class="caption elemHover fromLeft">
This is a simple sliding image with caption. You can have more than one caption and decide the layout of the caption via css.
</div>
</div>

<div data-thumb="Small1.jpg">
<img src="Large1.jpg"> 
<div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ff0; text-transform:uppercase">
Here you can see two captions.
</div>
<div class="caption elemHover fromLeft" style="padding-top:5px;">
The first are loaded immediately before than the second one
</div>
</div>



<div data-thumb="Small2.jpg" data-time="7000">
<img src="Large2.jpg">
<div class="elemHover caption fromLeft">
You can also get the same effect as the caption with:
</div>
</div>



<div data-thumb="Small3.jpg">
<iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="FakeLarge3.jpg" frameborder="0" allowfullscreen></iframe>
<div class="elemHover caption fromLeft elemToHide">
You can also display videos, but it requires a "fake image" a.k.a. the Screenshot of video before starting
</div>
</div>



</div>

The div block with class “pix_diapo” is the container of the images to be displayed.

data-thumb is the container of the thumbnail which appears when mouse is hovered over the pagination icons.
The class “Caption elemHover fromZZZZ” is used to define the caption for the Slide. Here ZZZZ can be replaced by left ,right,top or bottom. ZZZZ defines from where the caption will enter the screen.

Videos are also embeddable but you will have put a fake image for the slide transitions. The fake image should normally be the starting screenshot of the video itself like for example if you are embedding a YouTube Video then the starting screenshot should be something like this

As you see the Image contains the Play button from YouTube to make it look like a real video

Here are some customized JavaScript for changing default Options:

<script>
$(function(){
 $('.pix_diapo').diapo({fx: 'scrollHorz', time: '5000'}); 
});
</script>

Here fx is the effect you want to apply between slide transitions (by default it is random)
time is the interval in microseconds between sliding .
For even more Options visit Here

5.Now save the Post/Page.


             See Demo                                                                                            Download

Implementing Z-Index Gallery in Blogger

Z-index Gallery is a combination of CSS property ‘z-index’ and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures. This incorporates simplicity with eye candy to deliver a full fledged experience of viewing piles of pictures as if in hand.

This can be further customized to include features like randomness ,random picture control, slightly random positions each time,Forward & Back Buttons, Preloader Effect,etc. Feel free to change the code to your needs and share it with us.

             See Demo                                                                                            Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<link rel="stylesheet" type="text/css" media="screen" href="reset.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="960.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js "></script> 
<script type="text/javascript" src="demo.js"></script> 
 

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


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


3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel="stylesheet" type="text/css" media="screen" href="reset.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="960.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js "></script> 
<script type="text/javascript" src="demo.js"></script> 

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

4.Now for adding the images into this plugin see the following markup:

<div class="grid_6 prefix_1 suffix_1" id="gallery">
<div id="pictures">
<img src="picture1.png"  /> 
<img src="picture2.png"  /> 
<img src="picture3.png"  /> 
<img src="picture4.png"  /> 
<img src="picture5.png" /> 
</div>

<div class="grid_3 alpha" id="prev">
<a href="#previous">&laquo; Previous Picture</a> 
</div>
<div class="grid_3 omega" id="next">
<a href="#next">Next Picture &raquo;</a> 
</div>
</div>

The div block with id “pictures” contains the images to be displayed.

Here you can easily customize the Next and Previous Text with Images . For Next Button images search Here

There is another customized version of this plugin which displays a preloader before the images ,to apply it ,just replace the demo.js file with the demo1.js file present in the js folder of the Download package.




5.Now save the Post/Page.


             See Demo                                                                                            Download

Implementing Smooth Div Scroll in Blogger

Smooth Div Scroll is a jQuery plugin that scrolls content horizontally. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scroling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no visible buttons or links since the scrolling is done using hotspots within the scrollable area or via autoscrolling.

             See Demo                                                                                            Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)

<link rel="Stylesheet" type="text/css" href="smoothDivScroll.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
<script src="jquery.ui.widget.js" type="text/javascript"></script>  
<script src="jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
		$(window).load(function() {
			$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", 
														autoScrollDirection: "backandforth",
														autoScrollStep: 1,
														autoScrollInterval: 15,
														startAtElementId: "startAtMe",
														visibleHotSpots: "always" });
 
		});
	</script> 
<style type="text/css"> 
	
	#makeMeScrollable
	{
		width:100%;
		height: 330px;
		position: relative;
	}
	
	#makeMeScrollable div.scrollableArea *
	{
		position: relative;
		float: left;
		margin: 0;
		padding: 0;
	}
	
	</style> 

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


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


3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel="Stylesheet" type="text/css" href="smoothDivScroll.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
<script src="jquery.ui.widget.js" type="text/javascript"></script>  
<script src="jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
		$(window).load(function() {
			$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", 
														autoScrollDirection: "backandforth",
														autoScrollStep: 1,
														autoScrollInterval: 15,
														startAtElementId: "startAtMe",
														visibleHotSpots: "always" });
 
		});
	</script> 
<style type="text/css"> 
	
	#makeMeScrollable
	{
		width:100%;
		height: 330px;
		position: relative;
	}
	
	#makeMeScrollable div.scrollableArea *
	{
		position: relative;
		float: left;
		margin: 0;
		padding: 0;
	}
	
	</style> 

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

4.Now for adding the images into this plugin see the following markup:

<div id="makeMeScrollable">
		<div class="scrollingHotSpotLeft">
</div>
<div class="scrollingHotSpotRight">
</div>
<div class="scrollWrapper">
<div class="scrollableArea">
<img src="field.jpg" /><img src="gnome.jpg"  /><img src="pencils.jpg"  /><img src="golf.jpg" /><img src="river.jpg"  /><img src="train.jpg"  /><img src="leaf.jpg" /><img src="dog.jpg" /> 
</div>
</div>
</div>

Here you might observe that we have placed all the img tags with no spaces in between them, this is because if the img tag is placed in the next line then Blogger Editor by default adds a br tag in between the line which in-turn disturbs the indenting of the images and they appear out of place, do therefore leave no space between them.




5.Now save the Post/Page.


             See Demo                                                                                            Download

Implementing jCarousel + Captify in Blogger

This plugin is a combination jQuery jCarousel and jQuery Captify together to create a slick and cool way of showing the thumbnails and captions. Thumbnails can be scrolled with the use of previous and next buttons and when rolling/hovering over any thumbnail, the caption or the title of the thumbnail will slide up.


             See Demo                                                                                            Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="jcarousellite_1.0.1.pack.js"></script> 
<script type="text/javascript" src="captify.tiny.js"></script> 


<script type="text/javascript"> 
		$(function() {
    		$(".slider").jCarouselLite({
        		btnNext: ".next",
        		btnPrev: ".prev",
        		visible: 5,
                        auto: 900
    		});
		});
 
		$(document).ready(function(){
			$('img.captify').captify({
				// all of these options are... optional
				// ---
				// speed of the mouseover effect
				speedOver: 'fast',
				// speed of the mouseout effect
				speedOut: 'normal',
				// how long to delay the hiding of the caption after mouseout (ms)
				hideDelay: 500,	
				// 'fade', 'slide', 'always-on'
				animation: 'slide',		
				// text/html to be placed at the beginning of every caption
				prefix: '',		
				// opacity of the caption on mouse over
				opacity: '0.7',					
				// the name of the CSS class to apply to the caption box
				className: 'caption-bottom',	
				// position of the caption (top or bottom)
				position: 'bottom',
				// caption span % of the image
				spanWidth: '100%'
			});
		});
 
	</script> 

Now Search for ]]></b:skin> Using Ctrl+F and paste the following CSS code Above/Before it:

a:link {
	color:#0054a6;
	text-decoration:none; 
}
}
/************************************************
	      JCAROUSEL LITE		
************************************************/
#list {
	height:130px;
	width:880px; 
	margin:30px auto; 
}

.slider {
	float:left;
	left: -5000px; 
	margin:15px; 
	position:relative; 
	visibility:hidden;	
}
	
.slider ul {
	height:100px;
	width:600px; 
}

.slider ul li {
	padding:0 20px;
}

.slider ul li img {
	cursor:pointer;
	height:100px; 
	padding-top:3px;
	width:120px;  
}

.prev {
	cursor:pointer; 
	float:left;
	padding-top:90px;
}

.next {
	cursor:pointer; 
	float:right; 
	padding-top:80px;
padding-right:110px;
}

/************************************************
	      CAPTIFY CAPTION		
************************************************/
.caption-top, .caption-bottom {
	background: #000000;
	color: #ffffff; 
	cursor:default;
	padding:2px; 
	font-size:11px;   
	text-align:center;
}

.caption-top {
	border-width:0px;
}

.caption-bottom {
	border-width:0px;
}

.caption a, .caption a {
	background:#000;
	border:none; 
	text-decoration:none;  
	padding:2px;
}

.caption a:hover, .caption a:hover {
	background:#202020;
}

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


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

<style>
a:link {
	color:#0054a6;
	text-decoration:none; 
}
}
/************************************************
	      JCAROUSEL LITE		
************************************************/
#list {
	height:130px;
	width:880px; 
	margin:30px auto; 
}

.slider {
	float:left;
	left: -5000px; 
	margin:15px; 
	position:relative; 
	visibility:hidden;	
}
	
.slider ul {
	height:100px;
	width:600px; 
}

.slider ul li {
	padding:0 20px;
}

.slider ul li img {
	cursor:pointer;
	height:100px; 
	padding-top:3px;
	width:120px;  
}

.prev {
	cursor:pointer; 
	float:left;
	padding-top:90px;
}

.next {
	cursor:pointer; 
	float:right; 
	padding-top:80px;
padding-right:110px;
}

/************************************************
	      CAPTIFY CAPTION		
************************************************/
.caption-top, .caption-bottom {
	background: #000000;
	color: #ffffff; 
	cursor:default;
	padding:2px; 
	font-size:11px;   
	text-align:center;
}

.caption-top {
	border-width:0px;
}

.caption-bottom {
	border-width:0px;
}

.caption a, .caption a {
	background:#000;
	border:none; 
	text-decoration:none;  
	padding:2px;
}

.caption a:hover, .caption a:hover {
	background:#202020;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="jcarousellite_1.0.1.pack.js"></script> 
<script type="text/javascript" src="captify.tiny.js"></script> 
<script type="text/javascript"> 
		$(function() {
    		$(".slider").jCarouselLite({
        		btnNext: ".next",
        		btnPrev: ".prev",
        		visible: 5,
                        auto: 900
    		});
		});
 
		$(document).ready(function(){
			$('img.captify').captify({
				// all of these options are... optional
				// ---
				// speed of the mouseover effect
				speedOver: 'fast',
				// speed of the mouseout effect
				speedOut: 'normal',
				// how long to delay the hiding of the caption after mouseout (ms)
				hideDelay: 500,	
				// 'fade', 'slide', 'always-on'
				animation: 'slide',		
				// text/html to be placed at the beginning of every caption
				prefix: '',		
				// opacity of the caption on mouse over
				opacity: '0.7',					
				// the name of the CSS class to apply to the caption box
				className: 'caption-bottom',	
				// position of the caption (top or bottom)
				position: 'bottom',
				// caption span % of the image
				spanWidth: '100%'
			});
		});
 
	</script> 


4.Now for adding the images into this plugin see the following markup:

<div id="list">
			<div class="prev">
<img src="http://4.bp.blogspot.com/-iC6vK_Hu22I/Tk08g-4HY4I/AAAAAAAAA7Q/RlpZ8q8HLZ0/s1600/prev.jpg" alt="prev" /></div>

<div class="slider">
					<ul>
<li> 
<a href="#" title="Title 1"><img src="1.jpg" alt="Title 1" class="captify" /></a> 
</li>
<li> 
<a href="#" title="Title 2"><img src="2.jpg" alt="Title 2" class="captify" /></a> 
</li>
<li> 
<a href="#" title="Title 3"><img src="3.jpg" alt="Title 3" class="captify" /></a> 
</li>
</ul>
</div>
<div class="next">
<img src="http://1.bp.blogspot.com/-6ea7NXE4uVE/Tk08gdF2ouI/AAAAAAAAA7M/vmrAN0vqQjo/s1600/next.jpg" alt="next" /></div>
</div>
</div>

Here Title tag will contain the text which will appear when the thumbnail is rolled/hovered upon.
Another Important thing to note is that the positioning of the Next and Previous Arrows can be out of place , to rectify this just manually change the placement of the arrows using the
.next and .prev attributes present in the CSS Code.




5.Now save the Post/Page.

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

             See Demo                                                                                            Download

Implementing jquery.popeye in Blogger

jQuery.popeye is an advanced image gallery script built on the JavaScript library jQuery. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.
Though the script is quick and easy to setup, it offers great flexibility in both behaviour and styling.
jQuery.popeye takes a different approach: not only allows it for browsing all thumbnails as well as the large images in a single image space, it also repects the page flow and stays anchored and rooted in the webpage at all times, thus giving a less disruptive user experience than modal windows.

Note: jQuery.popeye comes in three different styles of which only one works fine with Blogger templates, the rest have some minor bugs due to conflicting CSS rules with default Blogger templates.

             

Steps to Add it to Blogger:

1.Login to the Blogger account

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" type="text/css" href="http://dl.dropbox.com/u/27675057/jquery.popeye/css/popeye/jquery.popeye.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="http://your-server-url/jquery.popeye/css/popeye/jquery.popeye.style.css" media="screen" /> 
<!-- <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script> --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="your-server-url/jquery.popeye/lib/popeye/jquery.popeye-2.0.4.js"></script>


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


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

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/jquery.popeye/css/popeye/jquery.popeye.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="your-server-url/jquery.popeye/css/popeye/jquery.popeye.style.css" media="screen" /> 
<!-- <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script> --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="your-server-url/jquery.popeye/lib/popeye/jquery.popeye-2.0.4.js"></script>


4.Now adding the images into jQuery.popeye is a little different ,see the following Markup:



<div class="ppy" id="ppy2">
<ul class="ppy-imglist">
<li><a href="a.jpg"><img src="a_m.jpg"  /></a></li>
<li><a href="f.jpg"><img src="f_m.jpg"  /></a></li>
<li><a href="3.jpg"><img src="3_m.jpg"  /></a></li>
<li><a href="e.jpg"><img src="e_m.jpg"  /></a></li>
<li><a href="d.jpg"><img src="d_m.jpg"  /></a></li>
<li><a href="4.jpg"><img src="4_m.jpg"  /></a></li>
<li><a href="2.jpg"><img src="2_m.jpg"  /></a></li>
<li><a href="1.jpg"><img src="1_m.jpg"  /></a></li>
<li><a href="a3.jpg"><img src="a3_m.jpg"  /></a></li>
</ul>
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-counter">
<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong> 
</div>
</div>
<div class="ppy-nav">
<div class="nav-wrap">
<a class="ppy-next" title="Next image">Next image</a> 
<a class="ppy-prev" title="Previous image">Previous image</a> 
<a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a> 
<a class="ppy-switch-compact" title="Close">Close</a> 
</div>
</div>
</div>
</div>

The main thing to note Here is that to add images just focus on the ul list staring from Line 2

This plugin also offers the ability to show small descriptions when a item is hovered upon.To add the same just include your description in alt tags inside the img tags (Like alt=”This is the Sun”)



Now add the following JavaScript to link it:

<script type="text/javascript"> 
    <!--//<![CDATA[

    $(document).ready(function () {
        var options2 = {
            caption:    false,
            navigation: 'permanent',
            direction:  'left'
        }
    
        $('#ppy2').popeye(options2);
        
    });
    
    //]]>-->
</script> 



5.Now save the Post/Page.

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

             

Implementing Simple jQuery Slideshow in Blogger

Simple jQuery Slideshow is a very basic Image slider plugin.Its main features include ability to cycles through slides at a time interval that we can set. It also has forward and back buttons so we can jump around between slides and each slide has a title, a description and a link associated with it.

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


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

<style type="text/css"> 
#slideshow #slideshowWindow {
 width:500px;
 height:257px;
 margin:0;
 padding:0;
 position:relative;
 overflow:hidden;
}
 
#slideshow #slideshowWindow .slide {
 margin:0;
 padding:0;
 width:500px; 
 height:257px;
 position:relative;
}
 
#slideshow #slideshowWindow .slide .slideText {
 position:absolute;
 top:130px;
 left:0px;
 width:100%;
 height:130px;
 background-image:url(greyBg.png);
 background-repeat:repeat;
 margin:0;
 padding:0;
 color:#ffffff;
 font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}
 
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
 color:#ffffff;
 text-decoration:none;
}
 
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
 margin:10px 0 0 10px;
 padding:0;
}
 
/*Navigation*/
.nav {
 display:block;
 text-indent:-10000px;
 position:absolute;
 cursor:pointer;
}
 
#leftNav {
 bottom:18px;
 left:0px;
 width:94px;
 height:34px;
 background-image:url(http://1.bp.blogspot.com/-Iab-OBSmo_g/TjJ8HccSM0I/AAAAAAAAA2E/4luzTVm76s4/s1600/previous.png);
 background-repeat:no-repeat;
 z-index:999;
}
 
#rightNav {
 bottom:26px;
 left:100px;
 width:53px;
 height:26px;
 background-image:url(http://1.bp.blogspot.com/-g7zq7ghqx00/TjJ8G2Dxl2I/AAAAAAAAA2A/pHOd-5VR90Y/s1600/next.png);
 background-repeat:no-repeat;
 z-index:999;
}
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
          
  var currentPosition = 0;
  var slideWidth = 500;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  var slideShowInterval;
  var speed = 3000;
 
  //Assign a timer, so it will run periodically
  slideShowInterval = setInterval(changePosition, speed);
  
  slides.wrapAll('<div id="slidesHolder"></div>')
    
  slides.css({ 'float' : 'left' });
  
  //set #slidesHolder width equal to the total width of all the slides
  $('#slidesHolder').css('width', slideWidth * numberOfSlides);
  
  $('#slideshow')
   .prepend('<span class="nav" id="leftNav">Move Left</span>')
   .append('<span class="nav" id="rightNav">Move Right</span>');
  
  manageNav(currentPosition);
  
  //tell the buttons what to do when clicked
  $('.nav').bind('click', function() {
   
   //determine new position
   currentPosition = ($(this).attr('id')=='rightNav')
   ? currentPosition 1 : currentPosition-1;
          
   //hide/show controls
   manageNav(currentPosition);
   clearInterval(slideShowInterval);
   slideShowInterval = setInterval(changePosition, speed);
   moveSlide();
  });
  
  function manageNav(position) {
   //hide left arrow if position is first slide
   if(position==0){ $('#leftNav').hide() }
   else { $('#leftNav').show() }
   //hide right arrow is slide position is last slide
   if(position==numberOfSlides-1){ $('#rightNav').hide() }
   else { $('#rightNav').show() }
  }
 
  
  //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
  function changePosition() {
   if(currentPosition == numberOfSlides - 1) {
    currentPosition = 0;
    manageNav(currentPosition);
   } else {
    currentPosition  ;
    manageNav(currentPosition);
   }
   moveSlide();
  }
  
  
  //moveSlide: this function moves the slide 
  function moveSlide() {
    $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
  }
 
 });
</script> 

If the Template shows error while saving this Code ,then Escape the Code, (Click Here to Escape Code)

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


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

<style type="text/css"> 
#slideshow #slideshowWindow {
 width:500px;
 height:257px;
 margin:0;
 padding:0;
 position:relative;
 overflow:hidden;
}
 
#slideshow #slideshowWindow .slide {
 margin:0;
 padding:0;
 width:500px; 
 height:257px;
 position:relative;
}
 
#slideshow #slideshowWindow .slide .slideText {
 position:absolute;
 top:130px;
 left:0px;
 width:100%;
 height:130px;
 background-image:url(greyBg.png);
 background-repeat:repeat;
 margin:0;
 padding:0;
 color:#ffffff;
 font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}
 
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
 color:#ffffff;
 text-decoration:none;
}
 
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
 margin:10px 0 0 10px;
 padding:0;
}
 
/*Navigation*/
.nav {
 display:block;
 text-indent:-10000px;
 position:absolute;
 cursor:pointer;
}
 
#leftNav {
 bottom:18px;
 left:0px;
 width:94px;
 height:34px;
 background-image:url(http://1.bp.blogspot.com/-Iab-OBSmo_g/TjJ8HccSM0I/AAAAAAAAA2E/4luzTVm76s4/s1600/previous.png);
 background-repeat:no-repeat;
 z-index:999;
}
 
#rightNav {
 bottom:26px;
 left:100px;
 width:53px;
 height:26px;
 background-image:url(http://1.bp.blogspot.com/-g7zq7ghqx00/TjJ8G2Dxl2I/AAAAAAAAA2A/pHOd-5VR90Y/s1600/next.png);
 background-repeat:no-repeat;
 z-index:999;
}
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
          
  var currentPosition = 0;
  var slideWidth = 500;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  var slideShowInterval;
  var speed = 3000;
 
  //Assign a timer, so it will run periodically
  slideShowInterval = setInterval(changePosition, speed);
  
  slides.wrapAll('<div id="slidesHolder"></div>')
    
  slides.css({ 'float' : 'left' });
  
  //set #slidesHolder width equal to the total width of all the slides
  $('#slidesHolder').css('width', slideWidth * numberOfSlides);
  
  $('#slideshow')
   .prepend('<span class="nav" id="leftNav">Move Left</span>')
   .append('<span class="nav" id="rightNav">Move Right</span>');
  
  manageNav(currentPosition);
  
  //tell the buttons what to do when clicked
  $('.nav').bind('click', function() {
   
   //determine new position
   currentPosition = ($(this).attr('id')=='rightNav')
   ? currentPosition 1 : currentPosition-1;
          
   //hide/show controls
   manageNav(currentPosition);
   clearInterval(slideShowInterval);
   slideShowInterval = setInterval(changePosition, speed);
   moveSlide();
  });
  
  function manageNav(position) {
   //hide left arrow if position is first slide
   if(position==0){ $('#leftNav').hide() }
   else { $('#leftNav').show() }
   //hide right arrow is slide position is last slide
   if(position==numberOfSlides-1){ $('#rightNav').hide() }
   else { $('#rightNav').show() }
  }
 
  
  //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
  function changePosition() {
   if(currentPosition == numberOfSlides - 1) {
    currentPosition = 0;
    manageNav(currentPosition);
   } else {
    currentPosition  ;
    manageNav(currentPosition);
   }
   moveSlide();
  }
  
  
  //moveSlide: this function moves the slide 
  function moveSlide() {
    $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
  }
 
 });
</script> 

4.Now for adding the images into Simple jQuery Slideshow See the following Markup.

<div id="slideshow">
<div id="slideshowWindow">

<div class="slide">
<img src="http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/slide1.jpg" /> 
<div class="slideText">
<h2 class="slideTitle">
Slide 1</h2>
<p class="slideDes">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink">
<a href="#">click here</a></p>
</div><!--/slideText--> 
</div><!--/slide--> 

<div class="slide">
<img src="http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/slide3.jpg" /> 
<div class="slideText">
<h2 class="slideTitle">
Slide 2</h2>
<p class="slideDes">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink">
<a href="#">click here</a></p>
</div><!--/slideText--> 
</div><!--/slide--> 

<div class="slide">
<img src="http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/slide2.jpg" /> 
<div class="slideText">
<h2 class="slideTitle">
Slide 3</h2>
<p class="slideDes">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink">
<a href="#">click here</a></p>
</div><!--/slideText--> 
</div><!--/slide--> 
</div><!--/slideshowWindow--> 
</div><!--/slideshow-->



5.Now save the Post/Page.

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