Slide de Posts Recentes - Introdução

Muitos leitores se interessaram pelo slide de posts recentes. Pizcos ensinou a fazer um estilo em seu artigo Slideshow entradas automatico. Podemos usar diversos scripts de slides, aliados ao widget de posts recentes. Para que você tente adaptar o widget ao slide de seu gosto, vou explicar como faço essas adaptações.


Muitos leitores se interessaram pelo slide de posts recentes. Pizcos ensinou a fazer um estilo em seu artigo Slideshow entradas automatico. Podemos usar diversos scripts de slides, aliados ao widget de posts recentes. Para que você tente adaptar o widget ao slide de seu gosto, vou explicar como faço essas adaptações.


Este tutorial requer um conhecimento avançado de HTML, de CSS, e algum conhecimento de JavaScript. Em próximos artigos, faço um passo a passo para instalar vários tipos de slides para os usuários com menos conhecimento.

Vou usar como exemplo o slide do template Zélia que é o s3Slider.

Em muitos scripts já vem escrito o modo como será a apresentação (neste caso) do widget. Quando o Anhvo criou o script original de posts recentes montou a apresentação do widget em uma tabela.

Em geral, os slides utilizam listas/listas de links e, por isso, modifiquei o script para uma apresentação dessa maneira. Identifiquei os containers necessários de acordo com os containers do slide, a lista de links e os ítens de lista, com ids e classes e acrescentei uma span para os títulos dos posts e um parágrafo p para o sumário dos posts. Retirei ainda códigos desnecessários para esta aplicação.

Veja como ficou o script (HTML + script) depois de modificado e já montado nos respectivos containers - slidepostsrecentes-html.txt

Temos as ids "slide-wrapper" e "postslide" para os containers. A lista de links foi nomeada com a id "postslideContent" e os ítens de lista com a classe "postslideImage".

Essas identificações foram usadas para o script do slide e para colocar os estilos.

Não foram feitas modificações no script do s3Slider, além da mudança da chamada da função (de "s3Slider" para o nosso "postslide"), para não haver risco de conflito se o usuário já tiver instalado o slide original.

O código do script ficou assim: slidepostsrecentes-slide.txt.

Para a instalação, o script do slide fica dentro da tag , e o script do widget de posts recentes fica no body (sidebar, main, header, etc).

No widget usei a tag data:blog.homepageUrl, assim é possível criar templates para terceiros com o slide instalado e o usuário não precisa mexer em nada (a menos que queira mudar as configurações - nr de posts a ser mostrado, start dos posts, quantidade de caracteres do sumário, etc).

O s3Slider permite dezenas de variações de CSS. No Zelia, utilizei uma das CSS padrões do plugin, com pequenas alterações e usando nossas ids e classes: slidepostsrecentes-css.css.

Bem, esta é uma introdução para quem deseja desenvolver outros slides, usando essa mesma técnica. Em resumo: alterar o script do widget de acordo com as ids, classes, span, parágrafos, etc, necessários para adaptar ao slide.

Como disse no início deste artigo, nos próximos posts ensino a instalar vários tipos de slides que já testei.