Elegante Gadget de Slide de Vídeos para blog

2 comentários
gadget com videos do youtube

Gadget de slide de vídeos para inserir no blog

Neste artigo, iremos divulgar um Gadget do Wordpress adaptado pelo BG para o Blogger.

É muito comum blogueiros procurarem por slides que possam inserir vídeos, e como o Blogger não dá suporte a linguagens PHP, ajax e outras, é preciso que se façam adaptações em jquery e javascript, para que se possa ter a mesma funcionalidade de linguagens mais complexas.

O slide de vídeos é um Gadget composto por CSS, javascript e HTML. Esta adaptação foi feita para facilitar a vida do blogueiro que utiliza o Blogger como padrão para seu trabalho. Tendo em vista que muitos destes blogueiros possuem contas no Vimeo ou no YouTube, utilizam seus canais para gerar mais tráfego, e passam seus tutoriais, artigos e postagens escritas junto ao vídeo.

A opção de se ter um slide como uma playlist para facilitar a navegação entre os vídeos, é essencial para ajudar o blog a crescer perante os seus usuários. É claro que um layout moderno e dinâmico agrada os olhos dos leitores, porém, muitos destes layouts são compostos por vários conjuntos de jquery e javascript, o que retarda o carregamento da página e faz com que itens dentro do código fonte entrem em conflito.

O slide a seguir foi elaborado como um Gadget, com pouco javascript, pouco CSS, pouco HTML, e muito elegante, por sinal, com transição de imagens antes da exibição dos vídeos.

Nós, do BG, fizemos vários testes com este Gadget em vários templates (temas). Alguns modelos padrão do Blogger e outros, personalizados. Em nenhum de nossos testes, o Gadget apresentou conflitos com os scripts aplicados.

Tutorial

Para começarmos, selecione as URL's dos vídeos que você quer divulgar, e selecione, também, uma imagem para cada vídeo que você irá inserir no slide. Aconselhamos colocar todas as URL's dos vídeos e as URL's das imagens no Bloco de Notas.

Comece editando as imagens de cada vídeo para as dimensões que serão inseridas nos slides. Use algum editor de imagens ou busque por imagens com as seguintes dimensões: 700 px de largura por 300 px de altura. Estas são as dimensões em que os vídeos serão exibidos, e suas respectivas imagens de chamada (que irão aparecer na frente do vídeo - miniaturas)

Configurando o Gadget para slide de vídeos

Para configurar o Gadget antes de inserir no blog, é aconselhável que você use o Notepad++


Caso não tenha este programa, utilize o Bloco de Notas.

Primeiro, copie o código abaixo:

<link href="http://www.menucool.com/slider/jsImgSlider/themes/6/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="http://www.menucool.com/slider/jsImgSlider/themes/6/mcVideoPlugin.js" type="text/javascript"></script>
<script src="http://www.menucool.com/slider/jsImgSlider/themes/6/js-image-slider.js" type="text/javascript"></script>

<div id="slider">
<img border="0" src="IMAGEM DE APRESENTAÇÃO DO SLIDE" height="306" width="700" alt="TEXTO DA PRIMEIRA IMAGEM" />
<a class="video" href="URL DO VÍDEO">
<b data-src="
IMAGEM DO VÍDEO">slider 2</b>
</a>
<a class="video" href="URL DO VÍDEO">
<b data-src="IMAGEM DO VÍDEO">slider 2</b>
</a>
<a class="video" href="URL DO VÍDEO">
<b data-src="IMAGEM DO VÍDEO">slider 2</b>
</a>

<a class="video" href="URL DO VÍDEO">
<b data-src="IMAGEM DO VÍDEO">slider 2</b>
</a>
</div> 

Agora, cole no Bloco de Notas ou no Notepad++ e altere somente a parte destacada em preto. Para acrescentar mais slides, basta inserir o conjunto de códigos abaixo:

<a class="video" href="URL DO VÍDEO">
<b data-src="IMAGEM DO VÍDEO">slider 2</b>
</a>

Antes de:

</div>
</div>

Inserindo o slide no blog

Após realizada a edição com suas respectivas URL's de vídeos e imagens no código descrito acima, vá até o painel do seu Blogger, selecione a aba layout no menu e, em seguida, escolha a área onde você deseja instalar seu Gadget. Clique em Adicionar Gadget, escolha a opção HTML/Javascript e adicione o código que está em seu editor, dentro da caixa de texto.

Suporte a formatos de vídeo

Este slide de vídeos dá suporte a Flash, Java, Vimeo, YouTube, Google Vídeos, e os scripts utilizados facilitam a interação do Gadget com o código fonte do template.

Este Gadget é uma adaptação do Wordpress feita pelo BG para o Blogger, e não existe em nenhum outro local na web.

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

2 comentários :

  1. gostei muito... só queria saber como diminuir a largura do slide

    ResponderExcluir
  2. é possível colocar um video com ima imagem por cima?

    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.