Post sobre |Dicas blog, Pc

Colocar div para gadget acima da postagem no blogger

Vou mostrar como adicionar uma div acima da postagem do blogger, ela será um local a mais para adicionar gadgets.

É bom estar atento, não é uma área para textos, é mais apropriada para a famosa barra de menu horizontal, um anúncio, até um banner.

Você deve observar se seu modelo ainda não tem essa área(div) no topo, para quem criou um blog do blogger após julho de 2010 provavelmente já tem essa área em seu modelo, isso porque talvez usa um dos novos modelos de template do blogger(também quem mudou para esses novos modelos), a menos que tenha baixado um da web ou escolhido um modelo Layout(2006), de qualquer forma observe a imagem abaixo e veja se seu modelo já possui essa área, acessando o Blogger>Design>Elementos da página, se tiver, não precisa adicionar esse código.
Tente arrastar um gadget para o topo, assim você verá se já existe uma 'entrada' para gadgets naquele local, se você conseguir colocar um gadget no topo, aí não precisará adicionar o código abaixo.

Isso vai permitir mudar rapidamente o que você colocar no topo de seu blog. Geralmente essa área ficará abaixo do logotipo de seu BlogSpot
Veja como fica a sua área de Adicionar Elemento ao blogger:
Adicionar nova area de gadget no layout do blogger
Porque não textos e nem links normais?

É uma questão de SEO, os gadgets ali inseridos vão ficar antes do texto de seu blog, e se você colocar um texto ou link pra outro site, esse irá ter grande valor para os sites de busca, podendo prejudicar seu blog.

Já um menu geralmente vem com uma class="menu" no seu código html e isso informa aos sites de busca do que se trata, e faz ele "entender" que isso é um menu.

Se for usar uma imagem tipo um banner evitem, apenas nesse caso, usar as tags alt e title, isso vale também para um anúncio.

    Pra colocar essa div acima das postagens:

  1. Acessar o blogger.com
  2. Ir em Design
  3. Editar HTML
  4. Fazer uma cópia de segurança no link Baixar modelo Completo

    Prefira praticar em um blog de testes antes

  5. Apenas procure esse código exatamente:

    <div id='content-wrapper'>

    • Tentem usar as teclas de atalho Ctrl  F para Localizar o código e se não encontrar vejam Problema relacionado, abaixo
  6. Abaixo do código acima adicione esse código:<div>
    <b:section class='sidebar' id='novo' preferred='yes'>
    </b:section>
    </div>

    No código acima, você pode trocar class='sidebar' por class='sidebar-not' se fizer isso, a nova Div não terá algumas personalizações que a lateral tem, isso pode resolver possíveis problemas, ou causar outros.
  7. Clique em SALVAR MODELO

    Tá pronto, é só ir em adicionar gadget...

  8. Problema relacionado

    Se seu template não tiver aquela div que coloquei em vermelho, acima, você pode tentar colocar logo acima dessa:
    <div id='crosscol-wrapper'

    Alguns modelos são diferentes e, o resultado pode ficar até melhor se o código que postei for colocado antes dessa linha acima.

    Esse probleminha foi relatado por Lucy sem fronteiras e o modelo dela é do blogger, e muito bonito. Esse topera que avós escreve-lhes andava pensando que os Html do blogger é tudo ingual e só mudavam o Css, poisé vô ter que cavocar mais em código daí...

Só se você tiver problemas
Pode dar algum problema em relação a cor dessa div.
Não copie o código abaixo, ele é só um exemplo pra você entender.
Se caso não fique da cor que você queira, pode "adicionar uma cor" a essa div, o inicio do código dela ficaria assim:
<div style='background:#ffffff;'>Nesse caso uma cor de fundo branca.

35 comentários:

