Nivo Slider

Olá *-*, neste tutorial vou a ensinar a colocar aquele slide que muitos blogs já usam. A explicação deste post foi baseada na explicação do blog Império do Photoshop (que já fechou).

No painel, vai a design → editar html → aperta F3 e procura pela tag:

</head>

Acima dessa tag, cola o seguinte código.

<script type="text/javascript">
        var $nv4wp = jQuery.noConflict();
        $nv4wp(window).load(function() {
            $nv4wp('#slider').nivoSlider({
                effect:'random',
                slices:15,
                boxCols: 4,
                boxRows: 2,
                animSpeed:500,
                pauseTime: 2000,
                startSlide:0,
                directionNav:true,
                directionNavHide:true,
                controlNav:true,
                controlNavThumbs:false,
                controlNavThumbsFromRel:false,
                controlNavThumbsSearch: '.jpg',
                controlNavThumbsReplace: '_thumb.jpg',
                keyboardNav:true,
                pauseOnHover:true,
                manualAdvance:false,
                captionOpacity:0.5,
                prevText: 'Prev',
                nextText: 'Next',
                beforeChange: function(){},
                afterChange: function(){},
                slideshowEnd: function(){},
                lastSlide: function(){},
                afterLoad: function(){}
            });
        });
        </script>

Agora procura pela seguinte tag:

]]></b:skin>

Acima dessa tag, cola o seguinte código.

.slider {width:100%;}
.slider img {
position: absolute;
top:0px;
left:0px;
display:none;}
.slider a {border:0;
display:block;}
.nivo-controlNav {display:none;}
.nivo-directionNav a {display:block;
width: 31px;
height:34px;
background:url( URL da Seta) no-repeat;
text-indent:-9999px;
border:0;}
a.nivo-nextNav {background-position: -30px 0;
right:15px;}
a.nivo-prevNav {left: 15px;}
.nivo-caption {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
.nivo-caption a {color:#efe9d1;
text-decoration:underline;}

Depois de isso feito, guarda o modelo. Agora só tens de aplicar o código abaixo, no sítio em que queres que apareça o slide.

<a href="Link para redirecionamento" target="_blank"><img src="URL da Imagem" width="Largura" height="Altura"/></a>
<a href="Link para redirecionamento" target="_blank"><img src="URL da Imagem" width="Largura" height="Altura"/></a>
<a href="Link para redirecionamento" target="_blank"><img src="URL da Imagem" width="Largura" height="Altura"/></a>
</div></div> 

Pronto, como vês é bastante fácil e útil. Se precisares de ajuda, não hesites em pedir, pois estou aqui para isso mesmo.