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:

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...

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.

• Como colocar adsense acima dos posts no BlogSpot
• Classificar com estrelas, votar, avaliar post no BlogSpot