Slide de Notícias CAPRICHO 2

*-*, Cookies, Dream, FRUiTS

Pois é, muita gente pediu então está aqui o tutorial do novo slide da CAPRICHO, que eu vim postar para vocês! Clique em Leia Mais e confira este tuto divo!

OBS.: Espero que façam bom uso deste tutorial (não o usem para querer plagiar todo um layout pois não vou contribuir com isso). Irei autorizar novamente o uso dele, mas como eu disse, sem plágio, apenas fiz este tutorial pois achei o slide bonito ^^

O tutorial quer se assemelhar a um slide igual a este gente:


Eu quis chegar num slide parecido (tá bem, eu sei que não está completamente perfeito que nem o divo da Capricho u_u mas a gente tenta né?). Eu usei o este tutorial aqui como base para criar este modelo.


TUTORIAL

Modelo > Editar HTML

Procure por </head> e acima desta tag cole:

<link href='http://uprisingteen.webs.com/style_CAPRICHO2_UPRISINGTEEN.css' rel='stylesheet' type='text/css'/>
<script src='http://static.tumblr.com/kbenjzh/jpBn5mrls/mama.jquery-1.3.1.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/kbenjzh/JUNn5mrnd/mama.slider.js' type='text/javascript'></script>

OBS.: Para editar as cores, tamanho e etc., você deve abrir o link que está acima (antes dos scripts do slide) e copiar tudo o que tem nele, colando acima de ]]><b:/skin>. Lá você pode editar do jeitinho que melhor preferir ^^


Salve. Agora procure por  <div class='main-outer'> e abaixo cole:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='slideshow'>
<div id='slider'>
<img class='scrollButtons left' src='https://lh4.googleusercontent.com/-e7bvw6RGTls/UgVD_5YP9rI/AAAAAAAAJFE/7ERQMz_j45k/s55/Seta_Voltar%2528Esquerda%2529.png'/>
<div class='scroll' style='overflow: hidden;'>
<div class='scrollContainer'>
<div class='panel' id='panel_1'>
<div class='inside'>
<ul class='gallery'>
<li><a href='LINK AQUI'><em>TÍTULO AQUI</em><em1>DESCRIÇÃO AQUI</em1><img src='URL DA IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><em>TÍTULO AQUI</em><em1>DESCRIÇÃO AQUI</em1><img src='URL DA IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><em>TÍTULO AQUI</em><em1>DESCRIÇÃO AQUI</em1><img src='URL DA IMAGEM AQUI'/></a></li>
</ul>
</div>
</div>
<div class='panel' id='panel_2'>
<div class='inside'>
<ul class='gallery'>
<li><a href='LINK AQUI'><em>TÍTULO AQUI</em><em1>DESCRIÇÃO AQUI</em1><img src='URL DA IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><em>TÍTULO AQUI</em><em1>DESCRIÇÃO AQUI</em1><img src='URL DA IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><em>TÍTULO AQUI</em><em1>DESCRIÇÃO AQUI</em1><img src='URL DA IMAGEM AQUI'/></a></li>
</ul>
</div>
</div>
<div class='panel' id='panel_3'>
<div class='inside'>
<ul class='gallery'>
<li><a href='LINK AQUI'><em>TÍTULO AQUI</em><em1>DESCRIÇÃO AQUI</em1><img src='URL DA IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><em>TÍTULO AQUI</em><em1>DESCRIÇÃO AQUI</em1><img src='URL DA IMAGEM AQUI'/></a></li>
<li><a href='LINK AQUI'><em>TÍTULO AQUI</em><em1>DESCRIÇÃO AQUI</em1><img src='URL DA IMAGEM AQUI'/></a></li>
</ul>
</div>
</div>
</div>
<div id='left-shadow'/>
<div id='right-shadow'/>
</div>
<img class='scrollButtons right' src='https://lh3.googleusercontent.com/-JrqnKhIRXzE/UgVD_ximlRI/AAAAAAAAJFI/t0cJ36jFWt8/s55/Seta_Avan%25C3%25A7ar%2528Direita%2529.png'/>
</div>
</div>
</b:if>

Faça as devidas alterações e pronto! O Slide já está ajustado para aparecer somente na página inicial, e o tamanho dele é de 940px. Espero que tenham curtido ;D

PROÍBIDO REBLOGAR