Slide de vídeos no blog - Slideshow com vídeos do Youtube

9 comentários
slideshow com videos

Slideshow de vídeos

Que tal ter seus vídeos do Youtube, Vimeo, seus vídeos do Google, animações em flash.. em slide?

Neste artigo, vamos trazer um plugin de Wordpress que custa $125,00. Mas não se assuste! Iremos mostrar como obter este plugin de vídeos, gratuitamente!


Veja como é simples aplicar e editar!


Todos os arquivos do slide estão hospedados por nós, do BG e, portanto, você poderá ter acesso aos devidos links.

Tutorial

Vá até o painel do seu blog, clique em modelo, e em seguida, editar html. Dê CTRL+F e procure pela tag </head> Acima desta tag, cole o seguinte código:


Após esta etapa, vamos inserir a estrutura HTML, onde você colocará a URL de seu vídeo e a descrição ao lado.

Analise o código abaixo:

<div class='advanced-slider' id='video-slider'>
<ul class='slides'>
<li class='slide'>
<div class='layer static' data-horizontal='6' data-vertical='6'>
<a class='video' href='http://www.youtube.com/watch?v=msIjWthwWwI'>
<img height='400' src='http://bqworks.com/products/advanced-slider/images/v4/videos/cathedral.jpg' width='700'/>
</a>
</div>
<div class='layer static' data-height='408' data-horizontal='720' data-vertical='6' data-width='340'>
<div class='title'>
<p>Cathedral</p>
</div>
<div class='content'>
<p>The film is based on a short story by Jacek Dukaj under the same title. In 2002 &quot;Cathedral&quot; was awarded the main prize at SIGGRAPH festival (&quot;Best Animated Short&quot;). A year later it received an Oscar nomination in the category &quot;Best Animated Short Film&quot;.</p>
<p>SYNOPSIS: Story of a pilgrim who comes to the Cathedral on the border of the known world. He wants to find answers. He finds tranquility.</p>
<p>DIRECTOR: Tomasz Baginski</p>
</div>
</div>

Toda parte destacada em azul, se refere a abertura e fechamento da estrutura do slide. Aconselhamos não mexer na estrutura em azul, pois está definida de maneira correta.
O trecho destacado em vermelho refere-se ao conteúdo do slide. É neste trecho que você irá inserir seu vídeo e descrição.

Veja, abaixo, como editar a parte em vermelho:

<li class='slide'>
<div class='layer static' data-horizontal='6' data-vertical='6'>
<a class='video' href='Url do vídeo do Youtube'>
<img height='400' src='imagem que vai aparecer antes do vídeo começar' width='700'/>
</a>
</div>
<div class='layer static' data-height='408' data-horizontal='720' data-vertical='6' data-width='340'>
<div class='title'>
<p>título da descrição do vídeo</p>
</div>
<div class='content'>
<p>descrição do vídeo.</p>
<p>sinopse do vídeo</p>
<p>quem produziu ou os créditos</p>

Seguindo o esquema acima, altere somente a parte destacada em vermelho. Não é preciso inserir código embed na URL dos vídeos. Basta copiar a URL normal dos vídeos e inserir dentro do código HTML mostrado acima.
A estrutura que foi explicada até aqui dá suporte a um vídeo, apenas, e sua descrição. Para inserir mais vídeos, copie novamente o trecho do exemplo acima, edite como mostramos, e insira antes de:

</ul>
</div>

O conjunto de códigos destacado acima, com o conteúdo em vermelho deve ser inserido abaixo da tag <body> para que fique no topo do blog. Caso você queira posicionar o slide em outra parte do seu template, basta inserir o conjunto HTML em qualquer área abaixo da tag <body>

Gostaríamos de avisar que logo estaremos postando um slide de vídeos para inserir como um Gadget, facilitando a instalação em seu template, e com menos risco de incompatibilidade entre scripts.


Este artigo está disponível para publicação em outros blogs ou sites desde que seja seguida a Política do BG

9 comentários :

  1. Praticamente a melhor postagem do site heim!
    facinho!
    muito show!

    ResponderExcluir
  2. Olá Adm, agradecemos o contato e ficamos felizes em saber que o artigo tenha sido útil paravocê.
    Abraços Andrew Silva do BG

    ResponderExcluir
  3. como coloco imagens nele

    ResponderExcluir
  4. Andrew, cara bacana o slide, porem ficou totalmente desconfigurado em meu blog, Veja: http://2.bp.blogspot.com/-7usxWxBQI3I/U71VGBPvVEI/AAAAAAAASBM/DL8wCw3_IwM/s1600/01%5D.png
    Poderia dizer o que pode ter acontecido, e como arrumo? Obrigado.

    ResponderExcluir
    Respostas
    1. Olá Cleber. O slide de vídeos especificado acima funciona perfeitamente em varios blogs de teste, inclusive o nosso modelo nao apresenta nenhum erro ou conflito de script. O que pode ter acontecido no seu caso é o seguinte: o slide de videos acima necessita de um espaço minimo para não desconfigurar. Das tres, uma: ou o espeço de vc colocou o slide é inferior ao do nosso modelo de exmplo ou vc está usando uma resoluçao inferior a 1024x768 ou vc está usando uma versao antiga de algum navegador que nao dá suporte a determinados tipos de script. Mande um link do blog onde vc alocou o slide para que eu possa fazer um melhor diagnostico.

      Excluir
  5. Isso não dá para blogspost só wordprex?

    ResponderExcluir
    Respostas
    1. Olá Francisca, este slide é justamente uma adaptação do Wordpress para o blogger(blogspot) basta seguir o tutorial passo a passo para inseri-lo em seu blog.

      Excluir
  6. vejam como fico http://www.seuandroid.tk

    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.