Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Acessórios Vanessa S.

Trio Slide – Mini Galeria em Destaque

Hoje veremos um modelo de slide, que, apesar de simples ele tem um efeito bem legal.
Eu digo “simples” porque este modelo de slide não comporta a inclusão de muitas imagens. Ele serve para dar destaques apenas a algumas postagens.

[becape]Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir com qualquer instalação para evitar transtornos, caso algo saia errado.[/becape]

1º passo – Baixar, hospedar e Instalar o arquivo Javascript

Faça download deste arquivo
Hospede o arquivo em seu próprio site de hospedagem.
– Veja relação com opções de Sites para hospedagem de arquivos.
(Eu recomendo o webs.com )

Agora vá “Editar HTML” e procure pela tag </head>
E cole logo ACIMA dela o código a seguir, acrescentando a URL do seu arquivo js já hospedado:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='url do arquivo-jquery_cyrcle_plugin' 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(&#39;#s1&#39;).cycle({
timeout: 0,
speed: 1000,
fx: &#39;fade&#39;
});

});
</script>{

Salve as modificações!

2º passo – Aplicar estilos ao Slide

Agora volte em “modelo >> Editar HTML” e procure pela tag
]]></b:skin>
e cole ANTES dela:

/*--------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;
}

Este slide foi projetado com uma largura de 616px e 320px de altura e comporta apenas 3 imagens para destaque.
Eu recomendo que você não faça alterações nestas medidas, a menos que você tenha um máximo conhecimento em CSS, porque se você modifica-las terá que editar completamente o código todo.
De qualquer forma, para ajudar na edição e personalização do slide, eu destaquei no código CSS o que cada trecho representa, basta prestar bastante atenção aos comentários destacados no código.
As imagens do slide possuem um tamanho máximo de 490×294. Escolha ou crie imagens neste tamanho.
Caso opte por modificar o tamanho das imagens, lembre-se que você mesmo(a) deverá editar o código todo, ok?

3º passo – Adicionar o código html do slide

Agora você deve escolher onde quer posicionar o slide.
Eu recomendo instalar o slide acima da coluna de postagem. Preste bastante atenção neste item, pois o trecho que você deverá localizar depende do modelo de template que você está usando.
Vou informar as tags referentes aos template Designer de Modelo e templates minimas, que são padrões do blogger.

1. Designer de Modelo – Se estiver usando um template Designer de Modelo:
Volte na aba “modelo >> Editar HTML” , não precisa marcar a caixinha “expandir modelo de widget”.
Localize a tag:

<div class='main-outer'>

2. Template Minima – Se estiver usando uns dos modelos de template minima:
Volte na aba “modelo >> Editar HTML” , não precisa marcar a caixinha “expandir modelo de widget”.
Localize a tag:

<div id='main-wrapper'>

Após localizar uma das tags acima (dependendo do modelo que você estiver usando)
logo ACIMA dela cole 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 -->

Informações adicionais:
Caso você utilize um modelo diferente/modificado, e no seu html não existir nenhuma destas tags informadas acima, lamento, mas, só posso sugerir que você teste sozinho(a) o melhor local para instalar o seu slide.
E lembre-se: conforme eu citei no inicio, este slide está projetado para apresentar apenas 3 imagens em destaque, caso você queira incluir mais itens, deverá editar você mesmo(a) o código todo, tanto no CSS, quanto no código html. No CSS deverá alterar a altura e no html deverá incluir mais códigos referentes a imagem maior do slide e a imagem miniatura. Se optar por editar, faça somente se você tiver um maior conhecimento em códigos html e css. Boa sorte!

[alerta]ATENÇÃO:
O slide funciona a base de arquivo javascript da biblioteca JQuery e sua funcionalidade pode variar de acordo com o template. Templates que possuem muitos scripts, acabam gerando “conflitos” entre si. Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários. Para melhor entendimento, leia este artigo: Por que alguns scripts não funcionam no meu blog.[/alerta]

Caso queira aprender como ocultar ou exibir este slide que você instalou, em determinadas páginas, leia o artigo:
Ocultar Elementos em Página Específica

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

20 Comentários

  1. marcela disse:

    Amei ! mas teve um problema as imagens ficam em cima dos posts o que faço?

  2. Kelly Costa disse:

    Olá! O slide funcionou perfeitamente no meu blog de testes, porém no meu blog não funcionou. Na verdade, nenhum slide tá funcionando no meu blog estou desesperada D: Fico pensando, isso tem relação há minha recente mudança de endereço, para um domínio personalizado?

    • Vanessa disse:

      POde ser que sim Kelly. Se seus arquivos estiverem hospedados no google sites, eles deixam de funcionar em domínios próprio.

  3. Márlon disse:

    Olá! Primeiramente parabéns pelo blog, está sendo de grande ajuda para min.
    Gostaria de saber como faço para tirar o sublinhado do titulo da descrição , e também como faço para diminuir o espaçamento do titulo da descrição para o texto da descrição, de forma que eles fiquem mais próximas.

  4. Jhonnatan disse:

    Olá, no meu caso não deu certo, as imagens ficaram fora do slide.

    • Vanessa disse:

      Como vc pode verificar, isso não aconteceu no blog de testes que eu usei para aplicar este recurso (veja blog Demo). Porém, alguns recursos podem variar de template para template.
      Sendo assim, lamento, mas não tenho como te ajudar, de qualquer forma agradeço pelo comentário.

  5. .:: Nessa ::. disse:

    Mahomies:
    Não precisa não, inclusive no post tem link do artigo que tem uma lista de sites de hospedagem gratuitas.

  6. Mahomies disse:

    Gostaria de saber se para por isso tem que ter hospedagem ? Obrigada:)

  7. Tip Cullen disse:

    Olá Clau adoro seu site e estou sempre por aqui buscando novas ideias ^^

    coloquei esse banner no meu site e funcionou, mas não consigo colocar as imagens elas não aparecem.

  8. Blog de Testes disse:

    Olá boa tarde, o efeito é muito bom, porém em meu blog não deu certo, testei até no mesmo Designer de Modelo, o demo que esta logo acima.
    No meu só da a mensagem:
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The reference to entity "d" must end with the ';' delimiter.

    Bruno Soares

  9. uerles disse:

    nossa que de mas clau vc deixa passo a passo nao tem nem como errar de parabens pelo site vou seguir grande abraço

  10. PONTO GOSPEL PB disse:

    procurei por muitos dias esse tutorial sobre trio de slides na internet e só achei aqui ! é muito interessante mesmo quem sabe você poderia colocar para download esse tutorial. obridado! um abraço!

  11. Elizeu Barbosa Abreu disse:

    Gostei muito. Eu crio esse mesmo efeito em flash usando o 3dfa(só é possível na versão pró). Para quem não sabe nem um pouquinho de action script, este tutorial é um tiro na mosca. O efeito é surpreendente, além de não ter incompatibilidade em navegadores como o swf que exisge plugins da adobe. Clau, você é 10 mesmo.

  12. Bombastic Girl disse:

    mt legal o post, tentei fazer no meu blog mais ficou tudo espalhado, ñ ficou como no seu demostrativo as imagens ficaram embaixo da outra, oq fiz de errado?

  13. Jhlury disse:

    muito legal esse slide.vo tá trocando o meu por esse.parabéns pelo blog muito bom mesmo.

  14. Manuel disse:

    Não há forma de pôr isso eu centro?

  15. Flor do Ebano disse:

    Ola, gostaria de saber como faço para diminuir o slide pois estou usando um tamplete de vcs o Template Crypt Angels e quero colocar esse slide que eu amei. se puder me ajudar agradeço quero colocar em cima.
    beijos fã do blog de montão

  16. Dyogo Phoenix disse:

    Meus parabéns, tava precisando aprender isso ! =D

    Parabéns pelo blog ele é muito bom ! 😀

  17. .:: Clau ::. disse:

    Mel
    Que bom que gostou! Obrigada pelo comentário 😉

  18. ?? Mel ? mendes? ? ? disse:

    Nossa, testei e ficou lindo…Clau,você é genial,sabia?
    Beijo
    Mel

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.