Trio Slide - Mini Galeria em Destaque
Autor: Ely Designer | Publicado: 2011-03-24T06:35:00-07:00

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.


Veja DEMO nos links abaixo:
Demo - Designer de Modelo
Demo - Template Minima
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.

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á na aba "Design" &gt;&gt; "Editar HTML" e procure pela tag &lt;/head&gt;
E cole logo ACIMA dela o código a seguir, acrescentando a URL do seu arquivo js já hospedado:

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/&gt;
&lt;script src='url do arquivo-jquery_cyrcle_plugin' type='text/javascript'/&gt;

&lt;script type='text/javascript'&gt;
//&lt;![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 &gt; 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);

 });
//]]&gt; 
&lt;/script&gt;


&lt;script type='text/javascript'&gt;
jQuery(function(){
 jQuery(&amp;#39;#s1&amp;#39;).cycle({
  timeout: 0,
  speed: 1000,
  fx: &amp;#39;fade&amp;#39;
 });

});
&lt;/script&gt;
Salve as modificações!

2º passo - Aplicar estilos ao Slide
Agora volte em "Design &gt;&gt; Editar HTML" e procure pela tag  ]]&gt;&lt;/b:skin&gt;
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 490x294. 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 "Design &gt;&gt; Editar HTML" , não precisa marcar a caixinha "expandir modelo de widget".
Localize a tag:

&lt;div class='main-outer'&gt;

2. Template Minima - Se estiver usando uns dos modelos de template minima:
Volte na aba "Design &gt;&gt; Editar HTML" , não precisa marcar a caixinha "expandir modelo de widget".
Localize a tag:

&lt;div id='main-wrapper'&gt;

Após localizar uma das tags acima (dependendo do modelo que você estiver usando)
logo ACIMA dela cole o seguinte código:

&lt;div id='gallery'&gt;

&lt;div id='featured-area'&gt;
&lt;div class='pics' id='s1'&gt;

&lt;!-- PRIMEIRO SLIDE INICIO --&gt;
&lt;div&gt;
&lt;img src='URL-DA-IMAGEM-1' style='width: 490px; height: 294px;'/&gt;
&lt;div class='excerpt'&gt;
&lt;p&gt;&lt;a href='SEU LINK AQUI'&gt;Titulo do Slide 1&lt;/a&gt;&lt;/p&gt;
&lt;p class='excerpt-text'&gt;Coloque uma pequena descrição do slide 1 aqui.Coloque uma pequena descrição do slide 1 aqui...&lt;/p&gt;
&lt;/div&gt;
&lt;a href='SEU LINK AQUI'&gt;&lt;span class='feat-overlay'/&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- PRIMEIRO SLIDE FIM --&gt;

&lt;!-- SEGUNDO SLIDE INICIO --&gt;
&lt;div&gt;
&lt;img src='URL-DA-IMAGEM-2' style='width: 490px; height: 294px;'/&gt;
&lt;div class='excerpt'&gt;
&lt;p&gt;&lt;a href='SEU LINK AQUI'&gt;Titulo do Slide 2&lt;/a&gt;&lt;/p&gt;
&lt;p class='excerpt-text'&gt;Coloque uma pequena descrição do slide 2 aqui. Coloque uma pequena descrição do slide 2 aqui...&lt;/p&gt;
&lt;/div&gt;
&lt;a href='SEU LINK AQUI'&gt;&lt;span class='feat-overlay'/&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- SEGUNDO SLIDE FIM --&gt;


&lt;!-- TERCEIRO SLIDE INICIO --&gt;
&lt;div&gt;
&lt;img src='URL-DA-IMAGEM-3' style='width: 490px; height: 294px;'/&gt;
&lt;div class='excerpt'&gt;
&lt;p&gt;&lt;a href='SEU LINK AQUI'&gt;Titulo do Slide 3&lt;/a&gt;&lt;/p&gt;
&lt;p class='excerpt-text'&gt;Coloque uma pequena descrição do slide 3 aqui. Coloque uma pequena descrição do slide3  aqui...&lt;/p&gt;
&lt;/div&gt;
&lt;a href='SEU LINK AQUI'&gt;&lt;span class='feat-overlay'/&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- TERCEIRO SLIDE FIM --&gt;

&lt;/div&gt;

&lt;div id='slider-control'&gt;

&lt;!-- IMAGEM MINIATURA 1 --&gt;
&lt;div class='featitem active'&gt;
&lt;img src='URL-DA-IMAGEM-MINIATURA-1' style='width: 67px; height: 67px;'/&gt;
&lt;span class='order'&gt;1&lt;/span&gt;&lt;/div&gt;

&lt;!-- IMAGEM MINIATURA 2 --&gt;
&lt;div class='featitem '&gt;
&lt;img src='URL-DA-IMAGEM-MINIATURA-2' style='width: 67px; height: 67px;'/&gt;
&lt;span class='order'&gt;2&lt;/span&gt;&lt;/div&gt;

&lt;!-- IMAGEM MINIATURA 3 --&gt;
&lt;div class='featitem '&gt;
&lt;img src='URL-DA-IMAGEM-MINIATURA-3' style='width: 67px; height: 67px;'/&gt;
&lt;span class='order'&gt;3&lt;/span&gt;&lt;/div&gt;


&lt;/div&gt;&lt;!-- end slider-control div --&gt;
&lt;div class='clear'/&gt;
&lt;/div&gt;&lt;!-- end featured area --&gt;
&lt;/div&gt;&lt;!-- end gallery --&gt;


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!