Ads 468x60px

.

How To Add jQuery Images Slider to Blogger

How To Add jQuery Images Slider 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.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

//** Created: March 19th, 08'
//** Aug 16th, 08'- Updated to v 1.4:
//1) Adds ability to set speed/duration of panel animation (in milliseconds)
//2) Adds persistence support, so the last viewed panel is recalled when viewer returns within same browser session
//3) Adds ability to specify whether panels should stop at the very last and first panel, or wrap around and start all over again
//4) Adds option to specify two navigational image links positioned to the left and right of the Carousel Viewer to move the panels back and forth

//** Aug 27th, 08'- Nav buttons (if enabled) also repositions themselves now if window is resized

var stepcarousel={
ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /> Fetching Content. Please wait...</div>', //customize HTML to show while fetching Ajax content
defaultbuttonsfade: 0.4, //Fade degree for disabled nav buttons (0=completely transparent, 1=completely opaque)
configholder: {},

getCSSValue:function(val){ //Returns either 0 (if val contains 'auto') or val as an integer
 return (val=="auto")? 0 : parseInt(val)
},

getremotepanels:function($, config){ //function to fetch external page containing the panel DIVs
 config.$belt.html(this.ajaxloadingmsg)
 $.ajax({
  url: config.contenttype[1], //path to external content
  async: true,
  error:function(ajaxrequest){
   config.$belt.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
  },
  success:function(content){
   config.$belt.html(content)
   config.$panels=config.$gallery.find('.'+config.panelclass)
   stepcarousel.alignpanels($, config)
  }
 })
},

getoffset:function(what, offsettype){
 return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
},

getCookie:function(Name){
 var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
 if (document.cookie.match(re)) //if cookie found
  return document.cookie.match(re)[0].split("=")[1] //return its value
 return null
},

setCookie:function(name, value){
 document.cookie = name+"="+value
},

fadebuttons:function(config, currentpanel){
 config.$leftnavbutton.fadeTo('fast', currentpanel==0? this.defaultbuttonsfade : 1)
 config.$rightnavbutton.fadeTo('fast', currentpanel==config.lastvisiblepanel? this.defaultbuttonsfade : 1)
},

addnavbuttons:function(config, currentpanel){
 config.$leftnavbutton=$('<img src="'+config.defaultbuttons.leftnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Back '+config.defaultbuttons.moveby+' panels'}).appendTo('body')
 config.$rightnavbutton=$('<img src="'+config.defaultbuttons.rightnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Forward '+config.defaultbuttons.moveby+' panels'}).appendTo('body')
 config.$leftnavbutton.bind('click', function(){ //assign nav button event handlers
  stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby)
 })
 config.$rightnavbutton.bind('click', function(){ //assign nav button event handlers
  stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby)
 })
 if (config.panelbehavior.wraparound==false){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)
  this.fadebuttons(config, currentpanel)
 }
},

