Bom galera este slide é muito usado em Headline e algumas pessoas me pediram pra posta-lo.
Vá em "Design - Editar HTML" e procure por
</head>
Acima dele adicione o seguinte código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://portalanimeex.webs.com/jquery_cyrcle_plugin.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(function(){
var $featured_area = jQuery('#featured-area');
var $featured_item = jQuery('#featured-area div#slider-control div.featitem');
var $slider_control = jQuery('#featured-area div#slider-control');
var $image_container = jQuery('div#s1 > div');
var ordernum;
var pause_scroll = false;
$featured_item.find('img').fadeTo("fast", 0.7);
$slider_control.find("div.featitem.active img").fadeTo("fast", 1);
$image_container.css("background-color","#000000");
$image_container.hover(
function () {
jQuery(this).find("img").fadeTo("fast", 0.7);
},
function () {
jQuery(this).find("img").fadeTo("fast", 1);
}
);
function gonext(this_element){
$slider_control.find("div.featitem.active img").fadeTo("fast", 0.7);
$slider_control.find("div.featitem.active").removeClass('active');
this_element.addClass('active');
$slider_control.find("div.featitem.active img").fadeTo("fast", 1);
ordernum = this_element.find("span.order").html();
jQuery('#s1').cycle(ordernum - 1);
}
$featured_item.click(function() {
clearInterval(interval);
gonext(jQuery(this));
return false;
});
var auto_number;
var interval;
$featured_item.bind('autonext', function autonext(){
if (!(pause_scroll)) gonext(jQuery(this));
return false;
});
interval = setInterval(function () {
auto_number = $slider_control.find("div.featitem.active span.order").html();
if (auto_number == $featured_item.length) auto_number = 0;
$featured_item.eq(auto_number).trigger('autonext');
}, 5000);
});
//]]>
</script>
<script type='text/javascript'>
jQuery(function(){
jQuery('#s1').cycle({
timeout: 0,
speed: 1000,
fx: 'fade'
});
});
</script>
Agora salve.
Depois de salvar procure por
]]></b:skin>
Acima dele adicione o seguinte código:
/*-----------------Trio Destaque Slide--------------*/
/* container geral do slide */
#gallery {
width:616px; /* largura do container */
height:320px; /* altura do container */
margin:0 0 20px 0;
float:left;
display:inline;
}
/* area do slide */
#featured-area {
height: 300px; /* altura deve ser um pouco menor que o container geral */
position: relative;
padding: 11px 0px 10px 0px; /* distancia entre coluna maior com a coluna menor */
z-index: 1;
width:616px; /* largura deve ser a mesma que o container geral */
}
/* area da imagem do slide */
#featured-area .pics {
position: absolute;
width: 490px; /* largura da imagem */
height: 294px; /* altura da imagem */
top: 11px;
left: 14px;
}
/* area dos titulos e descrição do slide */
#featured-area .pics div.excerpt {
background: #fff; /* cor de fundo da faixa onde fica titulo e descrição */
bottom:0;
left:0;
padding:0px 0 0 10px;
position:absolute;
width:480px; /* largura da area onde ficam os titulos e descrição do slide */
z-index:2;
opacity:0.8;
filter:alpha(opacity=80);
.width: 100%; /* IE */
}
/* area do texto da descrição */
#featured-area .pics div.excerpt p {
color: #203136; /* cor do texto */
width:450px; /* largura do container do titulo e texto da descrição */
}
/* area do link dos titulos */
#featured-area .pics div.excerpt a {
font-size:18px; /* tamanho da fonte do titulo */
color: #000; /* cor do link do titulo */
font-weight:bold; /* link em negrito */
}
#featured-area .pics div.excerpt a:hover {
color: #ddd; /* cor do link do titulo no estado hover */
text-decoration:none;
}
.excerpt-text {
display:inline;
float:left;
font-size:10px; /* fonte do texto da descrição */
width:450px; /* largura do container do texto da descrição */
padding:0px 0 10px 0;
}
#featured-area .pics span.feat-overlay {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 490px; /* deve ter a mesma largura da imagem do slide */
height:294px; /* deve ter a mesma altura da imagem do slide */
z-index: 1;
}
/* container geral onde ficam as miniaturas */
#featured-area div#slider-control {
position: absolute;
width: 110px; /* largura */
height: 296px; /* altura */
border: 1px solid #b4b4b4;
z-index: 4;
top: 11px;
right: 1px;
}
/* area de cada bloco de miniatura */
#featured-area div#slider-control div.featitem {
background: url(http://3.bp.blogspot.com/_JUg9QsmKp5s/TMjMPRS6OEI/AAAAAAAAAHA/0jaTOH8SmLA/s000/featitem-bg.png) no-repeat top left; /* imagem de fundo de cada item da coluna */
height: 77px; /* altura */
float: left;
width: 76px; /* largura */
padding: 10px 16px 12px 18px;
cursor: pointer;
}
/* imagem minitura */
#featured-area div#slider-control div.featitem img {
float: left;
margin-right: 18px;
border: 1px solid #f6f6f6; /* edite borda */
margin-top: 5px;
width:67px; /* largura da imagem miniatura */
height:67px; /* altura da imagem miniatura */
}
/* item da minitura ativa */
#featured-area div#slider-control div.featitem.active {
background: url(http://1.bp.blogspot.com/_JUg9QsmKp5s/TMjMPuqc_tI/AAAAAAAAAHE/qTdsztJN5EU/s000/featitem-bg-active.png) no-repeat top left;
margin-left: -20px;
padding-left: 38px;
}
#featured-area div#slider-control div.featitem.active h2 {
display:none;
}
#featured-area div#slider-control div.featitem.active span.meta {
border: 0px;
}
#featured-area div#slider-control div.featitem span.order {
display: none;
}
#featured-area div#slider-control div.featitem span.meta {
display:none;
}
Salve.
Agora procure por
<div id='main-wrapper'>
e, acime dele, adicione o seguinte código:
<div id='gallery'>
<div id='featured-area'>
<div class='pics' id='s1'>
<!-- PRIMEIRO SLIDE INICIO -->
<div>
<img src='URL-DA-IMAGEM-1' style='width: 490px; height: 294px;'/>
<div class='excerpt'>
<p><a href='SEU LINK AQUI'>Titulo do Slide 1</a></p>
<p class='excerpt-text'>Coloque uma pequena descrição do slide 1 aqui.Coloque uma pequena descrição do slide 1 aqui...</p>
</div>
<a href='SEU LINK AQUI'><span class='feat-overlay'/></a>
</div>
<!-- PRIMEIRO SLIDE FIM -->
<!-- SEGUNDO SLIDE INICIO -->
<div>
<img src='URL-DA-IMAGEM-2' style='width: 490px; height: 294px;'/>
<div class='excerpt'>
<p><a href='SEU LINK AQUI'>Titulo do Slide 2</a></p>
<p class='excerpt-text'>Coloque uma pequena descrição do slide 2 aqui. Coloque uma pequena descrição do slide 2 aqui...</p>
</div>
<a href='SEU LINK AQUI'><span class='feat-overlay'/></a>
</div>
<!-- SEGUNDO SLIDE FIM -->
<!-- TERCEIRO SLIDE INICIO -->
<div>
<img src='URL-DA-IMAGEM-3' style='width: 490px; height: 294px;'/>
<div class='excerpt'>
<p><a href='SEU LINK AQUI'>Titulo do Slide 3</a></p>
<p class='excerpt-text'>Coloque uma pequena descrição do slide 3 aqui. Coloque uma pequena descrição do slide3 aqui...</p>
</div>
<a href='SEU LINK AQUI'><span class='feat-overlay'/></a>
</div>
<!-- TERCEIRO SLIDE FIM -->
</div>
<div id='slider-control'>
<!-- IMAGEM MINIATURA 1 -->
<div class='featitem active'>
<img src='URL-DA-IMAGEM-MINIATURA-1' style='width: 67px; height: 67px;'/>
<span class='order'>1</span></div>
<!-- IMAGEM MINIATURA 2 -->
<div class='featitem '>
<img src='URL-DA-IMAGEM-MINIATURA-2' style='width: 67px; height: 67px;'/>
<span class='order'>2</span></div>
<!-- IMAGEM MINIATURA 3 -->
<div class='featitem '>
<img src='URL-DA-IMAGEM-MINIATURA-3' style='width: 67px; height: 67px;'/>
<span class='order'>3</span></div>
</div><!-- end slider-control div -->
<div class='clear'/>
</div><!-- end featured area -->
</div><!-- end gallery -->
Qualquer dúvida ou erro é só deixar um comentário.
