Slide Horizontal para Anúncios no Blogger

Coloque anúncios de publicidade e/ou postagens nesse slide leve e funcional.

Apresentamos hoje para você que acessa o ProDeveloper mais uma opção de slide para ter em seu blog. É o slide horizontal para opções de anúncios ou o que você desejar destacar, com um código relativamente simples e de fácil configuração, mas que não deixa a desejar no quesito funcionalidade e com um visual bem legal.

Para colocar em seu blog é simples, veja a seguir o passo a passo:

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Tutorial

1- Acesse seu blogger, no menu lateral vá em "Modelo" e em seguida clique em "Editar HTML".

2- Clique no código do template, pressione "CTRL+F" e pesquise por </head>

3- Logo ACIMA da tag pesquisada cole o seguinte código:

<script src='http://dl.dropbox.com/u/16265358/downloadsgratis/jquery.js' type='text/javascript'></script>
<script src='http://dl.dropbox.com/u/16265358/downloadsgratis/jquery.flexislider.js' type='text/javascript'></script>

4- Pesquise agora por ]]></b:skin>

5- Logo ACIMA cole o seguinte código:

#publicidade-header{
clear:both;
width:880px;
height:99px;
background:url(http://i41.tinypic.com/1040lsp.png) no-repeat;
margin:0px 0px 10px 0px;
padding:17px 45px 15px 65px
}
#slider {position: relative; overflow: hidden;height:100px;}
#slider a {position:absolute; margin:0; height:92px; width:150px; display:none;}
#imageloader {position:relative; display:block; width: 100%; margin: 0px auto; text-align: center;}
#imageloader img { position:relative; top:40px; z-index:100; width:128px; height:15px; display:inline;}

* Se você tem experiência com CSS, pode alterar alguns trechos e personalizar a seu gosto.

6- Pesquise agora por </header>

7- Logo ABAIXO cole o seguinte código:

<div id='publicidade-header'>
<div id='slider'>
<div id='imageloader'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTT6WY2ta-iQIFhFiouM85LB1FM0zayTWLyskx7LVCKNhLC0-cjgKMHNK7o_kHp9VyYFErQulmJCw9JrExV6Vp7HA24sFaFsINLXaqdXWkPwaW15TXNXBQrRCGCZEmjqf0Q1sXWN52AGc/s1600/ajax-loader.gif'/>
</div>
<a href='/seulink' title='title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD-qb5ezJArIFK4Rcmu1FTdpF8UtMtjK5KVwtLE4z7zW4DJrCvuVkqvS7jNF-T03gVpa-3N4h8trIeOqdrpM9rpgA5wHTg9rCGtQwNLB3J5F4FdosuOSmSwek9MRGh8ZNZcVyXZdJ4zMOV/s1600/greysanatomy.png'/></a>
<a href='/seulink' title='title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD-qb5ezJArIFK4Rcmu1FTdpF8UtMtjK5KVwtLE4z7zW4DJrCvuVkqvS7jNF-T03gVpa-3N4h8trIeOqdrpM9rpgA5wHTg9rCGtQwNLB3J5F4FdosuOSmSwek9MRGh8ZNZcVyXZdJ4zMOV/s1600/greysanatomy.png'/></a>
<a href='/seulink' title='title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD-qb5ezJArIFK4Rcmu1FTdpF8UtMtjK5KVwtLE4z7zW4DJrCvuVkqvS7jNF-T03gVpa-3N4h8trIeOqdrpM9rpgA5wHTg9rCGtQwNLB3J5F4FdosuOSmSwek9MRGh8ZNZcVyXZdJ4zMOV/s1600/greysanatomy.png'/></a>
<a href='/seulink' title='title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD-qb5ezJArIFK4Rcmu1FTdpF8UtMtjK5KVwtLE4z7zW4DJrCvuVkqvS7jNF-T03gVpa-3N4h8trIeOqdrpM9rpgA5wHTg9rCGtQwNLB3J5F4FdosuOSmSwek9MRGh8ZNZcVyXZdJ4zMOV/s1600/greysanatomy.png'/></a>
<a href='/seulink' title='title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD-qb5ezJArIFK4Rcmu1FTdpF8UtMtjK5KVwtLE4z7zW4DJrCvuVkqvS7jNF-T03gVpa-3N4h8trIeOqdrpM9rpgA5wHTg9rCGtQwNLB3J5F4FdosuOSmSwek9MRGh8ZNZcVyXZdJ4zMOV/s1600/greysanatomy.png'/></a>
<a href='/seulink' rel='nofollow' title='title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD-qb5ezJArIFK4Rcmu1FTdpF8UtMtjK5KVwtLE4z7zW4DJrCvuVkqvS7jNF-T03gVpa-3N4h8trIeOqdrpM9rpgA5wHTg9rCGtQwNLB3J5F4FdosuOSmSwek9MRGh8ZNZcVyXZdJ4zMOV/s1600/greysanatomy.png'/></a>
<a href='/seulink' title='title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD-qb5ezJArIFK4Rcmu1FTdpF8UtMtjK5KVwtLE4z7zW4DJrCvuVkqvS7jNF-T03gVpa-3N4h8trIeOqdrpM9rpgA5wHTg9rCGtQwNLB3J5F4FdosuOSmSwek9MRGh8ZNZcVyXZdJ4zMOV/s1600/greysanatomy.png'/></a>
<a href='/seulink' rel='nofollow' title='title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD-qb5ezJArIFK4Rcmu1FTdpF8UtMtjK5KVwtLE4z7zW4DJrCvuVkqvS7jNF-T03gVpa-3N4h8trIeOqdrpM9rpgA5wHTg9rCGtQwNLB3J5F4FdosuOSmSwek9MRGh8ZNZcVyXZdJ4zMOV/s1600/greysanatomy.png'/></a>
<a href='/seulink' title='title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD-qb5ezJArIFK4Rcmu1FTdpF8UtMtjK5KVwtLE4z7zW4DJrCvuVkqvS7jNF-T03gVpa-3N4h8trIeOqdrpM9rpgA5wHTg9rCGtQwNLB3J5F4FdosuOSmSwek9MRGh8ZNZcVyXZdJ4zMOV/s1600/greysanatomy.png'/></a>
<a href='/seulink' title='title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD-qb5ezJArIFK4Rcmu1FTdpF8UtMtjK5KVwtLE4z7zW4DJrCvuVkqvS7jNF-T03gVpa-3N4h8trIeOqdrpM9rpgA5wHTg9rCGtQwNLB3J5F4FdosuOSmSwek9MRGh8ZNZcVyXZdJ4zMOV/s1600/greysanatomy.png'/></a>
</div>
</div>

* As partes destacadas em VERMELHO, troque pelas urls das imagens que você deseja que apareça no slide (tamanho 141x92px).

* As partes destacadas em AZUL, troque pelos links correspondentes.

OBS.: Você pode colocar o código do passo 7 também em um gadget HTML/Javascript ou em qualquer parte do código de seu template caso desejar.

8- Clique em "Visualizar", estando tudo de acordo clique em "Salvar Modelo".

Deixe seu comentário, pois ele é a motivação para nosso trabalho.