How To Add jQuery Featured Content Slideshow to Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag 




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

//<![CDATA[

(function($){$.fn.innerfade=function(options){return this.each(function(){$.innerfade(this,options)})};$.innerfade=function(container,options){var settings={'animationtype':'fade','speed':'normal','type':'sequence','timeout':2000,'containerheight':'auto','runningclass':'innerfade','children':null};if(options)$.extend(settings,options);if(settings.children===null)var elements=$(container).children();else var elements=$(container).children(settings.children);if(elements.length>1){$(container).css('position','relative').css('height',settings.containerheight).addClass(settings.runningclass);for(var i=0;i<elements.length;i++){$(elements[i]).css('z-index',String(elements.length-i)).css('position','absolute').hide()};if(settings.type=="sequence"){setTimeout(function(){$.innerfade.next(elements,settings,1,0)},settings.timeout);$(elements[0]).show()}else if(settings.type=="random"){var last=Math.floor(Math.random()*(elements.length));setTimeout(function(){do{current=Math.floor(Math.random()*(elements.length))}while(last==current);$.innerfade.next(elements,settings,current,last)},settings.timeout);$(elements[last]).show()}else if(settings.type=='random_start'){settings.type='sequence';var current=Math.floor(Math.random()*(elements.length));setTimeout(function(){$.innerfade.next(elements,settings,(current+1)%elements.length,current)},settings.timeout);$(elements[current]).show()}else{alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'')}}};$.innerfade.next=function(elements,settings,current,last){if(settings.animationtype=='slide'){$(elements[last]).slideUp(settings.speed);$(elements[current]).slideDown(settings.speed)}else if(settings.animationtype=='fade'){$(elements[last]).fadeOut(settings.speed);$(elements[current]).fadeIn(settings.speed,function(){removeFilter($(this)[0])})}else alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');if(settings.type=="sequence"){if((current+1)<elements.length){current=current+1;last=current-1}else{current=0;last=elements.length-1}}else if(settings.type=="random"){last=current;while(current==last)current=Math.floor(Math.random()*elements.length)}else alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');setTimeout((function(){$.innerfade.next(elements,settings,current,last)}),settings.timeout)}})(jQuery);function removeFilter(element){if(element.style.removeAttribute){element.style.removeAttribute('filter')}}

//]]>
</script>
<script type='text/javascript'>
  $(document).ready(
  function(){
   $('#news').innerfade({
    animationtype: 'slide',
    speed: 750,
    timeout: 2000,
    type: 'random',
    containerheight: '1em'
   });

   $('ul#portfolio').innerfade({
    speed: 1000,
    timeout: 5000,
    type: 'sequence',
    containerheight: '220px'
   });

   $('.fade').innerfade({
    speed: 1000,
    timeout: 6000,
    type: 'random_start',
    containerheight: '1.5em'
   });

   $('.adi').innerfade({
    speed: 'slow',
    timeout: 5000,
    type: 'random',
    containerheight: '150px'
   });

 });
</script>

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<ul id="portfolio" style="list-style-type:none;">

<li><a href="http://bloggertipandtrick.blogspot.com/search/label/Bookmarks?max-results=1000"><img alt="Social Bookmarks For Bloggers" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbgXyPrHiXHjRpntWxGxynlaW3Rl5Iqa3DoiDyDNOIOfsS5idaoFzjDYtGBFlZaOJ35JFwLxwmJ_MAHXmS6VdoSZLTCO5HcLYq69aJ6PUco7bvAeg3CZkNSi3JhcNwmxswI1jOy__mqt4d/+Bookmarks.jpg"/></a></li>

<li><a href="http://bloggertipandtrick.blogspot.com/search/label/java%20script?max-results=1000"><img alt="Java Script Tutorials" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCjLWdezSb1K_p11LNF8yUJFXhIgquhau0ozD25TIsY9-MS2BQ7EfUvnEBmflOTRWlx5sJrjLrKwm4uH7LJV8G9L6vrLov55428ie0SU5gmysmw6mDC2Ajb-BWAVR4IUSI44635Ezxbnw8/+script.jpg"/></a></li>

<li><a href="http://bloggertipandtrick.blogspot.com/search/label/jQuery?max-results=1000"><img alt="jQuery Tutorials" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdnmxjWseuRlw9YW8Y1vDRyYvEfORa_eLRhz0z_vp4rZHm8gyM5tLyHAqsHpsF9GEKkJcwl2zIsAfjvS9dT6RAs-iqOatq2CBQnzom5XD8fxgk_c-iUHVBncvUOyQem8WwBA5Rz6FngeQr/"/></a></li>

<li><a href="http://bloggertipandtrick.blogspot.com/search/label/Windows?max-results=1000"><img alt="Windows Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGkvBWHbzliaMpZ4YLWN1IqlToOKP-yoR3Z_z5uf26_n0QUasMiNBZIiCNNO1Ld3QroLJIlq83BJEl51XC5Se8OuKqgSfYLjyB9L9xU9_8RF2dmcpVLKExWhKv02T0B3TqkFqr9Dl36HxY/"/></a></li>

<li><a href="http://bloggertipandtrick.blogspot.com/search/label/Templates?max-results=1000"><img alt="Blogger Templates" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMrIS1ghaFyVvwBXAqXLZBfY9GOi8kHXztMnqwInTd_Gueo5fo8IVwxKImmngz6Ptuu6LMa6igcGXkRU4z9O5ggy2GtpDhtWPbr1P5b698YsoWWclqOYOJgFkFgsHdju5PKr0d0sy06N28/+Templates.jpg"/></a></li>

<li><a href="http://bloggertipandtrick.blogspot.com/search/label/Wordpress?max-results=1000"><img alt="Wordpress Tutorials" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXte479Lp1G73ct9o_ukqO7Fnvd3osKNf_M1RqxZfKTVgECfgY9Wv-koVBBht5lMJNq-pzpFtgJ1Hbab3R65yIIBHpo0f8vyURm83fO0bUkHKOowNpOxHJzvzGGVzzjq_2spjhlhZOfOf/"/></a></li>

</ul>

You are done.