PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Publicidade:

Encontre no blog...

27/09/2014

Como instalar um Widget no seu Blog -(Blogger)

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas
Escrito em 23/09/2009 e revisado em 31/05/2011 e 27/09/2014 por byALF

Aprenda a inserir um Widget no seu blog (Blogger)

Se você se deparou com um widget bem legal, e gostaria de colocá-lo no seu blog, saiba como fazer agora:

1) Copie o código do Widget a ser inserido

Tomei como exemplo um widget do site Climatempo  (Leia: Widget – Coloque o clima no seu blog).

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

2) Teste o Widget

Recomendamos que você faça sempre um teste antes de inserir o código do widget no seu blog. Sugerimos o aplicativo Squids Editor.

No Squids Editor , cole o código HTML no campo Código Fonte. Clique no botão [Enviar Código] para ver o Resultado. Teste o widget, se funcionar corretamente adicione-o no seu blog como mostraremos a seguir…

Obs.: Para mais informações sobre o Squids Editor leia o artigo: Simulador gratuito para HTML, CSS e JavaScript – visualização em tempo real

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

3) Entre no Painel do Blogger 

Acesse o URL www.blogger.com e faça o login.

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

4) Acesse o blog onde será inserido o widget.

No painel do Blogger, clique no blog que receberá o widget. No nosso exemplo vamos clicar em “Blog de Teste”.

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

No menu lateral do Blogger, selecione [Layout]

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

5) Adicione o Widget

Escolha a parte onde deseja colocar o seu Widget e clique em [Adicionar um Gadget].

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Na janela Adicionar um gadget em [Noções básicas]

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

…role a tela e clique em [HTML/JavaScript]

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Cole o código do Widget que você deseja inserir em [Conteúdo]. Se desejar, acrescente também um [Título] para o seu novo widget. No nosso exemplo utilizei “Previsão do Tempo” como título.

Clique em [Salvar] e pronto,

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

o seu widget já está adicionado…

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

6) Visualize a posição do Gadget no blog

Antes de Salvar o seu blog, clique no botão [Visualizar] para uma prévia de como vai ficar o layout com o novo widget…

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Visualize o blog com o widget posicionado (página visualizar).

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Se você gostou do layout, feche a janela de visualização e clique em [Salvar Organização].

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Caso contrário, feche a janela de visualização e altere a posição do gadget…

6) Alterando a posição do Gadget no layout

Para alterar a posição, clique e segure o mouse sobre o gadget “Previsão do Tempo” e arraste para a nova posição desejada.

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Na imagem abaixo, veja o widget em uma nova posição.

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Obs.: Para editar o título ou conteúdo do widget clique no link [Editar] do gadget correspondente.

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Após feitos todos ajustes, visualize o blog novamente, e se tudo estiver de acordo com as suas expectativas, clique em [Salvar Organização]. 

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Pronto, agora o seu novo widget já está inserido no seu blog…

Clique em [Visualizar blog] para abrir o seu blog e visualizar o seu novo widget…

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Veja abaixo como ficou o nosso exemplo… (Para ver o blog clique em  Blog de Teste).

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Obs.: Para editar ou excluir o widget, clique no ícone que aparece ao lado do widget (anotado em vermelho). Para isto, você deverá estar logado no blogger.com

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Até mais… ( byAlf )

image


Veja também:

  Widget – Coloque o clima no seu blog

  Widget, o que é e para que serve?

 Como inserir Widgets no Wordpress sem a instalação de plugins

Simulador gratuito para HTML, CSS – visualização em tempo real

18 comentários:

marcelo gravaçoes disse...

mim ajudou e muito

, Hugo disse...

Olá,sou meio iniciante no mundo dos Blogs . Fui tentar adicionar um Widget .Mais não consegui porque não aparece essa opção do "Layout" no meu painel .Por favor me ajuda é urgente .Obrrigado :D

Visual Dicas - Cursos e Treinamentos disse...

Olá Hugo,

Realmente foram feitas alterações no blogger ao longo do tempo... Portanto, onde está escrito Layout, leia-se Design...

Obrigado pela informação... Precisarei atualizar este artigo que foi escrito em 2009...

Abraços,

Visual Dicas - Cursos e Treinamentos disse...

O Post foi atualizado com a versão mais recente do blogger.com (maio/2011)...

Cristalina disse...

Ajudou muitíssimo! Obrigada :)

tonpson disse...

deu certissimo!!! e vc podeiria me dizer se há templestes que eu possa continuar usando o desiner do bloger??? se puder pq usar so html é difícil

André disse...

Mim não conjuga verbo, o certo é "me"

Cohen Hilr disse...

Valeu amigo! Me ajudou muito!!!

Abraços!

Pura Emoção! disse...

Gostei muito de sua receptividade! Vou ler, com calma e estudar as suas dicas! Obrigada pelo carinho e atenção! :)

joaodacruzjunior@gmail.com disse...

Parabéns pela sua iniciativa, me ajudou muito. Algo bem simples, mas para que não sabe é difícil e você me ajudou de verdade. Que Deus te abençoes mais e mais, em nome de Jesus Cristo. Amém.

juliana vieira disse...

OI BOA TARDE, O ANUNCIO DE UMA LOJA PARCEIRA DO MEU BLOG SUMIU O QUE POSSO FAZER PARA RESOLVER. ESTA TODO BRANCO VOU DEIXAR O LINK DO MEU BLOG SE PUDER ME AJUDAR AGRADEÇO. http://bolsadeboneca.blogspot.com.br/

Lucas Vinícius disse...

Vlw cara.

Replicates Eco disse...

Uma dica para quem quer relógios com qualidade sem gastar muito lojas no Brasil em SP pronta entrega frete grátis: as melhores replicas de relógios famosos masculino e feminino, com alto padrão de qualidade, replicas italianas premium aaa, relógios automáticos e quartz..mais de 1700 modelos de relógios replicas importados. veja mais em: Replicas de Relogios Famosos 2 - Replicas de Relogios .

Jéh disse...

Estou tentando colocar opção de seguidores do blog, Face e instagran... Ficou só a janela em branco e não da pra seguir. Alguém pode me ajudar??

http://arievilovidalonga.blogspot.com.br/

Lorraine Faria disse...

Brigadão! super ajudou ;)

Gonçalo Costa disse...

Foi uma boa ajuda, assim consegui acrescentar um widget ao meu blog, (arthousetech.blogspot.com)

Max Ribeiro disse...

show

Orlando Fill disse...

ótima dica para meu site...PERFUMES
INFORMATIVO! Loja de Perfumes Importados no Brasil em SP :
Acesse: www.perfumesimportados.eco.br .
Várias marcas de Perfumes Importados Femininos e Perfumes Importados Masculinos.

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More