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 :)
Separar sidebar em caixinhas
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:
Se você quiser o fundo da barra lateral de outra cor, apague o #fffbackground: #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 ----*/
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:
Se estiver do lado direito estará assim:.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {Abaixo da parte destacada em negrito cole o seguinte código:
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
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
O meu blog é o modelo minina! Não consegui fazer, alguma sugestão ??
ResponderExcluirwww.smileof-happiness.blogspot.com
Visita esse post do blog Camila Desing, provavelmente será útil! http://camilasdesigns.blogspot.com.br/2012/05/personalizando-sidebar-modelo-minima.html bjs
ExcluirObrigada! *-*
ExcluirQue parte em negrito, que não vi nenhuma? Eu to tentando fazer o meu lay, mas não achei parte em negrito
ResponderExcluirColoquei já
ExcluirOBRIGADA procurei mt por isso
ResponderExcluirDe nadaa!
ExcluirMuito obrigada pelo tuto!
ResponderExcluirAjudou muito! :)
minhas-confissoes-212.blogspot.com
De naada! ^^
Excluir