Sobre o Blog

MamanunesO Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade.

Info

22.5.09

Um slideshow com imagens deslizantes é ótimo para divulgar seus trabalhos ou posts em destaque; também pode ser bastante útil para quem oferece produtos tipo: artesanato, pintura, decoração, fotos, etc...Visitando o site Zona Cerebral, encontrei esse modelo super prático que compartilho com vocês. Agradeço muitíssimo ao Iván por compartilhar.



Clic na imagem








Modelo com 981px de largura para blogs com fundo branco.

Como inserir:

Antes de qualquer modificação em seu layout, faça um backup (cópia) clicando em "Baixar modelo completo" para evitar que perca tudo em caso de algum erro ou acidente.

Em sua página HTML, procure o trecho </head> e cole antes dele todo o código abaixo:


<script src='http://dl.dropbox.com/u/684300/Mama.jquery-1.3.1.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/684300/mama.slider.js' type='text/javascript'/>

<style type='text/css'>

<style type='text/css'>

/*---------------Slideshow --------------------*/

#slideshow { width: 981px;
background: #fff;
height:150px;
}
#slider {
width: 800px;
height:131px;
margin: 0 90px 0 90px;
position: relative;
border: 10px solid #ccc;
}

.scroll { overflow: hidden;
width: 800px;
height:131px;
margin: 0 auto;
position: relative;
}
.scrollContainer {
position: relative;
height: 131px;
}
.scrollContainer div.panel {
width: 900px;
height: 131px;
}

#left-shadow { position: absolute;
top: 0; left: 0;
width: 12px;
bottom: 0;
background: url(http://img511.imageshack.us/img511/7043/leftshadow.png) repeat-y; height:139px;
}

#right-shadow {
position: absolute;
top: 0; right: 0;
width: 12px;
bottom: 0;
background: url(http://img511.imageshack.us/img511/8940/rightshadow.png) repeat-y; height:139px;
}

.scrollButtons {
position: absolute;
top: 127px;
cursor: pointer;
}
.scrollButtons.left {
left: -45px; top:37px;
}
.scrollButtons.right {
left: 800px;
top:37px;
}

.hide {
display: none;
}



/*--------- Galería -----------*/


.gallery { list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
float:left;
height:109px;
margin:0px;
padding:10px;
position:relative;
width:160px;
}
.gallery li:hover img {
border-color:#000000;
}

.gallery img {
background: #fff;
border:1px solid #888;
padding:5px;
}
.gallery em {
background:#fff url(http://img511.imageshack.us/img511/82/greygradient.gif) repeat-y; color:#000;
font-style:normal;
padding:2px 10px;
display:block;
position: absolute;
left:9px; top:89px;
border: 1px solid #999;
border-left-color: #888;
}
.gallery a { text-decoration:none;
}
.gallery a:hover em {
background:#ffdb01 url(http://img511.imageshack.us/img511/9003/orangegradient.gif) repeat-y; border-color: #c25b08;
}



</style>





Salve o template.
Clic em "Expandir modelo de widgets", procure pelo seguinte trecho:


<div id='content-wrapper'>

Cole abaixo dele o seguinte código:


<div id="slideshow">
<div id="slider">

<img class="scrollButtons left" src="http://img91.imageshack.us/img91/7493/leftarrowv.png" />

<div style="overflow: hidden;" class="scroll">

<div class="scrollContainer">

<div class="panel" id="panel_1">
<div class="inside">
<ul class="gallery">
<li><a href="
endereçodolink"><em>Titulo 1</em><img src="http://endereçodaimagem" alt="Imagen 1" /></a></li>
<li><a href="
endereçodolink"><em>Titulo 2</em><img src="http://endereçodaimagem" alt="Imagen 2" /></a></li>
<li><a href="
endereçodolink"><em>Titulo 3</em><img src="http://endereçodaimagem" alt="Imagen 3" /></a></li>
<li><a href="
endereçodolink"><em>Titulo 4</em><img src="http://endereçodaimagem" alt="Imagen 4" /></a></li>
</ul>

</div>
</div>

<div class="panel" id="panel_2">
<div class="inside">
<ul class="gallery">
<li><a href="
endereçodolink"><em>Titulo 5</em><img src="http://endereçodaimagem" alt="Imagen 5" /></a></li>
<li><a href="
endereçodolink"><em>Titulo 6</em><img src="http://endereçodaimagem" alt="Imagen 6" /></a></li>
<li><a href="
endereçodolink"><em>Titulo 7</em><img src="http://endereçodaimagem" alt="Imagen 7" /></a></li>
<li><a href="
endereçodolink"><em>Titulo 8</em><img src="http://endereçodaimagem" alt="Imagen 8" /></a></li>
</ul>

