Nivo Slider no seu blog

Funciona tanto no tumblr quanto no blogger. Temos visualização aqui!


Bom, irei ensinar a como inserir em seu theme/layout o Nivo Slider. Lembrando que eu baixei o Nivo da internet, do próprio site dele, e estou criando esse tuto sozinha.

Exemplo aqui!

 Bom, não é complicado fazer isso, porém você deve prestar atenção a alguns detalhes. Adicione o código abaixo antes 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> (no blogger <b:skin> </b:skin>), 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" />
                <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>

    
    <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. Lembrando que suas fotos devem ser do tamanho que está descrito no código .theme-default.
            
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(percebam que tem dois tipos nesse código acima). Lembrando que esses códigos foi retirados do site original,  aqui
Deixe seu comentário se lhe foi útil!