Como dividir um gadget em duas ou três colunas - * Blog Elaine Gaspareto *

Como dividir um gadget em duas ou três colunas

em 29/05/2017

Como dividir um gadget em duas ou três colunas

Olá, pessoa linda!
No fast-tutorial de hoje vou te mostrar como dividir o espaço de um gadget de sua coluna lateral, ou acima da área do post, em 2.
Na verdade, dá pra dividir em 3: dois elementos lado a lado e um embaixo.
Vou explicar melhor usando o gráfico abaixo:


Qual a utilidade disso?
Simples!
Você economiza espaço e pode aproveitar melhor áreas onde não dá pra dividir pelo template do blog.
Vamos supor que você queira colocar 2 banners ou quaisquer elementos de página (como imagens, box de curtir, menu de redes sociais...)  diferentes acima ou abaixo da área dos posts de seu blog.
Não tem divisão ali, é "impossível" coloca-los lado a lado.
Mas com esse código simples você consegue.
Vamos trabalhar?

Para começar você já deve ter os códigos dos banners que deseja inserir.
Pode ser banner de parceiros, bloco de anúncios do Adsense, códigos de contadores, etc...
Comece copiando o código necessário a execução do tutorial:


Copiar o código


A seguir acesse a aba Design (ou Layout) de seu blog e clique em Adicionar um gadget. Escolha a opção HTML/JAVASCRIPT.
Cole o código que copiou dentro da janela que expandir.

No espaço de marquei em letras maiúsculas cole o código de cada banner ou elemento de página que desejar exibir.
Note que são 3 subdivisões: esquerda, direita e embaixo.
Colou os códigos? Salve.
Arraste para onde deseja que fique e salve as alterações do Layout.
Sim, só isso.
O trabalho maior é ter prontos os códigos de cada banner que desejar usar.

Para ver esse tutorial em ação acesse Códigos para seu blog, role e página até o final e veja como configurei a divisão abaixo da área dos posts: o box de curtir da fanpage, o banner do meu mídia kit e embaixo um anúncio do Adsense.

Caso queira alterar o posicionamento e deixar o banner maior acima dos dois lado a lado é simples: inverta os códigos e cole o código com o comando "embaixo" acima dos dois que possuem os comandos "direita" e "esquerda".

Dá pra fazer na sidebar também, fica bem legal.
Use a criatividade e deixe seu blog ainda mais personalizado!

*A imagem que ilustra o tutorial é uma cortesia do nosso parceiro Shutterstock.
10 comentários via Blogger
comentários via Facebook

10 comentários:

  1. Oi Elaine, tudo bem? Tenho uma dúvida, eu quero colocar gadgets padrões do blog lado a lado (ex: no seu blog tem o arquivo ao lado do marcador), como faço?

    Alisson Ellian

    ResponderExcluir
    Respostas
    1. Alisson, nesse caso é mais simples ainda. Basta escolher esse formato de layout no Design de Modelo do Blogger, caso use um template nativo. Modelo/Personalizar/Layout
      Se seu template for externo aí não tem jeito... tem que adaptar esse código.
      Precisa converter o código (use o Conversor de códigos que tem na aba Utilitários aqui do meu blog) e colocar direto no código fonte. Mas fica mais complicado por serem gadgets nativos. Precisa achar o código dele dentro de seu template, copiar, colar no meu código, e aí sim colar o meu código já convertido e preenchido no lugar que deseja, dentro do código fonte do template...
      Sim, trabalhoso e requer um certo conhecimento...

      Excluir
  2. Boa noite, Elaine. Gostaria de saber como faço para reativar um blog?? Att, Vitória

    ResponderExcluir
    Respostas
    1. Vitória, se o blog foi excluído é só clicar em Desfazer exclusão (se foi há menos de 90 dias).
      Se parou de postar mas o blog está lá é só voltar a postar.
      Se o blog sumiu do painel não tem mais jeito, é definitivo...

      Excluir
  3. oi Elaine descobri hoje seu blog e já sou fã. obrigada por compartilhar tanta coisa legal, tanta informação boa! estava justamente procurando como atrair mais leitores para meu blog e acabei conhecendo seu blog! adorei! beijos e uma boa semana! :)

    ResponderExcluir
  4. Olá Elaine. Gostaria de saber como faço para colocar uma imagem a direita e duas a esquerda. Tenho um espaço disponível de 940px. Daí queria dividir esse espaço de modo que eu possa colocar três posts na disposição que citei acima. Podes me ajudar?

    Grato.

    ResponderExcluir
    Respostas
    1. Moisés, aí seria outro código. Não sei de cor mas vou procurar nos meus arquivos, se achar eu publico um post ensinando...

      Excluir
  5. Que tutorial legal! Elaine, tem um tutorial para dividir a área de postagem em duas colunas? O Mundo Blogger tem um, mas está desatualizado. Você pode ajudar?
    http://www.mundoblogger.com.br/2011/08/area-dos-posts-dividida-em-colunas.html

    ResponderExcluir
  6. Que tutorial legal! Elaine, você tem um tutorial para dividir a área da postagem em duas colunas? O Mundo Blogger tem um tutorial, mas não funciona mais.
    http://www.mundoblogger.com.br/2011/08/area-dos-posts-dividida-em-colunas.html

    ResponderExcluir
    Respostas
    1. Max e Beleza Sergipana:
      Tem jeito sim, é bem simples.
      Vou publicar o tutorial essa semana ainda. Posto o link do post aqui assim que publicar.

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…



Visualizações

Contando...

Dias online
Postagens
comentários