11 de abr de 2013

Colocar duas colunas acima da área de postagem no novo Blogger



Sempre procurando um espacinho no blog para colar aquele gadget que falta, e porque não acima da área de postagens ? Você poderá colocar tradutor e assinante de feed, ou buscador e contador de visitas, enfim, cole o que for de seu agrado.


Clique em Editar HTML







Clique em Ir para um widget e depois em Blog1




Clique na seta, conforme a imagem





Procure por:  <b:includable id='main' var='top'>...</b:includable>

Clique na setinha para expandir o código.



Agora procure por: (não se esqueça de clicar em Ctrl e F para facilitar a busca)

<b:section class='main' id='main' showaddelement='no'>



E acima dele cole o código abaixo.



<div style='clear: both;'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div class='coluna-post-1' style='float: left; width: 48%'>
<b:section class='sidebar-up' id='magazine-left-2-up' showaddelement='yes'>
  <b:widget id='Label11' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
<b:if cond='data:title'>
<h2><img src='http://3.bp.blogspot.com/-u6NiCkJBqBU/TlxtZQyBLTI/AAAAAAAAAwA/PIxiVbAyv1w/s1600/tag_icon%252624.png'/> <data:title/></h2>
</b:if>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;' style='background: #eee;width:100%;  padding: 10px 0;'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
  </b:widget>
</b:section>
  </div>
  <div class='coluna-post-2' style='float: left; width: 48%'>
<b:section class='sidebar-up' id='magazine-right-2-up' showaddelement='yes'>
  <b:widget id='Label13' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
<b:if cond='data:title'>
<h2><img src='http://3.bp.blogspot.com/-u6NiCkJBqBU/TlxtZQyBLTI/AAAAAAAAAwA/PIxiVbAyv1w/s1600/tag_icon%252624.png'/> <data:title/></h2>
</b:if>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;' style='background: #eee;width:100%;  padding: 10px 0;'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
  </b:widget>
</b:section>
  </div>
<div style='clear: both;'/>
</b:if>


Salve.

Agora clique em Personalizar



Clique então em Avançado e depois em Adicionar CSS



E acima dele cole o código abaixo. Vá ajustando seus widgets onde está destacado.



/*Colunas sobre posts -----------------------------------------------*/

.coluna-post-1 .widget{ margin: 120px -10px 0 -30px;padding: 8px 2px; background: #808080;}
.coluna-post-2 .widget{ margin: 120px -33px 0 -10px; padding: 8px 2px; background: #808080;}

17 comentários:

  1. Olá Elke, queria saber o nome desse menu que você usa aqui no blog. que quando a gente clica nos gadgets, eles aparecem.

    ResponderExcluir
    Respostas
    1. Oi Aliyne, é o menu acordion. Veja com instalar no link:
      http://templateseacessorios.blogspot.com.br/2012/05/widgets-com-efeito-accordion.html


      Excluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. Este comentário foi removido pelo autor.

    ResponderExcluir
  4. Respostas
    1. Oi Alexsander, devido a seu comentário acabei de testar o código e sim, deu certinho. O modelo de seu template é o "Simple" ? Não tem erro. Abraço.

      Excluir
  5. nossa, mtissimo obrigada, da super certo e fiz varias vezes. bjao theabs.com.br

    ResponderExcluir
    Respostas
    1. menina, q rapidez...os tutoriais ja estao sendo atualizados com a nova versao...parabens!!! bjs

      Excluir
    2. Tem refazer tudo né Danny, ou ninguém saberá como implementar os hacks, são mais ou menos uns 1500 posts, super tranquilo. Estou super feliaz #SoQueNão rsrrsrsrs

      Excluir
  6. meu template nçao tem /* Mobile
    ----------------------------------------------- */

    ResponderExcluir
  7. o meu template não tem esse nome mobile que eu procuro para subistituir ele

    ResponderExcluir
    Respostas
    1. Ramon, seu template é original ou você baixou ? Aguarde que estou refazendo as dicas. Abraços.

      Excluir
  8. Quando clico em Salvar depois que colo o código acima de " "

    aparece este erro " The widget with id "FollowByEmail2" cannot contain element: "#text". A widget can only contain b:includable elements."

    meu template é baixado. aguardo solução

    ResponderExcluir
  9. Tem como deixar apenas na página principal?

    ResponderExcluir
  10. Oi, aqui aparece esse erro quando clico em salvar o html lá logo que colo acima do .

    The widget with id "FollowByEmail2" cannot contain element: "#text". A widget can only contain b:includable elements

    Oque eu faço?

    ResponderExcluir
  11. O mesmo acontece quando colo, como o problema do Anderson. Nos ajuda vai! xeiruuuuuuuuu

    ResponderExcluir
  12. Olá, testei e funcionou perfeitamente, porém eu gostaria que fosse abaixo da area de postagem, dei uma expiadinha pelo seu site, tem esse tutorial, porém é antigo e não obtive exito. indo por essa forma aonde eu colo para que fique abaixo da area de postagem??

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube