Image Map

6.8.12

Tutorial: Separar barra lateral em caixas e subir barra lateral




Oiiii!
Hoje vim trazer um tutorial que vi no Go imagine  , que é separar a barra lateral em caixinhas e subir a barra lateral, mas claro com minha explicação rsrsrs!
Então aí estão os devidos créditos :)

Lets Go!


                   Separar sidebar em caixinhas
Se você estiver na interface antiga do blog vá em Desing> editar HTML
Se você estiver na interface nova do blog vá em modelo> editar HTML> prosseguir .
Muita gente que está acostumada com a interface antiga e não sabe onde fica "modelo",
aqui estou mostrando onde fica para facilitar > exemplo <
Vamos continuar...
Clique em ctrl F , vai abrir uma caixinha de pesquisa onde você irá pesquisar por /* Widgets

Antes de feixar o " { " você irá colar o código:
background: #fff; /*---- cor do fundo da caixa ----*/ 
  padding-left: 20px; /*---- espaço à esquerda ----*/ 
  padding-bottom: 20px;  /*--- espaço de baixo ---*/ 
  padding-right: 20px; /*--- espaço à direita ---*/ 
  padding-top: 5px; /*---- espaço de cima ----*/ 
border-radius: 5px; /*---- bordas arredondadas, apague a linha se não quiser ----*/
box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/ 
Se você quiser o fundo da barra lateral de outra cor, apague o #fff 
E vá até aqui e escolha a cor, depois copie e cole no lugar do #fff

Visualize e se estiver tudo certo salve.
A barra lateral ficará com fundo, para tira-lo você fará o seguinte:
Vá no HTML do seu blog e se sua barra lateral for do lado esquerdo procure por:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Se for do lado direito procure por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Aparecerá assim:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}


Apague a parte destacada e visualize, se estiver tudo certo salve.




                   Subir barra lateral

Vá no HTML  do blog , clique em ctrl F e perquise por:
.main-inner .column-left-outer {  caso esteja do lado esquerdo
                                  .main-inner .column-right-outer { caso esteja do lado direito

Se estiver do lado esquerdo estará assim:

  .main-inner .column-left-outer {
        width: $(main.column.left.width);
        right: 100%;
        margin-left: -$(main.column.left.width);
      }
Se estiver do lado direito estará assim:



 .main-inner .column-right-outer {
        width: $(main.column.right.width);
        margin-right: -$(main.column.right.width);
Abaixo da parte destacada em negrito cole o seguinte código:



margin-top: -150px;
Substitua o "150" pelo tamanho que queira, vá visualizando até achar o ideal
Depois se estiver tudo certo salve...
Espero que tenham gostado <3
Beijos

9 comentários:

  1. O meu blog é o modelo minina! Não consegui fazer, alguma sugestão ??
    www.smileof-happiness.blogspot.com

    ResponderExcluir
    Respostas
    1. Visita esse post do blog Camila Desing, provavelmente será útil! http://camilasdesigns.blogspot.com.br/2012/05/personalizando-sidebar-modelo-minima.html bjs

      Excluir
  2. Que parte em negrito, que não vi nenhuma? Eu to tentando fazer o meu lay, mas não achei parte em negrito

    ResponderExcluir
  3. Muito obrigada pelo tuto!
    Ajudou muito! :)
    minhas-confissoes-212.blogspot.com

    ResponderExcluir