alignpanels:function($, config){
 var paneloffset=0
 config.paneloffsets=[paneloffset] //array to store upper left offset of each panel (1st element=0)
 config.panelwidths=[] //array to store widths of each panel
 config.$panels.each(function(index){ //loop through panels
  var $currentpanel=$(this)
  $currentpanel.css({float: 'none', position: 'absolute', left: paneloffset+'px'}) //position panel
  $currentpanel.bind('click', function(e){return config.onpanelclick(e.target)}) //bind onpanelclick() to onclick event
  paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.get(0).offsetWidth || $currentpanel.css('width')) //calculate next panel offset
  config.paneloffsets.push(paneloffset) //remember this offset
  config.panelwidths.push(paneloffset-config.paneloffsets[config.paneloffsets.length-2]) //remember panel width
 })
 config.paneloffsets.pop() //delete last offset (redundant)
 var addpanelwidths=0
 var lastpanelindex=config.$panels.length-1
 config.lastvisiblepanel=lastpanelindex
 for (var i=config.$panels.length-1; i>=0; i--){
  addpanelwidths+=(i==lastpanelindex? config.panelwidths[lastpanelindex] : config.paneloffsets[i+1]-config.paneloffsets[i])
  if (config.gallerywidth>addpanelwidths){
   config.lastvisiblepanel=i //calculate index of panel that when in 1st position reveals the very last panel all at once based on gallery width
  }
 }
 config.$belt.css({width: paneloffset+'px'}) //Set Belt DIV to total panels' widths
 config.currentpanel=(config.panelbehavior.persist)? parseInt(this.getCookie(window[config.galleryid+"persist"])) : 0 //determine 1st panel to show by default
 config.currentpanel=(typeof config.currentpanel=="number" && config.currentpanel<config.$panels.length)? config.currentpanel : 0
 if (config.currentpanel!=0){
  var endpoint=config.paneloffsets[config.currentpanel]+(config.currentpanel==0? 0 : config.beltoffset)
  config.$belt.css({left: -endpoint+'px'})
 }
 if (config.defaultbuttons.enable==true){ //if enable default back/forth nav buttons
  this.addnavbuttons(config, config.currentpanel)
  $(window).bind("load, resize", function(){ //refresh position of nav buttons when page loads/resizes, in case offsets weren't available document.oncontentload
   config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")}
   config.$leftnavbutton.css({left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px'})
   config.$rightnavbutton.css({left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px'})
  })
 }
 this.statusreport(config.galleryid)
 config.oninit()
 config.onslideaction(this)
},

stepTo:function(galleryid, pindex){ /*User entered pindex starts at 1 for intuitiveness. Internally pindex still starts at 0 */
 var config=stepcarousel.configholder[galleryid]
 if (typeof config=="undefined"){
  alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!")
  return
 }
 var pindex=Math.min(pindex-1, config.paneloffsets.length-1)
 var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset)
 if (config.panelbehavior.wraparound==false && config.defaultbuttons.enable==true){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)
  this.fadebuttons(config, pindex)
 }
 config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)})
 config.currentpanel=pindex
 this.statusreport(galleryid)
},

stepBy:function(galleryid, steps){
 var config=stepcarousel.configholder[galleryid]
 if (typeof config=="undefined"){
  alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!")
  return
 }
 var direction=(steps>0)? 'forward' : 'back' //If "steps" is negative, that means backwards
 var pindex=config.currentpanel+steps //index of panel to stop at
 if (config.panelbehavior.wraparound==false){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)
  pindex=(direction=="back" && pindex<=0)? 0 : (direction=="forward")? Math.min(pindex, config.lastvisiblepanel) : pindex
  if (config.defaultbuttons.enable==true){ //if default nav buttons are enabled, fade them in and out depending on if at start or end of carousel
   stepcarousel.fadebuttons(config, pindex)
  }
 }
 else{ //else, for normal stepBy behavior
 pindex=(pindex>config.paneloffsets.length-1 || pindex<0 && pindex-steps>0)? 0 : (pindex<0)? config.paneloffsets.length+steps : pindex //take into account end or starting panel and step direction
 }
 var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset) //left distance for Belt DIV to travel to
 if (pindex==0 && direction=='forward' || config.currentpanel==0 && direction=='back' && config.panelbehavior.wraparound==true){ //decide whether to apply "push pull" effect
  config.$belt.animate({left: -config.paneloffsets[config.currentpanel]-(direction=='forward'? 100 : -30)+'px'}, 'normal', function(){
   config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)})
  })
 }
 else
  config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)})
 config.currentpanel=pindex
 this.statusreport(galleryid)
},

