how to add jquery plugins effects to blogger

Replies

• 

  eternalthinker

  First you need to add the jquery library in your blog's code. Go to Design-->Edit HTML in Blogger Dashboard and paste the following code before your tag:
  

  
  
   
  
  The code above include Jquery framework and nivoslider plugin to your site .
  
  
  
  5,Paste this code right after the code in step 3 :
  
  
  
  
  
  This CSS code will add arrows and bullets icons for navigation in NivoSlider . It also stop flashing images before this plugin loads .
  
  
  
  6,The code of slider content.Paste it after the code in step 5
  
  
  
      
  
      #-Link-Snipped-#
  
      
  
      
  
  ...............
  
  
  
  As you see ,in slider content ,you can add links and caption to images .Modify them and add more if you want .
  
  
  
  7,Make this plugin work by adding an initial code :
  
  
  
  
  
  The initial code above is a simple one . Nivo slider has many options ,and here is the initial code with full option (and description for each option )
  
  
  
  each line is an option ,and you can add ,modify value or remove for adding or removing option . For example ,the line "keyboardNav:true, //Use left & right arrows" mean it allow using right-left arrow button on keyboard for slider navigation . If you don't allow using keyboard ,set the value to "false" . 
  
  
  
  8,Save the widget and see what we have ^^
  
  
  
  
  
  A note for you : Size of displaying slider depend on size of "#slider" element and images in slider . For example : to make a slider which has width : 700px , you have to set the width of slider element to 700px  ; like this
  
  #slider {
  
  width:700px;
  
  }
  
  and use images which have the width :700px for fullfill the slider element . If you use a smaller image ,you will see the slider with smaller size .
  
  That's all .

• 

  computeridiot007

  AbraKaDabra

  Hi, I searched for your query and found this result:
  Let us know if that helped.
  
  1 Download Nivoslider plugin from this site . Or you can download directly from this link .If you download this plugin from website ,you will see two version : production and development . Production is the version in which the code is encrypted for copyright protection . And the development is not encrypted . You can download both of them, but development version is better .
  
  2,Upload file nivo-slider.css and jquery.nivo.slider.js to a host . I recommend Google code for a speed and reliable hosting .
  
  3,Create a HTML/Javascript widget in your Blogger blog .
  
  4,Paste this code into widget content :
  
  
  
  The code above include Jquery framework and nivoslider plugin to your site .
  
  5,Paste this code right after the code in step 3 :
  
  
  This CSS code will add arrows and bullets icons for navigation in NivoSlider . It also stop flashing images before this plugin loads .
  
  6,The code of slider content.Paste it after the code in step 5
  

  
  
  #-Link-Snipped-#
  
  
  ...............
  

  
  As you see ,in slider content ,you can add links and caption to images .Modify them and add more if you want .
  
  7,Make this plugin work by adding an initial code :
  
  
  The initial code above is a simple one . Nivo slider has many options ,and here is the initial code with full option (and description for each option )
  
  each line is an option ,and you can add ,modify value or remove for adding or removing option . For example ,the line "keyboardNav:true, //Use left & right arrows" mean it allow using right-left arrow button on keyboard for slider navigation . If you don't allow using keyboard ,set the value to "false" .
  
  8,Save the widget and see what we have ^^
  
  
  A note for you : Size of displaying slider depend on size of "#slider" element and images in slider . For example : to make a slider which has width : 700px , you have to set the width of slider element to 700px ; like this
  #slider {
  width:700px;
  }
  and use images which have the width :700px for fullfill the slider element . If you use a smaller image ,you will see the slider with smaller size .
  That's all .

  I have tried this one already brother but it didn't work properly bro.......
• 

  Manish Goyal

  I tried a lot, but there is 1 problem ,when i add the whole code inside html widget , the above line of code is automatically removed
  I don't the know the reason
• 

  computeridiot007

  goyal420

  I tried a lot, but there is 1 problem ,when i add the whole code inside html widget , the above line of code is automatically removed
  I don't the know the reason

  brother you have to paste that css code in the edit html section and only javascript and tags like div tags section alone in widget.
  Right now i have added some other slideshow see it but I want to add nivoslider