Como adicionar um Widget Gadget Html/Javascript no Blogger

Como colocar Widgets Html/Javascript no Blogger novo modelo

Nos aqui do Kbaus Tutoriais geralmente mostramos tutoriais de como inserir códigos, html, css e Widgets no blogger mostrando sempre o termo “Inserir Gadget de Html/Javascript”.

Exitem muitas pessoas com dúvidas sobre oque isso quer dizer, então criamos este tutorial para ajudar nestes passos que basicamente simples, mas como sempre digo “Ninguém nasce sabendo”.

No modelo antigo, o caminho para adicionar um Widget no Blogger era diferente e você poderá ver abaixo como era feito antigamente.

Qual a diferença entre Gadget e Widget ?

Gadget é a ferramenta nativa do sistema ( no caso Blogger ) para inserção de códigos aceitos pelo mesmo.
Resumindo, Gadget é o campo onde é colocado um Widget ou código html/css/javascritp. para rodar em um determinado sistema.

Widget é um código pronto geralmente utilizado para sites e blogs. O Widget é colocado dentro de um Gadget que por si fará com que o código interno apareça para o leitor.

Um exemplo é quando dizemos “Widget de imagens deslizantes na horizontal” para blogs.
Este Widget será colocado dentro de um Gadget para que funcione

Falando a grosso modo, o Widget vai dentro de um Gadget.

Veja como era na antiga interface do Blogger

Logava-se no Blogger.
Clicava na Guia “Design” e no menu “Adicionar Elementos de Página” depois clicava-se na opção “Adicionar um Gadget” no local escolhido.

Como adicionar um Gadget Html/Javascrip no Blogger ( Modelo Novo )

Ante de mais nada, você terá que logar na conta referente ao seu blog, acessando a página abaixo e entrando com seus dados de login ( Geralmente é a Conta Google ).

Acesse: www.Blogger.Com E entre com seus dados de login.

Tendo efetuado login, será direcionado para o “Painel do Blogger” onde estará listado todos os seus blogs na plataforma com a conta em questão.

Escolha o blog que deseja adicionar o código clicando sobre o nome dele.

Tendo escolhido o blog onde irá adicionar o Gadget, escolha a opção “Layout” localizada no menu lateral esquerdo de seu painel.

Na imagem abaixo, você tem uma visão de como é o seu Layout, e também onde está localizada as opções para “Adicionar um Gadget” em vários locais de seu blog como cabeçalho, Croscol (menu), Barra lateral (sidebar) e outros campos existentes.

Escolha onde quer que o código apareça e clique sobre o link “Adicionar um Gadget”.

Quando clicar em “Adicionar um Gadget” irá se abrir uma janela com várias opções e Wigets prontos disponibilizados pelo próprio Blogger, mas como alguns Wigets são montados separadamente e disponibilizados aqui no Kbaus Tutoriais, então irá escolher a opção “Html/Javascript”.

Ao escolher a opção “HTML/Javascript” se abrirá uma outra janelinha com os campos Título e Conteúdo
Onde no título você irá adicionar ” OPCIONAL ” o nome para seu Widget/Gadget. E em código irá colocar o código que em questão.

Tendo inserido seu código, basta clicar sobre o botão “Salvar” e depois ver como ficou seu Widget em seu blog.

Inserindo seu primeiro código html no Blogger !

Aproveite e adicione um banner com um link para o kbaus tutoriais usando um Gadget de Html/Javascript !

Copie o todo o código em verde abaixo e cole em um Gadget Html/Javascript:

<div style=”text-align: center;”><a href=”https://www.kbaus.com” target=”_blank”><img title=”Dicas e Tutoriais kbaus.COM” alt=”Dicas e Tutoriais Kbaus.COM” width=”120” height=”60” border=”0″ src=”http://2.bp.blogspot.com/-0QTwxm7_wao/T0gIE7IPNGI/AAAAAAAAAmM/OM6hWpyI8IM/s1600/banner-120×60.png” /></a></div>

Você pode alterar o tamanho da imagem modificando os números destacados em vermelho, Width e Heigth.

O título deste Gadget pode ser “Parceiros” Como ficará em seu blog !

Espero que tenham gostado !
Abraço !