How To Add Cool Jquery Featured Slider to Blogger/Websites
1.Login to your blogger dashboard and go to Design --> Page Elements.
2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the one of code given below and click save.
1.Login to your blogger dashboard and go to Design --> Page Elements.
2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the one of code given below and click save.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> <style> #slider { position:relative; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; display:block; } .nivo-controlNav { position:absolute; left:260px; bottom:-42px; } .nivo-controlNav a { display:block; width:22px; height:22px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxBO5nll_GF2CN46eDn4iyoizm8kSYCJIHz1clEfshznkdLZp76eOCO2BSeYBXzcaHuWrL4EQiOvVgW3hetMVv3G1AiTNP9FQzKemL0Szd7p5KSm6vG-U00INAO6PUa5fat2G7tJ7low/s400/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJNOlgl49RgLUlDoBfAHuJGa8UjC0_3_HXHW-kMQPK2I6D6AQiGfXwvUqtnA80CwtJymNFwbZh5qJH7spt6lUSA4gobztGcTyJhwr3LHg0ofyzUF6z37Vgq4stnvCGavxtOcT7brZwA8/s400/arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } .nivo-caption { text-shadow:none; font-family: Helvetica, Arial, sans-serif; font-size:16px; padding: 10px 0px; } .nivo-caption a { color:#efe9d1; text-decoration:underline; } .clear { clear:both; } .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; } .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.7; /* Overridden by captionOpacity setting */ width:100%; z-index:89; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } .nivo-directionNav a { position:absolute; top:45%; z-index:99; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } .nivo-controlNav a { position:relative; z-index:99; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } </style> <div id="slider"> <a href="URL-of-Post 1"><img src="Slide-X-Image-Address 1" alt="" title="Slide X Description [...] 1" /></a> <a href="URL-of-Post 2"><img src="Slide-X-Image-Address 2" alt="" title="Slide X Description [...] 2" /></a> <a href="URL-of-Post 3"><img src="Slide-X-Image-Address 3" alt="" title="Slide X Description [...] 3" /></a> <a href="URL-of-Post 4"><img src="Slide-X-Image-Address 4" alt="" title="Slide X Description [...] 4" /></a> <a href="URL-of-Post 5"><img src="Slide-X-Image-Address 5" alt="" title="Slide X Description [...] 5" /></a> </div> <br/> <br/>
Note : Replace URL-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.
Use width=300px and height=618px images for your slides.
Look at the code below:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> <style> #slider { position:relative; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; display:block; } .nivo-controlNav { position:absolute; left:260px; bottom:-42px; } .nivo-controlNav a { display:block; width:22px; height:22px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxBO5nll_GF2CN46eDn4iyoizm8kSYCJIHz1clEfshznkdLZp76eOCO2BSeYBXzcaHuWrL4EQiOvVgW3hetMVv3G1AiTNP9FQzKemL0Szd7p5KSm6vG-U00INAO6PUa5fat2G7tJ7low/s400/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJNOlgl49RgLUlDoBfAHuJGa8UjC0_3_HXHW-kMQPK2I6D6AQiGfXwvUqtnA80CwtJymNFwbZh5qJH7spt6lUSA4gobztGcTyJhwr3LHg0ofyzUF6z37Vgq4stnvCGavxtOcT7brZwA8/s400/arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } .nivo-caption { text-shadow:none; font-family: Helvetica, Arial, sans-serif; font-size:16px; padding: 10px 0px; } .nivo-caption a { color:#efe9d1; text-decoration:underline; } .clear { clear:both; } .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; } .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.7; /* Overridden by captionOpacity setting */ width:100%; z-index:89; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } .nivo-directionNav a { position:absolute; top:45%; z-index:99; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } .nivo-controlNav a { position:relative; z-index:99; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } </style> <div id="slider"> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzgGQDuZ0yueVnRsQF9r1CsXfMeVM-f8y_yzdjy9oZ95LLt6hwR2PnNnfmrms1-TAI1gu7M1uitloAjFhPueswhN3t_u0xgp6jEnDPLaCWfMjplV9sN9NXju7b6S3C-s8XRDhBXbf3cKYW/s800/Gazelle_-_antelope_%2528savanna.gif" alt="" title="Description Goes Here" /></a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWnyLIBTSFTjN1AnsiwXieCwJdBg33ZOurN-AmdLHjKDM9srILySpX3YKrs8OGRGLfr1sJ0ndYFXg8j2iU_zqFFfOyVrvAkfTyJpyY-Q98euxTipUV-lmxPTcgL49uYpRbJHqekz_wha-e/s800/Curious_Cat%252C_Siberian_Tiger.gif" alt="" title="You can add Description here or leave it blank as shown in the next image" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSxCnV3TEz-Hunlh2QCeAJP3Pi2UY1LIeI0M7bTCPEHM6GLMApFx3LcuId4RM6FNYeeGLtZxWF5KsKHF3_f47TpNhNvWtwHT3h6lBzZBpJbTDlesr8iK_TzyVohkSJE__Ovk29KPaf4Mac/s800/Christmas_Cat.gif" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEispYe8x9Qr3rp-h1cMGgAU1-SsPTqpimw4NqS2v0sAyW83Kv31xuzw5zSeA_QZVFQ8pgblgHZCp7MUxuYkghrlbm5oHiLd2fkrSwiXaW9kwgHG5E_NIdrSYsarFIYum6c8qhwMbCi_DrgB/s800/Leopard%252C_Africa.gif" alt="" title="You Can Add Description Here" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0LNDZy8cSV_V0RBpIGLibsngjdOJLvdhjzjnCSDteZVt4Zfnr8OUxMXEq0Qm_E_2jVoeW6lV1bMBh-INa3sf9KHNkN5x3hW9USmyQof1Diu9s1kR2yRpPLDv73PZwzbL5MwXWMNLEU9jj/s800/Three_tickets_to_the_North_.gif" alt="" title="#htmlcaption" /> </div> <br/> <br/>
Download the new version of slide. Please click here.
Now you are done.
Cheers
Categories:
Blog Tips and Tricks,
Jquery,
New,
Plugin,
Widgets