Attractive Jquery Nivo Slider for Blogger

Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

There are several image sliders out there on web. The latest Jquery Nivo slider is the most inspired among several other image sliders. Jquery prompting the users to use advanced technologies on web. Now Jquery have again grabbed the users attention by its new image slider which looks highly complicated.let us go with the tutorial on implementing Jquery Nivo slider on Blogger.

Live Demo

How to Add Jquery Nivo slider for Blogger ?

• Go to blogger Dashboard --> Template --> Edit Html (Tick Expand widget template option)
• Find this code below

]]></b:skin>

• Paste the following code just above

<!--Cool Dood Tricks--!>/*/** jQuery Nivo Slider v2.5.1* http://nivo.dev7studios.com** Copyright 2011, Gilbert Pellegrom* Free to use and abuse under the MIT license.* http://www.opensource.org/licenses/mit-license.php* Bloggerised by http://www.bloggertricks.biz*
*/#slider-wrapper {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Jz_vHv4FqHJGKKFSzC2a_LrBvUZWycY1xf9_9Gxob_DZa_lyU9GwkPH8k-Oco1JrrgsvnK1Zr9KaKIuO9Y6K4CBXAQceKV1-8Nx6m_ZwFAruU8QHWnpvo-HmoJcBROVYGc5-5XcxXFM/s1600/slider.png) no-repeat;width:998px;height:392px;margin:0 auto;padding-top:74px;margin-top:50px;}#slider {position:relative;width:618px;height:246px;margin-left:190px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOLA_mDw2Zr0NMPBMQTMYUPSI0inKaIjRA0sYXCAVDLG-cT_FfQZY7XiF2xJjjB4XsBd8-1630bDx_LADqqgXizXEBUjZzGyoVaP_cxYppYYRf3TIoPoUqIUPVVoePYNl5zjzOwD6e-smU/s1600/%5Bbloggertricks.biz%5Dload.gif) no-repeat 50% 50%;margin-bottom:30px;}#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/AVvXsEgCU2oG5XMkjikEBrdvVu_9ScYJEQ6QVNBam9tu3LzECZg_Q-szBigNyW6icS2RcYVcERwUyxB6snQuIvTggwPqQKT2asurtRZUrIOWC363S_pehhsZkOYj2dco3KEPLXtZYpr7DnfrZAEs/s1600/%5Bbloggertricks.biz%5DBullets.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/AVvXsEhe9eCraTemZbNYlIOxa86UtPi5wlMnc6gAA-cFgpLSbsYc4IUImiYEyrBsTJ80pKB13kopuG4b8n9ngifrX8b7O_Ju_qJRUcVYFZiFEoWBOkvFX6negh5-BhXXuH0BEVZN5zQE2rrh0CGC/s1600/%5Bbloggertricks.biz%5DArrows.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;}.nivo-caption a {color:#efe9d1;text-decoration:underline;}/* The Nivo Slider styles */.nivoSlider {position:relative;}.nivoSlider img {position:absolute;top:0px;left:0px;}/* If an image is wrapped in a link */.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;}/* The slices and boxes in the Slider */.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}.nivo-box {display:block;position:absolute;z-index:5;}/* Caption styles */.nivo-caption {position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:0.8; /* Overridden by captionOpacity setting */width:100%;z-index:8;}.nivo-caption p {padding:5px;margin:0;}.nivo-caption a {display:inline !important;}.nivo-html-caption {display:none;}/* Direction nav styles (e.g. Next & Prev) */.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;}.nivo-prevNav {left:0px;}.nivo-nextNav {right:0px;}.nivo-directionNav a {display:block;width:30px;height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe9eCraTemZbNYlIOxa86UtPi5wlMnc6gAA-cFgpLSbsYc4IUImiYEyrBsTJ80pKB13kopuG4b8n9ngifrX8b7O_Ju_qJRUcVYFZiFEoWBOkvFX6negh5-BhXXuH0BEVZN5zQE2rrh0CGC/s1600/%5Bbloggertricks.biz%5DArrows.png) no-repeat;text-indent:-9999px;border:0;}a.nivo-nextNav {background-position:-30px 0;right:15px;}a.nivo-prevNav {left:15px;}/* Control nav styles (e.g. 1,2,3&#8230;) */.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;}.nivo-controlNav a.active {font-weight:bold;}.nivo-controlNav a {display:block;width:22px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCU2oG5XMkjikEBrdvVu_9ScYJEQ6QVNBam9tu3LzECZg_Q-szBigNyW6icS2RcYVcERwUyxB6snQuIvTggwPqQKT2asurtRZUrIOWC363S_pehhsZkOYj2dco3KEPLXtZYpr7DnfrZAEs/s1600/%5Bbloggertricks.biz%5DBullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;}

Note:To change the width and height of the slider, change 618px with your desired width and 246px with your desired height, but make sure that you have cropped your images to match exact width and height of the Nivo slider.

• Find for </head> and place the following code just above it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script><script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'></script><script type='text/javascript'>$(window).load(function() { $('#slider').nivoSlider();});</script>

• Save the Template.
• Now go to blogger dashboard --> Layout --> Add a gadget and choose Html/JavaScript gadget
• Paste the following peace of code inside it

<div id='slider'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL3MvQ-TPcQLLsA-B83els_wC0AU8Yq_h-i_x4k06GhtY5d0ZFhXDr0XpNvhO7Mrwc5zaBvec7ljUnDv0IL8_Bv0KB6mQK1cr8VjQmIJrF1GMCyeSg8N1tu_MUQhsR3qGovMQtuwUZXkM/s1600/toystory.jpg'/><a href='http://dev7studios.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie83aMptwWwhGz29BjjRH_pLiXcIYsj9CfbftQRRYvswQhi3-xkiEULMWfChgzKuEneFv2ZHUVYoE79Xdt1NaQSiLo6pSIYHONFC5icXTbYceOWepPdkXTSJvd6bwnBqgLOPDVAHPeP1U/s1600/up.jpg' title='Cool Dood Tricks'/></a><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9BEIrER-KVWMu76xY-5yE2VS5OuthNX4n0vN1WPUZNNsK6nLlhwjYmbSx7JbsHyJN-fJumTQpPrUur_bJ9xrS2F7cShuKntoKv8E1sBiAgY_ZjMmg9otTc4Chp0zlkk3TcDyPBX-Qe9I/s1600/walle.jpg' title='This is an example of a caption'/><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0QialicFpT71p2h9wKxeyB4TlfQhJPVpsk4P9VDmI0GZawm8w6KLizu3H9QjO5TWz1xFRFjLnHVJCouOjyrsT1RIIcn8WwuITf_NX1CriW1W6BBT62s00JUbKgC7pHMeqXPwqtVUaosQ/s1600/nemo.jpg'/></div>

Customization

• In the above html code, images are highlighted in Yellow color. Replace the image links with your own images of width and height specified in the above Css style.
• To add a new image, simply add a new image tag just before the closing div tag like below 

<img src="image link" alt="keyword" title="caption"/></div>

• If you wish to associate a link with an image, use href tag as shown below.

<a href="link"><img src="image link" alt="" title=""/></a>

Kindly Bookmark this Post using your favorite Bookmarking service: