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
<head>, 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.
Comentários: 15
Excelente tutorial. Não aconselho a quem não tem conhecimentos básicos de html.
Parabéns pelo lay out e design do blogue. Está lindo!
Abraço de Lisboa
OOlá !
bom, so para fazer um update...
Sabe o widget de posts recentes ?
ele n usa imagens e talz ??
eu to com preguiça de mecher nele mas so para voce ter uma ideia e ser a 1° a faze-lo (eu acho)
Voce poderia colocar os feeds dos comentarios \o/
para que ?
Comentarios recentes com a foto do author .
Talvez fosse util... talvez não , de qualquer forma so uma ideia para ti .
Inté !
Oie,
Tudo joia?!
Conheci seu blog hj, tentando solucionar o problema do meu que já foi resolvido...
Mas tenho outro problema!
Eu e minha amiga somos autoras do mesmo blog e, no perfil, so aparece nossos nomes. Tem como aparecer nossas fotos?!
Outra coisa, queria destacar abas para os conteudos, isso é possivel?! Vi no blog http://deliciamakeup.blogspot.com/
A proposito, meu blog é o guiademenina.blogspot.com!
Heeeeeeelp!
Obrigada pela atenção!
bjaaao
Oi Ramiro Obrigada e um grande abraço!
Gama: Deve ser simples. Já vi em alguns blogs e pensei em fazer, sim. Só não me sobrou tempo :(
Oi Jéssica! Bem vinda! Nunca analisei o widget de perfil para checar se é possível fazer o que você deseja. Posso tentar, mas como você vê pela resposta que dei ao Gama, meu tempo é meio apertado.
Quanto às abas, eu sugiro que você utilize o Blogger Draft e coloque páginas estáticas. É uma maneira de colocar um menu. Ou então, procure tutoriais para construir um menu para seu blog - procure no Google com as palavras menu horizontal Blogger - você deve encontrar várias dicas.
Abração!
Muuuito obrigada pela atenção e pelas dicas!
Vou procurar no Google sim! Ele ainda vai salvar o mundo! hauahua
bjuu
Rô,
Boa tarde. Enviei uma mensagem para você através do formulário. Preciso novamente da sua ajuda para mudanças no meu blog.
Espero sua resposta.
Obrigado.
Parabéns pelo blog Rô, já aprendi aqui bastante, fico à espera pelos próximos capítulos do slides já que gostaria de criar um no header do meu blog.
Sérgio Paula
Obrigado
Rô do céu!!! Vou aguardar ansiosamente a "troca em miúdos" porque não consegui desenvolver a idéia... obrigada e beijos!
nvm vbn,
Rô,
Quando será o próximo post?
Mateus
você pode me ajudar??? eu estou usando o template zelia... mas não consigo fazer aparecer nenhum slide... não entendi se devo adicionar o código de slide ou se ele já está no template e não entendo como faço para colocar as fotos com legendas... isso tem algo relacionado a eu postar fotos? como faço para aparecer o slide? muito obrigada... o seu site foi o que encontrei os templates mais lindos... tanto que estou usando no meu blog que aindo estou construindo.. muito obrigada se puder responder aqui mesmo como comentário... felicidades!!! eu uso internet explorer meu blog é blogger
Boa noite
Eu tentei colocar o s3slider no meu blog ( www.miniweddings.blogspot.com), mas não está funcionando. Queria colocar acima da área de posts. Faço tudo como manda esse tutorial: http://novonarede.com.br/blog/index.php/2010/02/slide-show-como-criar-uma-galeria-de-imagens-com-ttulo-clicvel-e-descrio/
Mas na hora que salvo só aparece o espaço vazio...
Como é que eu faço isso???
To ficando arrasada!!! rs
Oii infelismente pra min naum abre os script.
pleaseee help-me
meu email é : mariabruna_@hotmail.com
preciso que me ajude no scripts que naum abrem
ia fazer um comentario, mas vi que a autora nao interage com os comentarios desisto.
Postar um comentário
Para deixar o link da sua última postagem coloque este código:
<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu-link-do-último-post">Título do Post</a></em>
Quando você estiver testando algum hack e tiver dúvidas sobre ele, informe:
1 - O endereço do blog onde você está testando (ou instalando o hack);
2 - O navegador que você está usando (Firefox, Opera, IExplorer, etc).
Leia sobre a política de Comentários!
Eu gosto de conhecer meus leitores! Se você usar OpenId ou perfil fechado, assine o comentário com seu nome e me deixará muito contente!
Bem-vindos e obrigada pela visita!
Observação: somente um membro deste blog pode postar um comentário.
Feed dos ComentáriosBlog This!