Colocar e Organizar Gadgets no Final das Postagens do Blog

Mostrar alguns gadgets no fim dos posts do seu blog pode ajuda-lo a conseguir manter as pessoas mais tempo no seu blog e gerar mais divulgação nas redes sociais entre outras coisas por isso é recomendável mostrar botões de compartilhamento e gadget de assuntos relacionados entre outras coisas.


Usaremos como exemplo nosso próprio blog, mas o código que vamos mostrar para organizar todos esses acessórios no final das postagens serve para qualquer outro tipo de acessório para blogs que você ache mais útil ou que traga mais vantagens para o blog.

Nós usamos divs para criar duas colunas no final das postagens do blog e dentro de cada coluna colocamos acessórios que achamos uteis, veja abaixo os links dos tutoriais com os códigos que usamos:
Enviar Atualizações por Email
Caixinha com o link da postagem
Botões das Redes Sociais para Compartilhar Posts
Opções para Criar e Colocar Anúncios Google Adsense Blogger

Vamos precisa editar o HTML do blog, portanto é recomendável fazer um backup do template antes de começar. Entre na pagina modelo > editar HTML e marque a opção expandir modelo de widgets.

expandir modelo de widgets no html do blogger

Agora procure por <data:post.body/> e depois dele coloque o código:

<div style="float:left; width:270px">coluna da esquerda</div>
<div style="float:right; width:300px">coluna da direita</div>
<div style="clear:both"></div>

Os valores 270 e 300 são as larguras das colunas então você deve alterar como achar melhor. Caso as colunas não fiquem lado a lado é porque não há espaço suficiente para elas então diminua a largura das colunas.

Você também pode usar esse código abaixo do código do LinkWithin para assuntos relacionados assim esses novos gadgets ficarão abaixo dos assuntos relacionados do seu blog.

Usamos no exemplo do código o texto coluna da direita e coluna da esquerda como exemplo e para ficar fácil entender o posicionamento de cada uma delas. Nós sugerimos que insira esse código deste jeito no seu blog apenas para testar e depois comece a colocar em cada coluna os acessórios que desejar.

Em alguns casos na hora de salvar o Blogger pode dar erro então será necessário codificar o HTML para XML então veja aqui como resolver problemas com codificação de HTML. Justamente por isso recomendamos que coloque um código por vez e salve assim em caso de erros ficará mais simples descobrir e corrigir o problema no HTML do blog.

Veja também:
Barra com Botões Curtir, Google +, Retweet e Hack Leia mais
Personalizar o Link ou usar Imagens no Hack Resumo da Postagem (Leia mais)
Fazer Pagina com Atualizações mais Recentes do Blog

Queremos agradecer o comentário feito por Joao Carlos perguntando sobre como organizamos esses botões, caixinha com link e outras coisas no final da postagem. Não mostramos o código completo porque entre outras coisas faz parte dele o anuncio do adsense e, além disso, cada blogueiro deve ter opiniões diferentes sobre quais os melhores gadgets para usar no blog.

18 comentários :

  1. Você pode me ajudar? Eu tenho um blog e sempre que tento colocar um papel de parede nele, fica dando erro interno. Outra coisa é que sempre que eu acesso o menu layout, o layout fica pela metade tipo, só mostra a navbar o cabeçalho e outro gadget. Ai, o resto fica branco e assim não é possivel organizar os gadgets tipo, mover, adcionar e etc... Por favor, me ajude! Grato!

    ResponderExcluir
  2. Fabiano,
    Obrigado por atende meu pedido.
    Abraços,

    ResponderExcluir
  3. Mensagem:
    Decida permanecer feliz e vc e sua alegria formarão um exército invencível contra as dificuldades.
    Bom feriado.
    Bju
    Toninha

    ResponderExcluir
  4. normalmente o erro das imagens de fundo acontecem por causa do endereço errado da imagem

    sobre arrumar o template isso varia muito conforme o modelo por isso é dificil dizer onde é o problema.

    ResponderExcluir
  5. Fabiano, é possível colocar um papel de parede no blog pelo editor html.

    ResponderExcluir
  6. o papel de parede é uma imagem qualquer.... programas que editam html não funcionam bem no blogger porque os códigos tem muitas tags proprias.


    normalmente o código da imagem de fundo é assim:

    background-image: url(endereço da imagem)

    ResponderExcluir
  7. fabiano, vc sabe porque aparece anuncios do adsense no blogspot sem eu solicitar ???

    obrigado!!!

    ResponderExcluir
  8. Bertê se você baixou um template pronto talvez o criador do template colocou o adsense no template para que ele ganhe dinheiro.

    se for esse o caso quem vai ganhar com o adsense é o criador do template e não você.

    essa mesma idéia vale para qualquer outro código que pegou pronto em outros sites....

    ResponderExcluir
  9. Olá Fabiano,
    Queria pedir para você, se você deixa, eu fazer um tutorial para Youtube, de como "Criar e colocar um banner", mas a única coisa que eu vou usar é o seu gerenciador de banner. Posso?

    Obrigado,

    ResponderExcluir
  10. João Carlos o que não pode é copiar textos ou imagens, isso é plagio, mas falar sobre o mesmo assunto não tem problema.

    ResponderExcluir
  11. William Power entre na pagina modelo e clique no botão editar html, então marque a opção expandir modelos de widgets para achar o post.body no html do seu blog.

    ResponderExcluir
  12. Oi Fabiano, eu queria saber se quando eu colocar o url da imagem pra colocar um background no meu blog eu preciso também colocar o url da imagem nos códigos presentes em todo o editor HTML.

    ResponderExcluir
  13. Anonimo isso depende de como está seu html.

    se for um template padrão do blogger pelo trocar a imagem de fundo pela pagina design do modelo sem mexer com os códigos senão precisará editar o html.

    mas precisa procurar onde está o estilo certo para mudar a imagem de fundo, infelimente em templates prontos que você acha para download eles podem usar nomes diferentes para os estilos o que dificulta um pouco.

    mas procure por background-image..... e faça testes

    ResponderExcluir
  14. coloco a imagem no gadgets e quando fecho a pagina ja salva ele nao fica no lugar que arratei.

    ResponderExcluir
  15. é estranho isso... se clicou para salvar depois que arrastar o gadget deveria funcionar...

    tente excluir seu histórico de internet... pode ser erro no carregamento da pagina.

    ResponderExcluir
  16. Oi Fabiano, no meu blog quando as minhas amigas e os outros leitores dele clicam em seguir o blog pelo twitter sempre dá este aviso:

    Desculpe...

    Não foi possível processar a sua solicitação. Tente novamente ou retorne mais tarde.

    Pode me ajudar?? Pq que da isso?

    Obrigada, aguardo resposta!

    ResponderExcluir
  17. verifique os códigos que colocou no seu blog... tente substituir por outros

    ResponderExcluir