Slide de Notícias CAPRICHO

accessories, animal print, animal prints, bra

Olá gente, hoje eu vim aqui para tentar ensinar de uma vez por todas este slide muito pedido aqui no blog, espero e desejo que sejam adicionado créditos já que eu tenho uma trabalheira danada para fazer estas coisas :( Bom, então clique em Leia Mais e confira!
O objetivo é algo parecido com este slide da página inicial do site da revista teen CAPRICHO:


Bem, a resolução não está uma das melhores, mas vocês podem acessar o site e conferir. Mãos a massa?

Novamente o Blogger mudou o design da página de Modelo, então, fiquem atentos!

Modelo > Editar HTML

Procure por ]]></b:skin> e ACIMA desta tag, você cola:

#featured{
width:250px;
position:relative;
height:333px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position: absolute;
top:0;
left:460px;
list-style:none;
padding:0;
margin:0;
width:103px;
}
#featured ul.ui-tabs-nav li{
padding-left: 13px;
}
#featured .ui-tabs-panel{
max-width:470px;
height:320px;
background:#transparent;
}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:59px;
background:#transparent;
}
#featured li.ui-tabs-selected {
background:url('https://lh3.googleusercontent.com/-ARpnpRekZXk/UVyrhc-BZ_I/AAAAAAAAHog/OadNCpSpNgE/s103/Tabs_Selected.png') top left no-repeat;
}
#featured ul.ui-tabs-nav li img{
float:left;
margin: 0px 2px 2px 2px;
padding:2px;
max-width: 120px;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:240px;
left:10px;
height:60px;
width: 360px;
background: #330033;
opacity: 0.9;
}
#featured .info h2{
font-size:14px;
font-family:arial;
color:#ff0066;
padding:5px;
margin:0;
margin-left:5px;
overflow:hidden;
}
#featured .info p {
margin: 0 5px;
font-family:arial;
font-size:12px;
line-height:15px;
color:#fff;
font-weight: bold;
margin-left: 10px;
}
#featured .info a{
text-decoration:none;
color:#ff0066;
text-transform:uppercase;
}
#featured .info a:hover{
text-decoration:underline;
}

Não altere nada se você quer o modelo no mesmo modelo e cores.

Muito bem? Esse foi o CSS do slide, responsável pelo estilo, tamanho, cores etc.

Agora, procure por </head> e ACIMA desta tag, você cola:
<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>

Este foi o script do slide, ele é responsável pelo movimento de troca do slide. O arquivo não se preocupem, não irei apagar então ele estará funcionando sempre (se você instalar da maneira correta).

Clique em  SALVAR  e vamos continuar!

Agora vem a parte mais fácil, é a parte em que você instala o slide na sua página.

Vá em Layout e adicione um gadget HTML/JavaScript e nele 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="URL_DA_IMAGEM_1" width="80" height="50" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="URL_DA_IMAGEM_2" width="80" height="50" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="URL_DA_IMAGEM_3" width="80" height="50" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="URL_DA_IMAGEM_4" width="80" height="50" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="URL_DA_IMAGEM_5" width="80" height="50" /></a></li>

</ul>

<!-- PRIMEIRA IMAGEM -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="URL_DA_IMAGEM_AQUI_1" width="470" height="320" alt="" />
<div class="info" >
<h2><a href="#" >TÍTULO D0 POST AQUI</a></h2>
<p>DESCRIÇÃO DO POST AQUI</p>
</div>
</div>
<!-- SEGUNDA IMAGEM -->
<div id="fragment-2" class="ui-tabs-panel" style="">
<img src="URL_DA_IMAGEM_AQUI_2" width="470" height="320" alt="" />
<div class="info" >
<h2><a href="#" >TÍTULO D0 POST AQUI</a></h2>
<p>DESCRIÇÃO DO POST AQUI</p>
</div>
</div>
<!-- TERCEIRA IMAGEM -->
<div id="fragment-3" class="ui-tabs-panel" style="">
<img src="URL_DA_IMAGEM_AQUI_3" width="470" height="320" alt="" />
<div class="info" >
<h2><a href="#" >TÍTULO D0 POST AQUI</a></h2>
<p>DESCRIÇÃO DO POST AQUI</p>
</div>
</div>
<!-- QUARTA IMAGEM -->
<div id="fragment-4" class="ui-tabs-panel" style="">
<img src="URL_DA_IMAGEM_AQUI_4" width="470" height="320" alt="" />
<div class="info" >
<h2><a href="#" >TÍTULO D0 POST AQUI</a></h2>
<p>DESCRIÇÃO DO POST AQUI</p>
</div>
</div>
<!-- QUINTA IMAGEM -->
<div id="fragment-5" class="ui-tabs-panel" style="">
<img src="URL_DA_IMAGEM_AQUI_5" width="470" height="320" alt="" />
<div class="info" >
<h2><a href="#" >TÍTULO D0 POST AQUI</a></h2>
<p>DESCRIÇÃO DO POST AQUI</p>
</div>
</div> 

Edite de acordo como o código pede e pronto! Seu slide está pronto! Dúvidas ou problemas? Deixe seu comentário e o link do seu blog nesta postagem para que eu possa ajudar ^^

Obs.: O tamanho do slide é de 550px.

Créditos: UPRISING TEEN - www.uprisingteen.com
Tutorial de: Uprising Teen (Não Reblogue).