Arquivos do Website:

Gadget barra de vídeo do Blogger personalizado com CSS


O gadget do Blogger denominado barra de vídeo, é muito útil para exibir vídeos recentes de um determinado canal do YouTube ou para exibir vídeos aleatórios, oriundos de palavras-chave. O grande problema é que esse gadget, está muito estreito, e ainda exibe o logotipo do YouTube. Felizmente, podemos personalizar esse gadget utilizando CSS!


Imagem: http://pixabay.com/pt/filme-pel%C3%ADcula-fotogr%C3%A1fica-voc%C3%AA-589491/

O gadget barra de vídeo padrão do Blogger exibe apenas 4 vídeos, não é possível exibir mais ou menos vídeos! As explicações neste artigo mostram apenas como aumentar a largura e altura do gadget e, como ocultar o logotipo do YouTube.

 
Antes.

 
Depois - Personalizado com CSS.

Primeiro você deve adicionar este CSS que está logo abaixo, direto no código fonte do seu blog, logo acima de "]]></b:skin>".

a)Faça login no painel de controle do Blogger.
b)Escolha a opção "Modelo" ==> "Editar HTML".
c)Procure por "]]></b:skin>" e, cole  logo acima, este CSS:

.videoBar-container {float: left !important;}

div.resultDiv_gsvb {background: #555 !important; height: 120px !important; width: 300px !important;}

div.resultDiv_gsvb img {width: 300px !important; height: 120px !important;}

.gsc-branding-img-noclear, .gsc-branding-text {display: none !important;}


d)Depois, clique em "Salvar modelo".

Partes importantes para editar no CSS:

.videoBar-container - Controla o alinhamento do gadget.
div.resultDiv_gsvb - Controla a cor do plano de fundo, altura e largura de todas as "caixas gadget".
div.resultDiv_gsvb img - Controla a largura e altura das imagens dos vídeos que aparecem no gadget.

Ok, agora basta você adicionar no seu blog o gadget barra de vídeo (caso ainda não tenha feito isso).

a)Acesse o painel de controle do Blogger.
b)Escolha a opção "Layout" ==> "Adicionar um Gadget".
c)Escolha a opção "Barra de vídeo" - faça os ajustes necessários e, clique em "Salvar".

Acesse a página do seu blog, e veja se está tudo certo! O gadget está funcionando perfeitamente em navegadores modernos.