Sofisticado Slideshow para blog

16 comentários
 

Sofisticado Slideshow

Neste artigo, vamos ensinar a configurar um dos mais completos slides da blogosfera.

O slideshow é um conjunto de animação de textos e imagens com vários Plugins: botão pausar e dar play, arrastar imagem com o mouse, parada instantânea com o cursor do mouse em cima, micro-imagens em baixo..

É uma ótima animação para divulgar publicidade, vender algo ou promover o conteúdo do seu blog!

Apresentação deslizante

O slideshow para blog é um aplicativo sofisticado que tem várias animações com vários recursos de html, css, css3, javascript, jquery e outros, dando uma funcionalidade impressionante ao aplicativo que será instalado como um Gadget ou Widget.

Vamos à lista das animações deste slideshow:

Transição de imagens grandes;
Setas laterais para ir e voltar na navegação das imagens;
Botão pausar e play para transição das imagens;
Círculo rotatório indicando o tempo da transição das imagens;
Textos animados com efeito de transição redimensionável;
Links em imagens e textos;
Mini imagens;
Setas laterais para navegação nas mini imagens;
Texto animado nas mini imagens;
Seletor de blocos abaixo das mini imagens;
Transição de mini imagens.

A estrutura do slide está dividida em links hospedados por nós do BG, e códigos de scripts necessários para dar a funcionalidade e, também, para que funcione em navegadores como Internet Explorer, Opera, Firefox e outros, além do Google Chrome.

Utilizamos um link externo de css já configurado por nós para seu blog, independente do seu template. Usamos três links de scripts já configurados por nós também, uma sequencia de scripts para transição e uma sequencia de html para estruturar o slide.

A sua edição será limitada ao html, conforme descrito no tutorial. Se alterar algo do que foi citado aqui, é por sua própria conta e risco! Ok?

Tutorial


Para começar, é preciso que você siga os passos com calma, mantenha a atenção, e se precisar, releia o tutorial.
Primeiro, abra o bloco de notas ou o notepad++ e copie o código da caixa de auto seleção abaixo:

Imagens e dimensões

Após copiar o código, cole em seu bloco de notas, e vamos começar a deixar o slide com a cara do seu blog.

O slideshow para blog foi projetado para 10 imagens.
É possível aumentar ou diminuir o número de imagens, mas não estaremos trabalhando esta etapa.
Caso queira aumentar ou diminuir o número de imagens, você pode pedir a nossa equipe aqui!

A próxima etapa é saber as dimensões das imagens inseridas no slide. As imagens grandes devem ter uma dimensão de 932 px de largura x 493 px de altura, e as mini-imagens devem ter 140 px de largura x 80 px de altura.

Agora que você sabe as dimensões das imagens, prepare 10 imagens grandes e repita o processo com as dimensões pequenas também. Aconselhamos o uso de editores como photoshop, photoscape ou coreldraw.
Para hospedar as imagens na web não use o Google plus, pois as imagens grandes com mais de 900 px de largura são reduzidas automaticamente, e portanto a url das imagens hospedadas não terá serventia. Ao invés, use o Flickr, Google-sites, Dropbox ou outro servidor. Desta forma, você terá acesso ao link das imagens com o tamanho que você redimensionou.

Instalando imagens no slideshow

Agora que você tem as imagens redimensionadas e hospedadas na web, vamos inserir o link delas no slide.

No bloco de notas, onde você colou o código copiado mais acima, terá uma sequencia de comando html. O que nos interessa no momento é o seguinte:
Procure por:
<img class="image" → link da imagem grande

<img class="thumbnail" → link da mini-imagem

Faça isso com os 10 slideshows existentes no código.

Editando os textos no slideshow

Agora que você inseriu todas as suas imagens com sucesso no slideshow, vamos editar os textos referentes a cada imagem existente.

Para isso, você irá procurar pelo comando <div class=" no código que está em seu bloco de notas.

Abaixo de cada linha deste comando, encontra-se o texto referente a cada animação e imagem existente no slideshow. Altere! Use sua criatividade para usufruir bem deste sofisticado slideshow para blog!
Após a edição do código, copie todo o conteúdo do código existente em seu bloco de notas, vá até o painel do Blogger, selecione o blog em que você irá inserir o slideshow, e no menu lateral esquerdo, selecione a opção layout. Abrirá uma nova tela com a estrutura do seu blog. Selecione onde você deseja inserir o slideshow e clique em adicionar Gadgets. Escolha a opção html/javascript e cole o código editado.
Salve e visualize!

