Slide de Notícias ATREVIDA

bastard, heart, photography, blouse, wishlist

E aí amores tudo bom? Bem, vocês tem me pedido bastante tutoriais, eu já tinha uns em mente para postar para vocês e esse era um deles. Clique em Leia Mais.


O objetivo é algo parecido com este slide este aqui do site da Atrevida gente:


Vai ficar assim vejam:


DEFINIÇÕES

Tamanho do Slide: 500px;
Altura do Slide: 250px;
Testado em: Modelo Travel

TUTORIAL


Modelo > Editar HTML

Procure pela tag </head> em seu html. Logo ACIMA desta tag, você cola este código:

<link rel="stylesheet" href="http://uprisingteen.webs.com/Slide_ATREVIDA.css" type="text/css" />
<script src='http://uprisingteen.webs.com/jquery-1.3.2.js' type='text/javascript'/>
<script src='http://uprisingteen.webs.com/jquery-1.5.3-ui.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
});
</script>
Certo? Clique em  SALVAR  e vá para Layout > Adicionar gadget HTML/JavaScript e neste cole:

<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img  src='URLDAIMAGEM-1' width="90" height="58" /></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img src='URLDAIMAGEM-2' width="90" height="58" /></a></li>

<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img src='URLDAIMAGEM-3' width="90" height="58" /></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img src='URLDAIMAGEM-4' width="90" height="58" /></a></li>
</ul>
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='mac' src='URLDAIMAGEM-1' width='400' height='250' />
<div class='info'>
<h2><a href='#'>TÍTULO DO SLIDE 1</a></h2>
<p>Texto do slide aqui</p>
</div>
</div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='mac' src='URLDAIMAGEM-2' width='400' height='250' />
<div class='info'>
<h2><a href='#'>TÍTULO DO SLIDE 2</a></h2>
<p>Texto do slide aqui</p>
</div>
</div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='mac' src='URLDAIMAGEM-3' width='400' height='250' />
<div class='info'>
<h2><a href='#'>TÍTULO DO SLIDE 3</a></h2>
<p>Texto do slide aqui</p>
</div>
</div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='mac' src='URLDAIMAGEM-4' width='400' height='250' />
<div class='info'>
<h2><a href='#'>TÍTULO DO SLIDE 4</a></h2>
<p>Texto do slide aqui</p>
</div>
</div>
</div>

Personalize e depois clique em  SALVAR  e veja se está tudo ok.

Tutorial de: Uprising Teen (Não Reblogue).


Bem é isso, espero que tenham gostado, se houver erros, entre em contato que eu ajudo a resolver ;D