All for Joomla All for Webmasters

Slide 2

Hoje vou ensinar a fazer o slide de uma das minhas páginas para o Bayern, a ILBM.

1. Cole esses dois códigos antes de </head>.

<script type="text/Javascript" src="http://sugar-dance.org/js/jquery.js"></script>
<script type="text/Javascript" src="http://sugar-dance.org/js/jquery2.js"></script>

2. Edite o código abaixo:

$(document).ready(function(){
    // Set up our options for the slideshow...
    var myOptions = {
        noImages: 5,
        path: "http://o link da pasta no seu blog onde estao as imagens que vao aparecer no slide.com",  // Relative path with trailing slash.
        captions: {                 
            1:'<b>titulo</b> <div style="font-size:10px;margin-top:5px;">Coloque a mensagem aqui, se tiver acento procure pelo tutorial no Sugar Dance de acentuaçao em html para acentuar a palavra, veja um exemplo no numero 2</div>',
            2:'<b>Página de Humor no Facebook!</b> <div style="font-size:10px;margin-top:5px;">Conheça as divertidas tirinhas do <i>Bayern da Depressão</i>!</div>',
            3:'<b>titulo</b> <div style="font-size:10px;margin-top:5px;">exemplo 3</div>',
            4:'<b>titulo</b> <div style="font-size:10px;margin-top:5px;">exemplo 4</div>',
            5:'<b>titulo</b> <div style="font-size:10px;margin-top:5px;">exemplo 5</div>',
        },
        links: { // se cada foto for ter um link, coloque os links na lista abaixo na ordem que devem existir junto com as imagens.
            1:"http://link.com",
          2:"http://link.com",
            3:"http://link.com",
            4:"http://link.com",
            5:"http://link.com"
        },
        linksOpen:'newWindow',
        timerInterval: 6500, // 6500 = 6.5 segundos tempo de intervalo entre uma imagem ou outra
	randomise: false // se o slide vai ser randomico
    };
    // Woo! We have a jquery slideshow plugin!
    $('#example_1_container').easySlides(myOptions);
})

3. Após editar o código, cole no Bloco de Notas, clique em Salvar Como… e em Salvar como Tipo, coloque Todos os Arquivos e salve com o nome example_1.js

Se você não pode hospedar as imagens nem o código acima no seu blog (se ele for Blogger, por exemplo), você pode utilizar o Fileden, clicando aqui para conhecer o tutorial. O tutorial de acentuação está aqui.

4. Cole o código abaixo no seu CSS e faça as devidas edições.

.easy_slides_container{
border:5px solid #fff; /* borda do slide */
overflow:hidden;
position:relative;
margin-bottom: 10px;}
.easy_slides_img1, .easy_slides_img2 { display:none;
top:0px;
border: 0px solid #000000;
position:absolute;}
.easy_slides_img1
{z-index:2}
.easy_slides_img2 {z-index:1}
.easy_slides_caption
{position:absolute;
bottom:0;
background: #000000; /* fundo das mensagens */
display:none;
z-index:3;
color:#fff; /* cor da letra das mensagens */
font-family: arial; /* fonte das mensagens */
font-size:10px; /* tamanho da fonte das mensagens */
}

5. Sabe o código que você salvou como example_1.js? Você vai hospedar ele e copiar o link, colocando no código abaixo:

<script type="text/Javascript" src="http://link.com/example_1.js"></script>

O código acima, depois de colocar o seu link hospedado do código example_1.js, você então vai colar antes de </head>.

6. E por último, cole o código abaixo onde você quer que o slide apareça.

<div id="example_1_container" class="easy_slides_container">
</div>

7. Prontinho!

Dúvidas? Ask-me!

Recommended links