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.
Link de Demonstração:
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 - Colocar o Efeito Jquary Cyrcle Plugin no template!!!
Agora vá na aba "Design" >> "Editar HTML" e procure pela tag </head>
E cole logo ACIMA dela o código a seguir:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/52284861/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>
Salve as modificações!
2º passo - Aplicar estilos ao Slide
Agora volte em "Design" >> "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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6vPo8LAPcUuO29liu0QN4E3a_H2xPwthxnJbvPD2M1JYCxDCdU5hqCLQKt6O1AOsaGyevdCqGqyQFJwr-tygjT2ik35lTQKqugvAtNy6Z_tGl0URw08q6Db0Fk7bXW5HskgzWDVslwd4/s0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6qQFI7_wBw7v1gvArJxJ50b8fOfhax1fvbKeyDg-QStcesyeNEZnlVHUI9zgrLVjfICEHj7CeP3l4dXdQmGMlBXRYnJX0MkO-0tFDXvEghoP7UFQFWGbCxHz4aq795ezgnXplEiQ4js/s0/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" >> "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 "Design" >> "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!
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.
