Cursos 24 Horas - Cursos 100% Online com Certificado

Sidebar dividida em dois (Blogger/Blogspot)

1 Comentário Autor : Notícia e blog 20 setembro 2009
Uma maneira fácil de ganhar espaço é colocar mais um espaço para adição de Gadget, este espaço será divido em dois permitindo adicionar dois Gadgets no espaço de um.


O modelo que usei no exemplo é o template mínima então antes de fazer as alterações salve uma copia do modelo pois se der errado você pode voltar ao normal, então vamos a aplicação.


 1.Faça login no Blogger


2.Vá para Layout->Editar HTML->Marque a caixinha Expandir Modelos de Widget
Agora utilize as teclas Ctrl e F para para encontrar o código abaixo:
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Se não encontrar desta forma pesquise apenas o código abaixo mas lembre-se que o final tem que ter uma chave como está }.
#sidebar-wrapper { 
Agora abaixo deste código insira o código abaixo mas lembre-se de que o código abaixo tem que ficar depois de uma chave }, veja o exemplo: #sidebar-wrapper { ....}coloque o código aqui
#sidebar-wrapper-doble { width: 220px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #columna-izda { width: 48%; float: left; } #columna-dcha { width: 48%; float: right; }
3.Agora procure pelo código abaixo:
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'/> </div>
Se não encontrar procure por este:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

Agora abaixo deste código insira o código abaixo:
<div id='sidebar-wrapper-doble'>
<b:section class='sidebar' id='columna-izda' showaddelement='yes'>
</b:section>

<b:section class='sidebar' id='columna-dcha' showaddelement='yes'>
</b:section>

<div style='clear: both;'/>
</div>

4.Salve as alterações.

5.Vá para Layout->Elemento da página
E veja se ficou como a imagem abaixo:
Sidebar dobleDoble sidebar




Se preferir baixe o template mínima com sidebar dupla -                                                                             Alguns direito reservados ao autor 
Referência: Elescaparatederosa

    1 Comentário

    Luigi Henrique De paula disse...
    19 de outubro de 2012 14:15 #

    Muito bom o post,Alias o blog inteiro ta maravilho,muito bom mesmo e é gostoso encontra blog bom assim,outro dia encontrei o http://rastreamentodecelular.net to usando na minha empresa de detetive,bom demais e estou recomendando,e vou recomenda esse blog tb!!abraços

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.