Colocar div para gadget acima da postagem no blogger2009-06-05T07:26:00-03:00
  1. Olá meu querido, vim aqui te perguntar o seguinte:desculpe a ignorância, mas já vasculhei meu blog no html muitas vezes e não encontro este código acima que vc deu. Encontrei somentes estes olha:-'outer-wrapper' - Ou - 'main-wrapper' - algo assim, mas não encontro nem por decreto este acima. Tem alguma outra forma de eu acrescentar isto? seria um destes? Ficaria muito grata se pudesse me ajudar.
    Desde já te agradeço,
    Paz e sucesso,

    Lucy

    Responder
  2. Olha eu aqui novamente srs, cometi um erro no comentário acima e por isto deletei. Mais uma vez, presente para agradecer tua atenção de pronto. Aliás, sempre atento e sempre respondendo aos comentários de seus leitores. Muito obrigada mesmo meu querido, e muito contente em ver tua presença lá em meu blog tb. Eu estou experimentando as dicas em um blog de testes que criei e deu tudo certo. Quero fazer umas alterações no blog, assim tiro algumas coisas da lateral, e coloco na linkbar, assim fica um visual mais leve e limpo. Assim que tiver pronto, te aviso para vc conferir. E claro, que tb vou ter lá uma lista de links, de blogs e sites que mais acesso e recomendo, e esteja certíssimo, que apesar de meu blog não ter nada a ver com tecnologia, com certeza de que terá mui merecidamente, um link aqui para ti. Grata mesmo por tua atenção!
    Paz, luz e sucesso, hoje e sempre!

    Lucy

    Responder
  3. Ae acessa la meu blog gente


    www.worldclaw.blogspot.com

    Responder
  4. Voltei!!!!rsrsr
    ahhhe mais uma vez para lhe agradecer por sua boa vontade em auxiliar e com amaior paciência mesmo, meu querido.
    Agora, não sei se não enxerguei ou fui desatenta, mas é que estou procurando aqui, e não encontrei um email teu ou formulario de contato. É que eu queria te enviar algo por email, uma imagem para te mostrar e poder perguntar algo.
    E tb o link do meu blog de testes(q não vou colocar aqui), para te mostrar as alterações q fiz, antes de alterar o meu template no blog original.
    Se for possível, ficaria mais uma vez muito grata por tua atenção. Desde q não lhe seja incômodo.
    Abraços, a ti
    Paz, Luz e sucesso sempre!

    Lucy

    Responder
  5. Olá! Tenho um blog que fui mudando aos poucos com meu parco conhecimento de html,estou quase ao final do que realmente quero, porem me vejo de frente com um problema, o div que coloquei abaixo do cabeçalho ficou perfeito, porem os elementos neles adicionados não estão bem posicionados, um é o codigo do adsense e o outro é a imagem de feed que redireciona para o mesmo. O adsense está muito afastado da margem esquerda e colado na imagem do feed. Já tentei de tudo. Voce pode me ajudar?

    Responder
  6. E só mais uma pergunta, a navbar não sai com nenhum codigo que peguei aqui e em outros tutoriais. O que poderia estar impedindo?

    Responder
  7. Anjovadio, Você pode tentar colocar outro elemento que serviria para empurrar eles mais para a esquerda, pode ser até uma nova div vazia, porém com uma largura(width) suficiente para os outros elementos virem para o lado esquerdo.

    Cercar alguns elementos com div para colocar o padding que da espaçamento a eles também é possível, as imagens podem ter seu style com padding.

    Você pode tentar mudar o style='text-align:center' que tem nesse elemento que você adicionou por style='float:left;' você terá ela alinhado do lado esquerdo.

    Você pode também tentar style='float:left;padding-right:8px;' esse faz ficar do lado esquerdo e da um espaço de 8 pixeis do lado direito do elemento.

    Fazer uma busca na web por Css div padding e align e entender o que é css inline é uma boa, por que esses problemas sempre aparecem.

    Quanto a outra pergunta o que impede é esse código #navbar-iframe { display:block } colocado espertamente no inicio do html.
    Retirar esse código e add outro parecido, pra quem não o fez ainda, mas no css do html.
    Ouvi falar que é permitido, mas...
    Talvez um dia eu post sobre mas tem coisas mais importantes....

    Responder
  8. Obrigada pela dica, mas tenho uma dúvida..

    Como colocar esses gadgets um ao lado do outro, como um menu???

    Obrigada

    Responder
  9. Priscilla Oliveira, Obrigado pelo comentário.

    Um dia ainda vou postar sobre eles, por enquanto ainda tenho que resolver uns problemas relacionados a eles.

    Responder
  10. Ok :)

    Mais uma perguntinha, posso?

    Há alguma maneira de inserir, nesse gadget mesmo, uma imagem gif?
    Se for pelo caminho do "imagem", o Blogger não aceita.

    Deve ter como, não?

    Obrigada

    Responder
  11. Priscilla Oliveira

    Desculpe mas no comentário anterior eu pensei que você estivesse se referindo a um gadget desse blog.

    Se você não entende de html e css, a melhor forma de fazer tudo isso que você quer é criar uma postagem, editar usando a área de postagem e depois de pronto copiar para a área do gadget, se você quer colocar uma imagem link veja aqui, e como mudar uma imagem do post para lateral aqui.

    As imagens você pode postar com alinhamento esquerdo e elas ficarão uma do lado da outra.

    Depois você adiciona tudo dentro do gadget.

    Responder
  12. Gostaria de saber como eu consigo colocar imagem de fundo em uma postagem, ou seja INSERIR UMA IMAGEM E ESCREVER EM CIMA DELA

    Responder
  13. Maércio Rogers

    Ainda não tem esse post aqui no blog, mas de uma olhada nessa postagem aqui que tem uma dica de como fazer isso, e não precisará usar o overflow:auto;

    Responder
  14. CARA MUITO BOM, OBRIGADO, VALEU MESMO, UM GRANDE ABRAÇO E SUCESSO...

    Responder
  15. cara mto obrigado!! agora irei colocar um slide no meu blog!

    Responder
  16. Boa dica... mas não consegui usar.

    Responder
  17. Olá, eu nem sei se minha pergunta procede mas o que acontece é que estou com um problema meio chato em meu blog(estou iniciando o mesmo) e não sei a quem recorrer pra me ajudar com esse problema.
    Depois de muito quebrar minha cabeça consegui adaptar um template para meu Blog só que, no campo onde estão os posts do mesmo, as frases ficam sem parágrafo, estão super junto da linha divísória de cores.
    Sabe como eu poderia resolver isso?
    Agradeço muito sua atenção, um grande abraço

    Responder
  18. Izabel

    Tentei entender você, não sei se consegui, mas olhei seus blogs e nada encontrei de erro.

    Responder
  19. no meu template não tem nenhum dos 2 codigos que vc fala no seu tutorial,em outros modelos de template sempre encontrei o trecho do primeiro codigo mais esse template desse blog que estou agora não ha denhum dos dois trechos de codigo mostrado aki.

    Responder
  20. aff, consegui colocar a div mais foi abaixo desse trecho <div class='clearfix' id='main'> ,repassa aí poid outros podem ter tido o mesmo problema que eu.

    Responder
  21. muito bacana seu site!
    ai pessoal acesse o meu!

    http://pathinjogos.blogspot.com

    Responder
  22. ae preciso muito de ajuda estou com problema no crossol ta sobrando um espaço vo manda print

    si esta a print
    http://img704.imageshack.us/img704/3356/semttuloza.jpg

    socorro por favor to precisando nenhum blogeiro expert pode resolver meu problema ainda!!

    ajuda ae meu site http://www.xsampx.blogspot.com

    Responder
  23. HERCULYS☻☺♥

    Você deve lembrar qual o ultimo gadget que você adicionou ou o gadget que adicionou um pouco antes de começar o problema, esse deve estar muito largo, pode ser no topo ou na lateral direita, a largura é width e você pode baixar o valor dele, um número um pouco menor pode resolver.

    Responder
  24. Queria saber como colocar essa área abaixo apenas da área do post dividida em duas, tipo mais duas sidebar debaixo dos posts

    Responder
  25. Paulo Castro

    Exatamente abaixo do texto do post não consegui, para isso só é possível inserir coisas diretamente no HTML do blogger, mas, é possível colocar bem abaixo da área do post, abaixo de comentários e outros, porém, achei problemático, consegui até criar uma área onde os gadgets ficam do lado do outro, mas o título deles não, e, também não tem como colocar div para gadget logo acima do título do post, isso porque os Elementos da pagina vão ficar confusos. Se mesmo assim quiser tentar use um blog de teste primeiro.

    Adicionar div-área de gadget abaixo do post

    Siga os passos da postagem até o 4 e, Localize no HTML do blogger:

    <b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>


    Após/abaixo do código acima pode adicionar:

    <div>
    <b:section class='' id='novo3' preferred='yes'/>
    </div>


    Você pode optar por adicionar esse código acima do título do post, para isso é só adicionar antes/acima do código que deve localizar(em vermelho). Só pode escolher um, ou acima ou abaixo.

    Agora para que os gadgets inseridos fiquem do lado um do outro, terá que usar Css, Localize no HTML do blogger:

    ]]></b:skin>


    Antes/acima desse código pode adicionar:

    .main .widget-content{float:left;display:inline; width:50%;}

    Depois salve e vai adicionar os gadgets(sem título) para ver como fica o blog.

    Você pode mudar o valor de width:50% para 33% aí caberá 3 gadgets, mas, alguns gadgets com largura maior podem dar problema, talvez tenha que baixar o valor de width causa de bordas e margens....

    Lembrando que se você adicionar o Css ele vai interferir nos gadgets dentro de .post e, se tiver acima e abaixo do post pode ser ruím de organizar

    Responder
  26. Olá
    Vim agradecer pela aula de como colocar um gadget abaixo do cabeçalho.
    Deu tudo certo e lá está ele desempenhando a função conforme eu queria. Que maravilha, você fez muito por mim. Obrigadaa
    Merece um doce beijo

    Responder
  27. Show de booooola! Muito obrigado! Deu certo!

    Responder
  28. Ola! Preciso muito da sua ajuda.
    No meu template nao tem essa div:'content-wrapper'
    e tb nao tem essa:'crosscol-wrapper'
    Nao tem nenhuma das divs citadas acima. O que devo fazer? Posso acrescentar, agradeco muito de me responder! Um abraco!

    Responder
  29. Sarah Brandao

    Os novos modelos do blogger já possuem essa área para adicionar gadget, basta ir em Design >Elementos da página >Adicionar um gadget que está acima da área que diz Postagens do blog

    Responder
  30. Olá, eu estou com um problema, o banner está ficando no meio do post, acima do post abriu um espaço, mas o banner ficou no meio do post olha meu blog de testes:http://monteseulayout.blogspot.com/

    :)
    como faz?
    beijoo

    Responder
  31. Desirée Hevillin

    Tenta retirar o código que eu postei acima e, depois tenta arrastar um gadget para aquele local, as vezes já existe uma 'entrada' para inserir elementos, veja como trocar os gadgets de lugar

    Também pode tentar colocar o código acima, mas com uma alteração, veja um trecho que você poderá modificar:

    b:section class='sidebar' id='novo'

    e troque por:

    b:section class='sidebar-none' id='novo'

    Responder
  32. Oi gostaria de parabenizar esse site onde se tira todas as dúvidas... Maravilhosa iniciativa.
    Minha dúvida é:tenho um blog ha bastante tempo gostaria de inserir no próprio blog uma ferramenta de procura para assuntos de dentro do blog mesmo; tem como fazer isso?
    Desde ja agradeço a ajuda

    Responder
  33. Carlos "Zeuxis" Paim

    O blogger tem um gadget de busca(clique para ler) que é fácil de instalar e os resultados aparecem dentro do blog, eu usei durante um tempo e gostei muito.

    Responder
  34. Ola, acompanho muito o seu site, e preciso da sua ajuda, coloquei um gadget no lugar do cabeçalho,ele fica com altura maior que o do rodapé, o que fazer, ta sobrando espaço.
    Agradeço muito, desde já,
    Salvador.

    Responder
    ...Respostas
    1. Só posso sugerir mudar o gadget de lugar e colocar outro, se o problema persistir é um problema no layout do modelo, se, ao substituir o gadget por outro e o problema não aparecer significa que o problema era com o gadget.

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!