Cabeçalho

O Blog Html e Css tem como objetivo esclarecer todas as tuas dúvidas sobre design, codificação e personalização de blogs. Pede um tutorial, ou tira as tuas dúvidas. Estou aqui para te ajudar e faço-o de bom grado. Sugestões e perguntas são sempre bem-vindas. Obrigado pela visita e volta sempre.
- Zé Pedro Silva.

31/07/2013

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.

0 Comentários

« »