Novo slider
Autor: Jo Moura | Publicado: 2012-10-14T10:50:00-07:00




O script
Cole esse código abaixo de &lt;/head&gt;


&lt;style type='text/css'&gt;
/* &lt;![CDATA[ */
&nbsp;#w2bSlideContainer &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {position: relative;display: block; top:12px; left:2px; right:5px;/*Ajuste as posição do slide*/}
&nbsp;#w2bNivoSlider &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{ position:relative;
width:250px &nbsp;!important; /*largura do slide*/height:183px &nbsp;!important; /*Altura do slide*/
background: &nbsp;#fff url("http://4.bp.blogspot.com/-TBMTXcO0VxM/T7dSfCUe9dI/AAAAAAAABgY/dmbkzgOPQI0/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 4px solid #000;/*Coloque borda se quiser*/ }
&nbsp;#w2bNivoSlider img &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {position:absolute; top:0; left:0; &nbsp;display:none}
&nbsp;.nivoSlider &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{position:relative;width:100%;height:auto;}
&nbsp;.nivoSlider img &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{position:absolute;top:0;left:0}
&nbsp;.nivo-main-image &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {display:block!important;position:relative!important;width:100%!important}
&nbsp;.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
&nbsp;.nivo-slice &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{display:block;position:absolute;z-index:5;height:100%;top:0}
&nbsp;.nivo-box &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{display:block;position:absolute;z-index:5;overflow:hidden}
&nbsp;.nivo-box img &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{display:block}
&nbsp;.nivo-caption &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{padding: 5px;
font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 240px;/*Largura da legenda*/ z-index:8;}
&nbsp;.nivo-caption p &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{padding:2px;margin:0}
&nbsp;.nivo-caption a &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{display:inline!important}
&nbsp;.nivo-html-caption &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {display:none}
&nbsp;.nivo-directionNav a &nbsp; &nbsp; &nbsp; &nbsp; {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
background: url("http://1.bp.blogspot.com/-yD7iTCniGz4/UDqAD3DXgJI/AAAAAAAACdM/xNDzodwT4kA/s1600/s-6.png") no-repeat;text-indent:-9999px;border:0}
&nbsp;.nivo-prevNav &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{left:10px}
&nbsp;.nivo-nextNav &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{background-position:-30px 0!important;right:10px}
&nbsp;.nivo-controlNav &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
&nbsp;.nivo-controlNav a &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("http://2.bp.blogspot.com/-rQ783rJYsBI/UDqA2NIRiiI/AAAAAAAACeU/5tTb5VhkB3Y/s1600/b-6.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
&nbsp;.nivo-controlNav a.active &nbsp; &nbsp;{font-weight:bold;background-position:0 -22px}
/* ]]&gt; */
&lt;/style&gt;
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/&gt;
&lt;script src='http://bloggerblogwidgets.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js' type='text/javascript'/&gt;
&lt;script type='text/javascript'&gt;
/* &lt;![CDATA[ */
jQuery(document).ready(function($) {
&nbsp;$('#w2bNivoSlider').nivoSlider({
&nbsp; effect &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : 'random',
&nbsp; slices &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : 10,
&nbsp; boxCols &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;: 8,
&nbsp; boxRows &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;: 4,
&nbsp; animSpeed &nbsp; &nbsp; &nbsp; &nbsp;: 500,
&nbsp; pauseTime &nbsp; &nbsp; &nbsp; &nbsp;: 4000,
&nbsp; startSlide &nbsp; &nbsp; &nbsp; : 0,
&nbsp; directionNav &nbsp; &nbsp; : true,
&nbsp; directionNavHide : true,
&nbsp; controlNav &nbsp; &nbsp; &nbsp; : true,
&nbsp; keyboardNav &nbsp; &nbsp; &nbsp;: false,
&nbsp; pauseOnHover &nbsp; &nbsp; : true,
&nbsp; captionOpacity &nbsp; : 0.8
&nbsp;});
});
/* ]]&gt; */
&lt;/script&gt;

Eu destaquei em negrito as partes que você irá precisar alterar para ficar mais fácil de encontrar. No fim do post tem algumas imagens de setas e das bolinhas de navegação para vocês usarem. Depois de fazer as alterações, visualize se está tudo ok e salve.

Os Slides
Agora para o slide aparecer, basta colar o código abaixo em um gadget de HTML/Javascript ou onde quiser que o slide apareça:

&lt;div id="w2bSlideContainer"&gt;
&lt;div id="w2bNivoSlider"&gt;
&lt;a href="http://porfirioinvintage.blogspot.com.br/2012/06/ties-pearls-and-paris.html"&gt;&lt;img src="http://4.bp.blogspot.com/-ZJ7dqCFFffk/UHrn_dj9sjI/AAAAAAAAEN0/T1e2QsZFG3o/s1600/editada.JPG" title="Ties, pearls and paris!"/&gt;&lt;/a&gt;
&lt;a href="http://porfirioinvintage.blogspot.com.br/2012/06/bolo-e-guarana.html"&gt;&lt;img src="http://1.bp.blogspot.com/-fvY0bcfbBsI/UHroN0cslkI/AAAAAAAAEOE/wdrq1M6XTMg/s1600/niver.jpg" title="Bolo e guaraná"/&gt;&lt;/a&gt;
&lt;a href="http://porfirioinvintage.blogspot.com.br/2012/06/livros-gostosos-de-ler_17.html"&gt;&lt;img src="http://1.bp.blogspot.com/-IqmtqsWtvKc/UHrooUheGrI/AAAAAAAAEOM/mZ14mJ0uqFM/s1600/novas2.pn" title="Livros gostosos de ler"/&gt;&lt;/a&gt;
&lt;a href="http://porfirioinvintage.blogspot.com.br/2012/06/week-152in-love.html"&gt;&lt;img src="http://2.bp.blogspot.com/-xtrzOMY4owc/UHroKb32lDI/AAAAAAAAEN8/gb9b4GjwBZ8/s1600/PICT0725.JPG" title="Week 1/52...in love!"/&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;


http://cherry-liah.blogspot.com.br/2012/08/nivo-slider.html