</div>
</div>

</div>

<div id="left-shadow"></div>
<div id="right-shadow"></div>

</div>

<img class="scrollButtons right" src="http://img91.imageshack.us/img91/7069/rightarrowy.png" />

</div>
</div>



Se quiser mais uma seção de imagens é só acrescentar outro bloco mudando a numeração veja exemplo abaixo::

<div class="panel" id="panel_3">
<div class="inside">
<ul class="gallery">
<li><a href="
endereçodolink"><em>Titulo 9</em><img src="http://endereçodaimagem" alt="Imagen 9" /></a></li>
<li><a href="
endereçodolink"><em>Titulo 10</em><img src="http://endereçodaimagem" alt="Imagen 10" /></a></li>
<li><a href="
endereçodolink"><em>Titulo 11</em><img src="http://endereçodaimagem" alt="Imagen 11" /></a></li>
<li><a href="
endereçodolink"><em>Titulo 12</em><img src="http://endereçodaimagem" alt="Imagen 12" /></a></li>
</ul>

</div>
</div>


IMPORTANTE: As imagens deverão ter 150px de largura por 99px de altura para que apareçam sem problemas.


Obs.: Você pode personalizar o modelo de acordo com seu layout bastando para isso, algum conhecimento de CSS/HTML e bastante paciencia...


Dicas:


11 comentários

Fábio Carvalho

Obrigado mama, sempre tive vontade de colocar um desses no meu blog, já tô com a mão na massa.rsrs

;-)

e que template einh mama, fiuu fiuuuu..[assovio] ;-)

Pr Lyncoln Napoleão

Ficou jóia mamanunes!!

B.B.

Adorei...obrigada!

B.B.

olá, eu gostaria de colocar esse slideshow abaixo do cabecalho...como faco?

Matt

olá
eu consegui colocar o link só que a img nao aparece!!!
http://www.hangargames.blogspot.com

Eu já tentei de todos os modos
a img é essa
http://4.bp.blogspot.com/_KHuvxvCWzXA/ShNR0HbyugI/AAAAAAAAHCE/yZcVmIArjoo/s1600-h/sims3.jpg
do the sims 3 que está disponivel para download no meu site, assim como muitos jogos lançamentos, só que a img não entra! ¬¬
as img minhas são todas do tamanho da img do the sims 3, são capas do CDs dos jogos, mais não funfa! :'(

Matt

eu acho que to conseguindo, só que depois que carrega o meu site a img do jogo fica grande do nada!
será problema do navegador?
mama, queria fazer uma troca de propagandas, eu fazer no seu site para vc fazer no meu :)
tenho futuro, já tenho uma equipe de escola com 5 pessoas para postar pelomenos até o final do mês 2 mil e 500 jogos das mais diversas qualidades e tipos, logo irems bombar! espero sua compreenção para essa troca, caso aceite!
confie em mim, quem confiou nao se arrependeu!

MamaNunes

Matt, tentei comentar em seu blog e não consegui.

1-As imagens para o slideshow devem ser redimencionadas (150 X 99 px) Leia mais atentamente o tutorial.
2- Os endereços também não estão posicionados corretamente.

Se quiser ajuda, por favor preencha o formulário de contato ou mande-me um email.
Abraço!

Matt

precisa cadastrar
mais no seu tuto nao tem isso falando, acho legal tu falar no comessso oque vai prewcisar :)
eu como nao sou bobo, abri o seus codigos na minha pagina e vi o tamanho das suas img....

os endereços consegui colocar tudo certo

ok já tá resolvido, mais falta apenas uma coisa, depois que as img carregão fica tudo lindo, só que dai elas almentao de tamanho após completas,
no meu blog, você poderia ter ido no faça seu pedido, porque comentar nos jogos nao dá certo
qualquer coisa me add no msn
mat_eo_cara@hotmail.com

Hamilton

Adorei. Ficou muito legal.

Enquadrado

Oi,gostaria de agradecer pois esse slide é show.Gostaria de saber se não tem como deixá-lo infinito. Eu achei um site - http://jqueryfordesigners.com/jquery-infinite-carousel/ - que tem um slide infinito mas não sei converter para o blogspot.

L. Braz

Já favoritei seu blog.. vou seguir!

Postar um comentário

Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.