16 comentários :

  1. Olá sou dono do links Top Estou convidando você a ser um de nossos parceiros, temos uma media de 2.500 a 5.000 visualizações diárias, o que esta esperando acesse agora mesmo: http://linkstop.com.br.

    Obs: Nos envie seu link diariamente, para ter mais visitas em seu site ou blog.

    ResponderExcluir
  2. vocês fazem uma coisa tão fácil parecer tão difícil, pesima postagens, ótimo comteudo

    ResponderExcluir
    Respostas
    1. Ola, ADM! agradecemos o contato e a criticica, porem o Blog Gerenciado visa a maioria e não a minoria. Existem muitas pessoas que não fazem a menor ideia do que é html, css e javascript. Pensando nesta minoria é que passamos o tutorial detalhado para ficar mais facil seguir o passo a passo, e que pessoas leigas no assunto, o que não é o seu caso, possam entender e aplicar em seus respectivos Blogs/Sites

      Abraços, Andrew Silva do BG.

      Excluir
  3. ola ANDREW instalei o modelo do slide acima num blog teste e ele funcionou perfeitamente , mas quando passei para o meu blog oficial ele não funciona,neste blog (oficial) eu coloquei um dominio proprio e o que e´estranho que quando eu volto para o dominio blogspot .com .br o slide roda normalmente , ficaria grato se pudesse me ajudar...link do blog http://www.equipeninjagt.com.br/

    ResponderExcluir
    Respostas
    1. Olá NinjaGT, dei uma olhada em seu blog e não vi o modelo de slide do tutorial acima, existe um slide em sua página mas é diferente do descrito aqui e está funcionando normalmente em seu blog.

      Abraços... Andrew Silva do BG

      Excluir
  4. Slideshow lindo, adorei =)

    Coloquei no meu blog, mas ficou um espaço muito grande entre o título da gadget e o slide. Como faço para diminuir o espaço em branco entre eles?

    ResponderExcluir
  5. Vcs podiam disponibilizar um codigo sem os links das suas imagem pq esse eu tenho q ficar apagando os links

    ResponderExcluir
    Respostas
    1. Existem muitos blogueiros que tem pouco conhecimento em programação e com seguem identificar as áreas a ser alterada quando acompanhada com as imagens em execução, por este motivo mantemos as imagens de demostração.

      Excluir
  6. eu posso redimensionar o slide?? tipo não tem as opções de largura e altura ??? e porque meu blog e mais pequeno e não vai caber um slide desse tamanho,

    obs: o unico slide que eu consegui coloca pra fusionar no meu blog,mais e grande demais

    ResponderExcluir
    Respostas
    1. Olá, Nathanael, as dimensões de slide podem ser alteradas dentro do código de CSS do slide. Para este tipo de suporte, é necessário que você entre em contato conosco através da página Serviços do BG. Abraços.

      Excluir
  7. Coloquei no meu blog, mas ficou um espaço muito grande entre o título da gadget e o slide. Como faço para diminuir o espaço em branco entre eles?

    ResponderExcluir
    Respostas
    1. Olá, Pedro. Me diga mais detalhes para que eu possa lhe ajudar.

      Excluir
  8. <img class="image" → link da imagem grande ;Nesse caso como é que faço para inserir o linke da image grande no slide

    <img class="thumbnail" → link da mini-imagem Nesse caso como inserir o link menor no slideshow Muito obrigado

    ResponderExcluir
  9. Boa noite! Estou em fase de criação do meu blog no blogger e estou há uma semana tentando montar as fotos em forma de slideshow e não estava dando certo, inclusive com este modelo de vocês que achei bem interessante. Estava usando o modelo "Visualizações dinâmicas", resolvi voltar para o modelo "Simples" para verificar se o problema estava no modelo e pimba. No modelo "Simples" funciona perfeitamente. Há alguma atualização deste HTML para o modelo "Visualizações dinâmicas"? Obrigado.

    ResponderExcluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.