Em breve, exemplo aqui!
Bom, não é complicado fazer isso, porém você deve prestar atenção a alguns detalhes. Adicione o código abaixo depois da tag <head>:
<link rel="stylesheet" href="http://static.tumblr.com/uarvpk1/2Hym4a2yr/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/uarvpk1/wGmm4a2wo/nivo-slider.css" type="text/css" media="screen" />
Em seu <style></style>, você irá adicionar o código abaixo. Será nesse código que você pode editar o tamanho e onde ficará o seu Slide:
.theme-default #slider {
margin:50px auto 0 auto;
width:350px; /* modifique o tamanho da largura das imagens */
height:200px; /* modifique a altura das imagens*/
}
.clear {
clear:both;
}Agora, adicione o código abaixo onde você quer que apareça o seu slide, será nele que você irá editar as fotos e a descrição:
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="http://static.tumblr.com/uarvpk1/OUmm4a2p3/toystory.jpg" alt="" title="#htmlcaption1" />
<img src="http://static.tumblr.com/uarvpk1/ZeXm4a2po/up.jpg" alt="" title="descricao da segunda imagem" /></a>
<img src="http://static.tumblr.com/uarvpk1/uIim4a2q7/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="http://static.tumblr.com/uarvpk1/raYm4a2nt/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
Descricao da ultima imagem, que voce pode adicionar negrito e link.
</div>
<div id="htmlcaption1" class="nivo-html-caption">
Descricao da primeira imagem, que voce pode adicionar <b>negrito</b> e <a href="">link</a>.
</div>
</div>
</div>
<script type="text/javascript" src="http://static.tumblr.com/uarvpk1/Hgrm4a2r4/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/uarvpk1/x59m4a2tv/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
O que você deve mudar do código acima? Apenas o que estiver negritado. Você irá mudar as fotos e a descrição de cada uma.
Bom, para cada imagem que você acrescentar, você pode inserir um tipo de “title” que quiser, basta prestar atenção no que tem acima, e fazer igual. Lembrando que esses códigos foi retirados do site original, aqui Tutorial totalmente desenvolvido por mim, Anna Gallyack. Não copie.
0 comentários :
Postar um comentário