statusreport:function(galleryid){
 var config=stepcarousel.configholder[galleryid]
 var startpoint=config.currentpanel //index of first visible panel
 var visiblewidth=0
 for (var endpoint=startpoint; endpoint<config.paneloffsets.length; endpoint++){ //index (endpoint) of last visible panel
  visiblewidth+=config.panelwidths[endpoint]
  if (visiblewidth>config.gallerywidth){
   break
  }
 }
 startpoint+=1 //format startpoint for user friendiness
 endpoint=(endpoint+1==startpoint)? startpoint : endpoint //If only one image visible on the screen and partially hidden, set endpoint to startpoint
 var valuearray=[startpoint, endpoint, config.panelwidths.length]
 for (var i=0; i<config.statusvars.length; i++){
  window[config.statusvars[i]]=valuearray[i] //Define variable (with user specified name) and set to one of the status values
  config.$statusobjs[i].text(valuearray[i]+" ") //Populate element on page with ID="user specified name" with one of the status values
 }
},

setup:function(config){
 //Disable Step Gallery scrollbars ASAP dynamically (enabled for sake of users with JS disabled)
 document.write('<style type="text/css">\n#'+config.galleryid+'{overflow: hidden;}\n</style>')
 jQuery(document).ready(function($){
  config.$gallery=$('#'+config.galleryid)
  config.gallerywidth=config.$gallery.width()
  config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")}
  config.$belt=config.$gallery.find('.'+config.beltclass) //Find Belt DIV that contains all the panels
  config.$panels=config.$gallery.find('.'+config.panelclass) //Find Panel DIVs that each contain a slide
  config.onpanelclick=(typeof config.onpanelclick=="undefined")? function(target){} : config.onpanelclick //attach custom "onpanelclick" event handler
  config.onslideaction=(typeof config.onslide=="undefined")? function(){} : function(beltobj){$(beltobj).stop(); config.onslide()} //attach custom "onslide" event handler
  config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
  config.beltoffset=stepcarousel.getCSSValue(config.$belt.css('marginLeft')) //Find length of Belt DIV's left margin
  config.statusvars=config.statusvars || []  //get variable names that will hold "start", "end", and "total" slides info
  config.$statusobjs=[$('#'+config.statusvars[0]), $('#'+config.statusvars[1]), $('#'+config.statusvars[2])]
  config.currentpanel=0
  stepcarousel.configholder[config.galleryid]=config //store config parameter as a variable
  if (config.contenttype[0]=="ajax" && typeof config.contenttype[1]!="undefined") //fetch ajax content?
   stepcarousel.getremotepanels($, config)
  else
   stepcarousel.alignpanels($, config) //align panels and initialize gallery
 }) //end document.ready
 jQuery(window).bind('unload', function(){ //clean up
  if (config.panelbehavior.persist){
   stepcarousel.setCookie(window[config.galleryid+"persist"], config.currentpanel)
  }
  jQuery.each(config, function(ai, oi){
   oi=null
  })
  config=null
 })
}
}

//]]>
</script>

<style type='text/css'>
#myslides{
background:#2c3133;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 95%; /*Width of Carousel Viewer itself*/
height: 165px; /*Height should enough to fit largest content&#39;s height*/
margin: 0px 14px 5px 14px;
background:#2c3133;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 17px ; /*margin around each panel*/
width:220px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#202325;
height:140px;
border:1px solid #393f42;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#040404; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 10px 10px 10px; /*margin around each panel*/
padding:0px 0px;
}
</style>

Note : You can change width value as your choice.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

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

