Slide Zinmag Primus

Continuando sobre os slides com posts recentes, agora vou mostrar como colocar o widget de posts recentes no slide do Tema Zinmag Primus do Wordpress. O Alvaris converteu esse template para o Blogger e você pode fazer o download no Falcon Hive.

OBSERVAÇÃO IMPORTANTE: Este é um tutorial para usuários avançados. Não recomendo para usuários iniciantes ou que tenham pouco conhecimento de CSS e JavaScript.



Fiz uma adaptação desse slide, já com o widget de posts recentes e você pode ver como funciona no DEMO:


Este slide é bem mais trabalhoso que o anterior porque, dependendo das cores e largura de seu template, você precisará mexer muito nas medidas e na imagem de fundo. Para quem conhece CSS e tem jeito para trabalhar com imagens, não tem tanto mistério.

No arquivo zipado que está no link abaixo você vai encontrar:
1) O código do script do slide já adaptado - arquivo: script-slide;
2) O código do widget de posts recentes já adaptado para esse slide - arquivo: script-widget-slide;
3) Um arquivo de imagem em png do fundo do slide em verde (você pode alterar a imagem) - arquivo: slide-bg-desenho;
4) Um arquivo de imagem em png do fundo do slide em preto (você pode alterar a imagem) - arquivo: slide-bg-desenho2;
5) Um arquivo de imagem em gif do fundo em pink igual ao DEMO - arquivo: slide-bg-pink;
6) Um arquivo de imagem em pink do botão "leia mais" igual ao DEMO - arquivo: botao-leiamais-rosa;
7) Um arquivo de imagem em png do botão "leia mais" em verde para você alterar - arquivo: botao-mais-desenho.



Faça o download, extraia os arquivos e vamos começar as instruções.

Estilos - CSS

Os estilos a seguir estão configurados para um slide igual ao do DEMO, tanto nas medidas da página como da imagem de fundo. O slide foi colocado no "crosscol-wrapper" do template. Se você for mudar essas medidas ou o local onde instalar, terá que revisar a CSS. Em cada valor eu coloco a explicação:

/*   Slide   */
#crosscol-wrapper { /* coluna onde você colocará o slide */
padding:12px; 
position:relative;}

/* importante manter a position:relative */

#slide-wrapper { /* container do slide - não alterar */
width:100%;}

#slide-wrapper a:link,
#slide-wrapper a:visited,
#slide-wrapper a:hover{ /* links - não alterar */
outline:none;
text-decoration:none;}

#slider { /* altere a imagem de fundo e as medidas conforme seu template */
background:url(http://lh5.ggpht.com/_j4fpzU2AasM/SiWP-fpKYEI/AAAAAAAAAUc/UzVOcnfL-hw/slide15.gif);
clear:both;
height:254px;
margin:20px 0 0 0;
overflow:hidden;
position:relative; 
width:100%;}

#mover { /* seletor da movimentação do slide - não altere */
overflow:hidden;
position:absolute;
width:auto;}

.slide { /* a largura pode ser alterada conforme a coluna onde você colocará o slide e a imagem de fundo */
float:left;
height:200px;
padding:15px 0;
position:relative;
width:960px;}

.slide h3 { /* título do post - altere cor, fonte e medidas conforme seu template */
color:#EF8EA2;
font-size:24px; 
margin:0 0;
overflow:hidden;
padding:10px 0px 0px 10px;
width:300px;}

.summary { /* container do sumário - altere conforme seu template */
font-size:12px;
font-weight:bold;
line-height:20px; 
margin:0 0;
padding:30px 0px 0px 10px;
text-transform:uppercase;
width:300px;}

.slide p{ /* parágrafo do sumário - altere conforme seu template */
color:#D8ABAB;
font-size:12px; 
line-height:20px;
margin:5px 0;
padding:10px 0px 0px 10px;
width:300px;}

/* os ítens abaixo referem-se ao link leia mais - altere conforme seu template, a imagem de fundo e a imagem do botão que colocar */

.leiamais{ 
background: url(http://lh4.ggpht.com/_j4fpzU2AasM/SiWSpX8ZHTI/AAAAAAAAAUg/QTAO2CCoBQ0/btn-compre.png) no-repeat 325px center;
color:#FFFFFF;
font-size:14px; 
line-height:30px;
margin:0 169px 0 0;}

.leiamais a:link, 
.leiamais a:visited,
.leiamais a:hover{ 
color:#FFFFFF;
text-decoration:none;} 

.slide img { /* imagem do slide - as medidas e posicionamento deverão ficar de acordo com a imagem de fundo */
background:#FFE1F7;
position:absolute; 
top:20px; 
left:565px;
padding:10px 10px;}

#slider-stopper { /* texto para parar e reiniciar o slide - medidas e posicionamento devem seguir a imagem de fundo */
color:#EF8EA2;
font-size:14px;
font-family:Georgia, Helvetica, Sans-Serif;
padding:3px 8px;
position:absolute;
top:111px; 
right:38px;
text-transform:uppercase;}

Se você usar alguma das imagens fornecidas no arquivo, não há necessidade de muitas alterações. Se precisar mudar o tamanho da imagem para adaptar à largura de seu template, o trabalho é um pouco mais complicado. Recomendo apenas para quem tem conhecimento de posicionamento em CSS.

Ao modificar o posicionamento na CSS, pode ser necessário alterar algumas medidas no script do slide (explico depois).

Script do Slide

Você precisa ter o JQuery instalado para seu slide funcionar (veja artigo sobre o slide anterior)

Abaixo da chamada do JQuery, copie o arquivo script-slide e cole em seu template (o código já está compactado).

No script existem algumas medidas de posicionamento, que, se você alterar na CSS, precisará também checar no script.

Veja os ítens do código que podem ser customizados:

var delayLength=6000 - velocidade da transição

.animate.... - os posicionamentos em "animate" estão relacionadas a altura do slide, imagem de fundo e container da imagem. Seja cuidadoso ao modificar a imagem de fundo e a CSS, modificando também no script esses posicionamentos.

.append('<a href="#crosscol-wrapper"id="slider-stopper">

No código acima, há um ponto importante. Se o seu slide ficar posicionado perto do topo do seu blog, você pode mudar onde está a href="#crosscol-wrapper" para a href="#".

Caso contrário, você deve colocar o nome da coluna onde está seu slide.

Esse trecho se refere ao botão de parar e reiniciar o slide e ao clicar, ele é direcionado (desliza) para a id determinada no código. Quando o slide está bem perto do topo do blog, não há problema, e você pode deixar a âncora como #. Mas se o slide estiver no footer, por exemplo e você deixar a âncora #, a página irá rolar para cima (será que expliquei direito? :0 )

No DEMO, deixei propositalmente a âncora como # para você verificar o que acontece.

Assim como no slide do post anterior, este também está previsto para aparecer apenas na página inicial. Se quiser o slide em todas as páginas retire a condicional.

Script do Widget

O widget de posts recentes já adaptado para este slide está no arquivo script-widget-slide.

Se não for colocar na coluna do crosscol-wrapper, faça as modificações necessárias. As customizações possíveis são as mesmas mencionadas no S3Slider, porém você deve ser mais cuidadoso nas medidas da imagem, pois estão diretamente relacionadas aos posicionamentos já mencionados anteriormente.

Assim como no slide do post anterior, você pode mudar a url do script para aparecer os posts de uma só categoria, em vez de colocar os posts recentes.