<div id="myslides">

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ['http://3.bp.blogspot.com/_4HKUHirY_2U/Swp_uMVeIBI/AAAAAAAAATs/53m4n9dGzso/rem1.jpg', -14, 60], rightnav: ['http://3.bp.blogspot.com/_4HKUHirY_2U/Swp_x-EbbHI/AAAAAAAAAT0/W5WfkjVPzdE/rem2.jpg', 0, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>


<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<a href="#" title="NFS Most Wanted">
<img alt="NFS Most Wanted" width="200" src="http://4.bp.blogspot.com/_4HKUHirY_2U/Swp3aiu5SZI/AAAAAAAAASk/yizi7snG_Bg/NFS+Most+Wanted.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="Call Of Duty">
<img alt="Call Of Duty" width="200" src="http://1.bp.blogspot.com/_4HKUHirY_2U/Swp3ntj2moI/AAAAAAAAASs/yE5UW180uuw/Call+Of+Duty.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="MaxPayne3 Game">
<img alt="MaxPayne3 Game" width="200" src="http://3.bp.blogspot.com/_4HKUHirY_2U/Swp5VFoWHVI/AAAAAAAAATk/pFK49oX63xY/maxpayne3+game.gif" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="Tomb Raider">
<img alt="Tomb Raider" width="200" src="http://3.bp.blogspot.com/_4HKUHirY_2U/Swp4F6x_GwI/AAAAAAAAATc/zSWizc86amA/Tomb+Rider.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="Harry Potter">
<img alt="Harry Potter" width="200" src="http://2.bp.blogspot.com/_4HKUHirY_2U/Swp37ci8djI/AAAAAAAAATM/h4EWIfrRQUs/harry+potter.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="NFS ProStreet">
<img alt="NFS ProStreet" width="200" src="http://2.bp.blogspot.com/_4HKUHirY_2U/Swp3sTBAurI/AAAAAAAAAS0/luZtbZH5kdQ/NFS+ProStreet.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="MaxPayne Movie">
<img alt="MaxPayne Movie" width="200" src="http://2.bp.blogspot.com/_4HKUHirY_2U/Swp31-yKvyI/AAAAAAAAATE/R9DDNeyELg0/MaxPayne3+movie.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="NFS Undercover">
<img alt="NFS Undercover" width="200" src="http://3.bp.blogspot.com/_4HKUHirY_2U/Swp3_TDx6gI/AAAAAAAAATU/3f5FAgdoT-I/NFS+Undercover.jpg" height="120"/>
</a>
</div>

</div>
</div>
</div>


Note: Host above 2 images yourself.

You are done.It will look like this:

Don't Miss Another Post. Free Updates Like Us

Share this Article

Enter Your Email For Updates

Labels

Adsense (1) Automatic Backlink (11) b (1) Backlink (9) Blog beginners (134) blog designing (138) blog site (3) blog spot (1) Blog Templates Download (15) blog Tips and Tutorials (1) Blogger blog (4) Blogger help (4) Blogger Templates (1) Blogger tips (3) Blogger tutorial (5) Blogging Software (1) blogging tips and tricks (149) Blogging Tips and tutorials (156) Blogging Tools (131) Blogging widgets (101) Codes and scripts (72) Computer news and updates (31) Directorys (8) Ebooks (1) f (1) Facebook (16) Facebook And Blogger (1) Faceobook (1) Farmville (1) File hositng and sharing (2) Fonts and Images (1) Forums (1) Free online services (28) Freewares (34) Gadets (13) Games (3) Google (22) google blogs (3) how 2 start a blog (3) How do I Start a Blog (5) How do i start a blog for free (12) How do you start a blog (7) how to blog (1) How to Get Started Blogging for Yourself (1) how to start a blog (4) How to start a blog for free (3) How To Start A Free Blog (1) how to start blogging (1) how to write a blog (1) i pad (4) Internet (43) Internet money making tips and tutorials (7) make a free blog (1) Make a free blogger blog (2) make a free bloghow do i start a blog for free (1) make blog (1) make your own blog (1) Make your own web site (2) Make your own website free (7) Mobile (4) Photoshop plugins and tutorials (2) rss (3) Search engine optimization (52) Seo (55) Seo blogger (5) softwares (24) start a blog (4) start a blog how to (1) Start a blog Tips (1) start blog (6) start my own blog (1) start your own blog (4) Start your own blog free (2) starting a blog (5) starting a blog for free (2) Tips and Triks (58) Tips to Start Blogging Successfully (1) Twitter (4) updates (1) web designing (10) websites (1) Windows Tips and Triks (22) Wordpress (1) You tube (1)