Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

04 maio 2008

Como personalizar a sidebar

Você quer saber tudo sobre como personalizar a sidebar? Então chegou ao lugar certo :-)
Neste post vou detalhar todas as maneiras possíveis (que eu conheço, óbvio) de personalizar a sidebar (ou coluna do perfil, para alguns).

Primeiro quero lembrar que sempre pego o código do template Mínima (do Blogger) como base para ensinar as modificações. Templates que já foram alterados ou que são criações de outros blogs, podem apresentar algumas diferenças, por isso fique atento principalmente aos títulos que geralmente são os mesmos.

Onde encontrar o código da sidebar?

Procure por (ou algo semelhante):

#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 */
}

Como modificar a largura da coluna?

#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 */
}

Altere o valor de width (o que está em vermelho no código acima). Quanto maior o valor, mais larga será a coluna. Aqui o valor se apresenta em pixels, mas poderá ser determinado em % também. Vá alterando e visualizando por várias vezes, antes de salvar.

Como acrescentar um fundo colorido na sidebar?

acrescente a seguinte linha:
background-color: #000000;

o valor da cor aqui representada é a que equivale ao preto. A cor pode ser determinada por seu código html (como coloquei) ou por seu nome, por exemplo gray, red, black...O código todo então deverá ficar assim:

#sidebar-wrapper {
width: 220px;
background-color: #000000;
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 */
}

Como acrescento uma imagem ao fundo da coluna?

Para acrescentar uma imagem que deve se repetir continuamente, coloque:
background: url(endereço da imagem) repeat;

sobre este endereço da imagem, leia aqui (até o final)

para que a imagem se repita somente na horizontal:
background: url(endereço da imagem) repeat-x;

para que a imagem se repita somente na vertical:
background: url(endereço da imagem) repeat-y;

para usar uma imagem que não se repete:
background: url(endereço da imagem) no-repeat;

e ainda, para usar uma imagem que não se repete na vertical e manter o restante do fundo de uma cor determinada (como após uma imagem gradiente) use:
background: #7E7E7E url(http://i26.tinypic.com/2z9lkzk.jpg) repeat-x;

ou seja, criei uma imagem de 20X150 para que se repita horizontalmente (preenchendo a largura real da coluna). Para que haja continuação da cor do final do gradiente, copio o valor desta última cor que se apresenta e coloco antes do endereço da imagem.
Veja como:


e a imagem já colocada na sidebar:



Como personalizar os títulos na Sidebar?

No template Mínima não existe o trecho referente aos títulos da Sidebar, então, se você está usando este template, crie o código, caso contrário, se estiver usando um template cujos títulos deseja modificar, procure por:

.sidebar h2{
margin: 0px;
padding: 8px 5px 3px 15px;
}

Para colocar cor ou imagem no fundo dos títulos, segue as mesmas fórmulas para o background da coluna, descritos acima.

Para centralizar o título use:
text-align: center;
para alinhar à esquerda:
text-align: left;

padding cria um espaço entre as letras e os limites determinados para o título e se apresentam
no sentido horário:
padding:8px 5px 3px 15px;

8px: espaçamento do título para o topo
5px: espaçamento do título para a direita
3px: espaçamento do título para a base
15px: espaçamento do título para à esquerda.

Vá testando os valores e visualizando, até que fique do seu agrado.

Para estabelecer uma fonte diferente no título, leia aqui

Como separar as widgets na Sidebar?

Para separar as widgets da sidebar procure por (se já não estiver separada no seu template):

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Separe desta maneira:

.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em; }

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

sendo que o que está em azul refere-se a Sidebar (esqueça o outro trecho por enquanto).

Para que as widgtes fiquem distintamente separadas, como nesta imagem:



deixe o código assim:

.sidebar. widget{
margin: 0px 0px 20px 0px;
padding:20px 5px 20px 15px;
background: #CFC6AF; (aqui coloque o valor da cor escolhida)
border: 2px solid #34201F; (aqui o valor da cor da borda)
}

Óbviamente, para que haja contraste entre o background das widgets e da coluna toda, os valores (cores) escolhidos devem ser diferentes.
Veja que aqui, tanto para margin quanto para padding os valores correspondem aos quatro cantos em sentido horário, como explicado acima

margin: 0px 0px 20px 0px;
margin: topo, direito, base, esquerdo

uma margem de 20px na base garante o afastamento de uma widget da outra.

Edit: à pedidos....

Como colocar uma linha sob os links da Sidebar

Procure por :
.sidebar li{

e acrescente:
border-bottom: 1px dotted $bordercolor;

Para colocar bullets ou ícones antes do link, leia aqui

Se tiverem outras dúvidas, deixem nos comentários que vou acrescentando.

E é isso :-)

Artigos Relacionados

97 comentários:

jacy disse...

Nossa, vc leu meus pensamentos! administr dois blogs, mas só faz duas semanas, estava me descabelando a prcura dessas dicas, valeu!!

RafaMaiaX disse...

Nossa parece que vc leu minha mente... ja ia procurar por "como alterar os títulos da sidebar" valew mesmo!!!
Abraço!

teste disse...

Grande artigo Ariane!

Estava mesmo precisando. Como você sabe estou começando a personalizar alguns modelos para mudar a cara do UsuárioCompulsivo.

Mas tem uma coisa que você não mostrou, que estou tentando implementar e que você já usa aqui no Templates para Novo Blogger.

Queria saber como faço para que sejam exibidas linhas entre os itens dos widgets da barra lateral, como você usa aqui, em últimos posts, categorias, recomendo, etc...

Será que podes abrir uma exceção para o amigo e responder minha perguntinha aqui e não no Orkut?

[]'s
Compulsivo

Ariane disse...

Jacymara e Rafa: depois dessa, estou pensando seriamente em abrir uma tendinha mística :-)

Compulsivo, já está no final do post. Qualquer dúvida grita mesmo! :-)

teste disse...

Isso é que é eficiência! Valeu Ariane...

[]'s
Compulsivo

Pedro Dal Bó disse...

Postagem em ótima hora.

Cuido de um blog que iremos mudar um pouco o visual, e assim ficará muito mais fácil.

Só tenho mais uma dúvida, caso eu tenha passado por cima e não tenha visto.

Tem como eu colocar uma imagem específica como título de cada widget?

Parabéns pelo texto e pelo blog.
______________________________________
Histórias para Ler

Luma Rosa disse...

Respondi o dever de casa, tia!! (rs*) Boa semana! Beijus

Amigos da Dilma disse...

Quer dizer então Ariane, que, para fazer essa barrinha(igual a essa roxinha no templates abaixo) que separa uma coisa da outra na coluna lateral do blog é um código?
Eu estava procurando em que site tinhas essa barras, ou botão, não sei o nome
Se for, por favor, coloca ai como se faz.

Admin disse...

Excelente tutorial..tava mesmo a precisar disto ;)

CDAD disse...

Parabéns amiga! Super post. Passei, apesar da tendinite, estou melhor. Bjs

Filipe Senna disse...

Vlw Ariane, perfeito tutorial. Sabe é que de vez em quando me dá uns surtos aih eu resolvo mudar meu template. Agora com esse tutorial será bem mais fácil. Vlw

Áurea disse...

Ei Ariane,
Adoro mudanças! Dá pra perceber né? Vivo mudando meus blogs!
Você arrasou com este tuto! Muito bom e didático!
Tem selinho para você no Aukimia!
Tenha um ótimo fim de semana!
Bjks no seu coração!

Princess Deluxxe disse...

Oi, Ariane! Adorei as dicas. Queri fazer só uma perguntinha complementar: como faço para trocar as posições das colunas? Tipo: tenho um blog com três colunas e o texto (main) fica à esquerda e as duas sidebars à direita. Já tentei trocar left e right mil vez, mas ainda não consegui colocar a coluna principal no meio!!
graciasssss

playfotos disse...

Cara eu sou iniciante e tenho um blog só oq eu quero é q vc mim encine a fazer templates ou fazer um pra mim ou mim encinar a colocar sabe a quela barrinha mo inicio na sidebar eu queria poder mudar se vc podesse mim ajudar eu agradeceria muito se ñ mim cinar a fazer templates seja no photoshop no corel tanto faz só isso blz??

Fô entro muito no seu blog se quiser da uma pasadinha no meu ok!!!!!!

Socorro Cunha disse...

Oi Ariane, acabei de fazer um blog e sou muito inexperiente ainda, mas andei fuçando na net e já aprendi algumas coisas, consegui descobrir um site que tem templates de 3 colunas para blog e coloquei no meu, como sou curiosa já andei mexendo e colocando algumas coisas como contador, relógio e algumas figuras, fiz tudo sozinha, mas o que eu queria mesmo era dividir as colunas verticalmente com barras, para ficar mais bonito, como faço isso? Se vc preferir, posso perguntar no orkut, gostaria que vc visitasse o meu blog, mas é proibido deixar o link aqui, como eu faço então? Adorei o seu blog, vc é muito legal e atenciosa com as pessoas, coisa rara hoje em dia, obrigada e um abraço.

H.B. disse...

Desapareceu o sidebar do meu blogue , agradecia a ua ajuda

Bantu disse...

Ariane SOCORROOOOO....
Dias atrás resolvi mudar meu template, e está praticamente tudo pronto para lançar o template novo só falta uma coisa.
Resolvi usar o menu em abas do compulsivo, foi tranguilo para add no html funciona perfeitamente.. só que o que eu quero sabe é como adicionar uma nova coluna abaixo do menu em abas na minha sidebar.

será que pode me ajudar ????

Batatas disse...

Oi Moça como vai,

Estou usando o Mminima tb porem no sidebar que é a lista de postagens não consigo deixar apenas os nomes das postagens (por exemplo como está no seu blog) sempre aparece a data e depois o titulo da postagem.

Quero deixar apenas o nome do titulo da postagem sem as datas.
Pode me ajudar?

Obrigado.

Johnny disse...

O tamanho do título da minha sidebar não quer mudar, eu postei uma enquete e o título da enquete ficou grande. Fui na opção "fontes e cores" do blogger, mas não muda o tamanho da fonte, como faço pra resolver isso?

Heitor disse...

Puts Ariane seu blog é TUDO!!!!!
Estou usando ele como base para minha vida inicial de blogueiro.
Utilizei varias de suas dicas inclusive essa no desenvolvimento do meu template, pois no meu conceido a pior ato de plagio na blogosfera antes do post é o template.
Quando terminar o blog (varias noites sem dormir) mando ele pa vc ver se tem aprovação. Bjos
Heitor

Ariane disse...

Puxa Heitor, obrigada! Espero que os tutos aqui te ajudem mesmo. abraços!

Unknown disse...

Olá, Ariane!

Parabéns pelo excelente trabalho que vem realizando! Sou MUITO NOVO na área de blogs e estou procurando informações na Net que possam me ajudar. Através do Google cheguei até você. Estou "quebrando a cabeça" com um ensaio de blog. A maioria dos templates do Bloger são muito pobres, e todos com a sidebar do lado direito, e eu quero que fique do lado esquerdo!

Pode me indicar um post seu ou de outrem que esclareça de fato, como colocar a sidebar do lado esquerdo do blog? Desde já, agradeço.

Abração!

Carlos

Ariane disse...

Carlos, diversos tutoriais explicam isso aqui, mas, paraencurtar a ópera, mude o float da sidebar e deixe:

float: left;

Unknown disse...

Querida Ariane, não consegui enxergar, onde centralizo o texto que fica dentro da coluna da siderbar..
vc me ajuda?
Beijos

Ariane disse...

Rose, se vc quer centralizar tudo o que colocar na sidebar (conteúdo, não o título), procure por:

.sidebar{

e acrescente a linha:

text-align: center;

com isso vc centraliza tudo o que vai aparecer na sidebar.

Eduardo disse...

Aqui não ficou legal... parece uma tabela estilo table ou iframe... sei la só adicionou as bordas, e a parte superior aonde o "título" está?

exemplo: na foto há o wig de busca, ele tem como título a palavra 'buscar' que está dentro do quadrado supeior marom. aqui não aparece esse quadrado superior, fica tudo apenas dentro de um contorno... da pra entender?

Ariane disse...

Administrador, entendi sim. Isso acontece pq vc não deu um título ao widget.

Unknown disse...

ola, gostaria de saber como faco para deixa o meu blog com duas coluna uma no lado direito e outra do lado esquerdo? parabens pelas suas dicas sao otimas um abraco
leandro

Ariane disse...

Dada, lê o post sobre adicionar colunas no template.

Burity disse...

Olá Ariane, tudo bem?
O maluco aqui tá começando um novo blog e gostaria de saber como mudar fonte e cor (do título e do corpo) das sidebar e do footer. Tentei o link lá em cima e deu "página ñ encontrada".
Quando o blog ficar a meu gosto eu te mando o link pra vc dar uma olhadinha,valeu?!

Como sempre...obrigado!!!

Will disse...

Oi,aqui as widgets não estão aparecendo separadas,o que eu faço?

Washington - PC e Consoles disse...

Como eu centralizo as imagens que eu boto na sidebar?

tipo assim eu uso o Gadget adicionar imagem,mas ela nao fica centralizada fica encostada na esquerda da sidebar

Unknown disse...

Somente uma dúvida como eu crio e a onde eu coloco o códico para personalizar o titulo da sidebar? Se tiver um post mostrando o mesmo por favor me indique obrigado! Ah lembrando que para visualizar o template que estou customizando esta no meu perfil o nome é "Teste2"
Por bypoesia.

Ariane disse...

Márcio, neste mesmo post está a resposta.

Anônimo disse...

Ariane eu tenho algum conhecimente pouco, mas tenho eu reli seu tuto agora e quando estava lendo eu desejei não ter que incomodar de novo, mas infelizmente não foi possivel rs! Olha meu template é minima não tem esse codigo referente aos titulos da sidebar então eu não achei neste post a onde colocar o codigo então por favor se fui cego enquanto a isso me desculpe as vezes a gente passa desabercebido de algumas coisas e precisamos de um empurrãozinho para acordar ou voltar a enchergar vc pode especificar a onde neste post eu acho explicando minha duvida vc pode pensar o cara xato, mas é terrivelll quando não conseguimos achar algo e tipo não quero nada mastigado eu só quero aprender obrigado pela paciencia se estiver com ela ainda referente a mim rs!!!

Ariane disse...

bypoesia, logo abaixo da segunda imagem. a pergunta é exatamente igual a sua. :D

Victor disse...

Muito bom o tutorial mas como coloco tipo um sombreamento no titulo, tem naquela imagem q vc colocou de exemplo, como modifico a cor desse sombreamento e a cor do titulo? Valeu

Leo Pessoa Jr disse...

Olá, Ariane!
A parte que eu mais queria saber - que dizes como mudar a fonte do título da sidebar - está como "página não encontrada". Tem alguma outra forma de eu saber isto? Desde já grato.

P.S.: Excelente blog! Com certeza tem ajudado muuuuuita gente!
Abraço

Luciano disse...

Ow, blog muito legal pra caramba mesmo, sou novo nesse assunto de blog mas ja aprendi muitas coisas com a ajuda desse blog, só que tem uma coisa que não to conseguindo fazer. Olha só, quero por uma imagem no fundo dos títulos da sidebar, eis a imagem:

http://www.brimages.com/uploads/38/cc96709cd0.jpg

Só que num to conseguindo não, por favor veja ai se tem aluma coisa que vc possa fazer por mim, olha só como q ta:

#sidebar-wrapper {
width:240px;
background-color:;
float:$startSide;
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 */
}
#sidebar {
margin:0;
padding-top: 25px;
background-color:;
border: 3px solid #4F94CD;
}
.sidebar h2{
background: http://www.brimages.com/uploads/38/cc96709cd0.jpg;
text-align: center;
margin: 0px;
padding: 8px 5px 3px 15px;

Desde ja agradeço pela atenção.

Ariane disse...

Degeneration, o caminho correto é
background: url(link da imagem) no-repeat;

Lovegood Granger disse...

Oi Ariane!
Atraves do seu blog eu estou aprendendo a mexer no codigo do novo blogger,é ja aprendi muita coisa(Obrigado),mas não consigo saber pq não aparece a data no meu post.Vc pode me ajudar?
um abraço

Nuno de Mattos Capeletti disse...

Olá, é o seguinte: consegui aumentar a largura do sidebar mas ele acabou se colocando abaixo da coluna de posts, como se a largura total do blog nao suportasse alterações.

Tem alguma solução para isso, se é que você me entendeu?

Jujubiz disse...

Olá Ari! Eu gostaria de agradecer as dicas e tudo o mais... Vim aqui pois estou tendo problemas com meu template... Tenho um blog no blogspot, mas na side bar acontece que quando coloco algum widget, tipo slides, ele fica suuuper pequeno! O que eu faço? Tentei mexer em diversas partes do html, que como você também fuço bastante e assim vou aprendendo, mas não achei o erro! Pode me ajudar? Dá uma olhadinha lá quando puder! Beijão!

www.palavras-intensas.blogspot.com

Obrigada desde já!

Ju

Jujubiz disse...

Ah! Seu blog está lindo, assim de cara nova! Mas onde eu encontro os antigos posts e dicas que tinha na coluna esquerda? Estou meio perdida, hehehe.
Beijão

Ariane disse...

Jujubiz, no seu blog tudo é pequeno, mal dá pra ler os textos! Sugiro que você troque o template, que inclusive está desalinhado (todo para a esquerda). Mas, se vc não quiser, use o firebug para encontrar com mais facilidade os códigos que devem ser modificados. Abraços

Neimar Alves disse...

Oi Ariane bom dia! lá vou mais uma vez...

estou tentando dividir a sidebar com esse tutorial... tô usando o minima como base e não tô conseguindo inserir esse código:
.sidebar h2{
margin: 0px;
padding: 8px 5px 3px 15px;
}

pode me ajudar?
abração
Neimar

JackTekila disse...

Opa tudo bom neh?

seguinte to com um problemao meu caro!

Nao estou conseguindo separar os widgets do meu blog, nao consigo achar as vareaveis
".main .widget {"

Nao existe..
a unica q consigo é ".sidebar. widget{"
Ja fiz de tudo.

abraco

Ariane disse...

Jack, se no seu template já existe .sidebar .widget é pq elas já estão separadas.

JackTekila disse...

e o ".main .widget {"??????

entao como eu faco pra visualiaza??/

da uma olhada la no blog e ve oq esta acontecendo por gentileza!

interlouco.blogspot.com

abraco

JackTekila disse...

Declaração de variável inválida na máscara da página: A variável é utilizada mas não está definida. introduzido: bordercolor


aparece isso!!!!

Ariane disse...

jack, se o trecho não existe, basta colocar e se uma variável não existe, ou vc cria uma com mesmo nome ou substitui por um valor como #000000

Anônimo disse...

*Ariane to com um problema nos titulo da sidebar eles fico muito pra baixo queria saber como colocar mais pra cima e almenta a largura deles tambem da uma olhada no meu blog pra vc pode entender melhor .

Lulu disse...

Olá Ariane,obrigada por compartilhar seus conhecimentos!Sempre estou aqui para aprender novas coisas!
Mudei meu template e não consigo encontrar onde eu aumento o tamanho da coluna do lado direito,poderia me ajudar por favor?Tudo fica bem espremidinho por lá.Li nos mínimos detalhes tudo que explicou mas acho que isso não tem nos meus códigos.Obrigada desde já!

Ariane disse...

Luciana, em qual dos seus blogs está o problema?

Lulu disse...
Este comentário foi removido pelo autor.
Anônimo disse...

Oi,melhor colocar a url direto ne aqui ,o outro comentário pode deletar se preferir!Obrigada

Anônimo disse...

Coloquei uma imagem na sidebar, so que ela ficou colada no lado esquerdo, como faço para ela ficar centralizada??

Anônimo disse...

Prezada Ariane,
Não sei se estou no post certo, mas gostaria de aproveitar o seu saber. Estou querendo clocar na minha relação de links (parceiros) uma forma de apresentar somente 10 e o restante apos clicar em "ver mais". Tipo como é feito em resumo de post, so que na sidebar.

Obrigado
Luiz

Administrador disse...

Ariane, como eu faço para colocar bordas na sidebar? Não to conseguindo

Dani Salles disse...

Oi Ariane, vc não imagina como faz parte da minha vida rsrs, seguinte usei seus tutoriais e criei um blog a partir do minima, ainda estou decidindo se vou modificar as sidebars ou não,a questão é a seguinte minhas postagens não ficam centralizadas, já usei o código center e center/ ele aceita mas não modifica, dentro da pg Layout está perfeito e o títuli /header também está, não consigo achar o código onde eu centralizo estas postagens, que não adianta na hora de postar.
Agradeço se puder dar uma olhada,
danisallesdesign.blogspot.com
Obrigada
Dani

Bonespedia disse...

Oi Ariane. Minha internet está com problema então, eu enviei um comentário anterir mais não foi confirmado.

Estou com problemas para organizar o meu blog.

Ele é o http://bonespedia.blogspot.com

O layout do DEMo esta assim: http://i42.tinypic.com/hwdbn6.jpg
Mas eu gostaria que ficasse assim: http://i41.tinypic.com/zna54.jpg

Eu não sei criar gadgets nem organizar para que fiquem nessa ordem. Você poderia me ajudar?

Mais uma vez, meus parabéns pelo site.

Ariane disse...

Bonespedia, não entendi bem sua pergunta. Você quer que o modelo seja o mesmo, só quer mudar a disposição dos gadgets? Para isso basta arrasatar os gadgets para as colunas de sua preferência.

Jotz disse...

Olá Ariane, Muito bom este seu post, pois eu queria saber se eu poderia obter uma ajuda sua. Estou tento problemas com a #sidebar.

É o seguinte na parte de "categorias" geralmente o numero de posts fica ao lado de cada categoria, mas no meu blog, este numero fica em baixo, tentei procurar o erro, e quando encontro, eu arrumo, mas nao fica como deveria ficar, pois nesta categoria existe um fundo com uma cor para cada uma delas, e quando passa-se o mouse por cima, esse fundo muda de cor. Saberia me dizer como posso arrumar?

Att,
Lucas

Aline disse...

Oi, Ariane.

Gostaria de dizer que adoro seu blog e venho acompanhando-o através do feed. Suas dicas estão me ajudando muito (assim como as do [Ferramentas Blog] e do Dicas Blogger. Foi graças a um post seu que encontrei o template atual do meu blog.

Pois então, estava procurando em meio aos seus muitos artigos um que abordasse a personalização da sidebar e acabei me deparando com esse.

Infelizmente, o problema que me aflige não achei aqui. É que enquanto todas as outras sidebars (inclusive a de links) mantêm a mesma diagramação para o conteúdo, a sidebar "Blogs" (lista de blogs) é diferente. A fonte do conteúdo parece estar em negrito e a margem está mais para a direita, em relação às outras sidebars, o que faz com que blogs de títulos grandes passem a ocupar duas linhas e, assim, mais espaço.

Já fiz de tudo, testei cada código referente às sidebars, mudei margin, padding, text-align, tamanho da fonte, mas nada funcionou. O pior é que se eu mexo em certos códigos todas as sidebars mudam, mas não acho o código referente a sidebar em questão. Como é que ela pode ser a única diferente?!

No mais, obrigada pela sua atenção.

Aline disse...

Oi, novamente, Ariane,

Achei o código referente a sidebar da lista de blogs (acho). E, no meu blog de testes, troquei isso:

.sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
}

Por isso:
.sidebar ul {
list-style: none;
margin: 0px 0px 0px -25px;
padding: 0px;
}

Consegui que o título do blog ficasse mais à esquerda, mas a quebra de linha permanece igual (continua em duas linhas), além de que não sei como tirar o negrito. Tentei text-align, tentei mexer na list-style, mas nada mudou... onde será que acho essa opção?

Movies Perfect - Downloads. disse...

queria saber como eu separo as sidebars, pois eu consegui arredondar as bordas, mais com isso, elas se juntaram, ficou uma colada na outra, marcadores de filmes e marcadores de séries coladas, o efeito nao ficou legal, tem como explicar como faço isso? muito obrigado.

Ariane disse...

Lucas vi que vc retirou a numeração.

Aline estou fazendo um post sobre o assunto

Movies Perfect vi que vc tem 3 blogs, vc se refere ao Rede Séries? Se for, vi que vc colocou um fundo para cada item da lista e para separá-los é preciso acrescentar margin-bottom:2px; ou valor maior e diminuir o valor de padding-left para alinhar ao centro. veja a largura da sidebar e faça os cálculos para alinhar, ok?

Aline disse...

Muito obrigada, Ariane!
Acabei de ver no feed o novo post, vou lê-lo agora mesmo.

Victor Leão disse...

Como que eu faço para colocar um espaço entre as letras ?

Rose Batissaldo disse...

Olá...tenho um blog no BLOGGER e não sei o que houve, mas a sidebar desceu pra baixo dos posts...não sei + o que fazer...por favor..pode me ajudar?

Já pensei até em criar um blog no WordPress, mas não gostei...e a té criei uma conta no Windows Writer pra Blogar por lá..mas ainda quero insistir no blogger, pois está todo montadinho...

Aguardo sua ajuda, tenha um ótimo domingo.

bjos

Madonna Ever disse...

OLá Ariane, uso o seu template 'Março' em meu blog e até agora tudo certo... a sidebar 'do nada' desceu para abaixo das postagens e não consigo ajeitar, me ajude!!!! link do meu blog: http://madonnaever.blogspot.com/

Madonna Ever disse...

aconteceu o mesmo comigo, gostaria de saber como faço para colcoar a sidebar ao lugar de origem. Obrigada

Jana disse...

Olá, Ariane. Eu dei uma lida no post mas não vi nada sobre colocar uma imagem separando os widgets... existe um código especifico pra isso ou eu só coloco endereço da imagem e coloco bottom pra ficar embaixo de cada widget? já tentei, mas não tive muito sucesso. será que você poderia adicionar isto ao post?

Ariane disse...

Victor, para colocar espaço entre as letras use: letter-spacing: 0.1em; (ou qualquer outro valor que julgar melhor)

Rose você fez alguma modificação ou inseriu algum script que pudesse influenciar nisso?

Madonna você colocou algum script diferente ou fez modificações nas medidas das colunas ou widgets?

Jana seria desta maneira mesmo e talvez a imagem não apareça por falta de padding. Coloque padding-bottom:10px (ou um valor maior) e veja se aparece.

Jana disse...

Olá, Ariane. Era isso mesmo! Depois que adicionei o padding, apreceu uma divisória certinha. Muito obrigada pela ajuda! ^^*

Déia disse...

Oi Ariane, muito bom o post funcionou perfeitamente a parte de separar as widgets da sidebar, mas eu quis o mesmo efeito nas postagens e fiz o mesmo lá no trecho (queria que cada post ficase em uma "box") ".main .widget" so que não deu o mesmo efeito da sidebar ".sidebar .widget", as postagens continuaram juntas. Poderia por isso no post ou me indicar algum post aqui no TNB que fale sobre isso? Eu procurei bastante aqui mas ainda não achei.
Obrigado.

Melody Vargas (Blog Idéias no Tom) disse...

Ariane, amo seu blog e utilizo ele muito pra ir melhorando o meu, pois estou iniciando, e ainda a linguagem html é complicada pra mim, mas mesmo assim não para de "futricar" no meu template!! Mas estou com um problema que não consigo achar a solução: tenho duas colunas, e o sidebar da esquerda está literalmente "colado" no main-wrapper. O estranho é que o sidebar da direita está com uma margem ótima entre ele e o main-wrapper...se você puder me ajudar te agradeço muito! Se quiser visualizar o que está acontecendo, segue o meu blog: ideiasnotom.blogspot.com Parabéns pelo trabalho!

Ramon Dias disse...

como posso colocar uma imagem que fiz (que apresenta somente "borda" com cantos arredondados com uma cor escura e de fundo branco) no corpo do widget para que fiquem divididos em "balões"?

todas as partes da postagem estão separadas por imagens assim, só q nao consigo fazer o mesmo com os widgets da sidebar... pode ajudar?

Ariane disse...

Déia para isso é preciso determinar margin em .post. Coloque, por exemplo:
.post{margin: 10px;} ou ainda, só para separar do post seguinte:
.post{margin: 0 0 10px}

Melody, isto por que a coluna do post tem flutuação à esquerda e 'corre' para lá. Coloque uma margin em main-wrapper assim:
#main-wrapper{margin-left:5px} Vá testando valores até ficar bom.

Administrador, isto é uma das coisas mais di´ficil (para mim) de fazer no template. Se for uma imagem dividida em 3 (borda superior, 'corpo' do widget e borda inferior) é mais complicado para ajeitar as margens e paddings para que fique legal em todos os navegadores. Você pode colocar a borda superior como background do título do widget, o 'corpo' em .sidebar .widget-content e a borda inferior como background de .sidebar .widget. Se for apenas uma borda superior ou inferior é mais fácil: coloque como background de .sidebar .widget e especifique a localização da imagem (top ou bottom).

Lô disse...

olá ariane,

sou novata no assunto, e tudo o q aprendi foi aqui com vc.
só q agora naum estou conseguindo separar e colocar cor nas sidebars..não seio o q estou fazendo de errado..na minha html aparece isso:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

ai eu fiz isso:

.sidebar. widget{
margin: 0px 0px 20px 0px;
padding:20px 5px 20px 15px;
background: #666666;
border: 2px solid #666666;
}


.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

mas naum tah dando certo..queria muito q aparecesse uma margem cinza ao redor das sidbar e a cor cinza no titulo delas..

Por favor me ajuda!!??

bigada

Ariane disse...

você não deixou acesso ao seu blog mas pelo que entendi do código que colocou aqui o erro está em .sidebar .widget (no exemplo que colocou aqui está .sidebar. widget, ou seja, o ponto está logo depois de sidebar e o correto é .sidebar(espaço).widget

Ana Paula Ruggini Zarpelon disse...

O post me ajudou muito, valeu pela dica.

Charles disse...

Ótimo o post!
Mas, queria saber como eu tiro essa imagem de fundo da widget?
http://d.imagehost.org/0951/blog_10.jpg

Ariane disse...

Charles, não dá pra responder sem ver o código, mas me parece que não houve separação entre os widgets da sidebar e de main. deve estar assim:

.sidebar .widget, .main .widget{aqui o background}

se for o caso, apaga o .main .widget

Charles disse...

Ariane,
obrigado pela ajuda, mais não resolveu. Tentei de outra maneira e consegui, coloquei assim:

.main .widget-content {
background: #e9e9e9;
}


...só adicionando esse código pude concertar o problema, pensei na relação que tinha as widget, sendo que a url de fundo estava ligada ao widget-content, então adicionei dessa maneira...
Obrigado!

Daufen Bach disse...

Ariane,
no blog, tenho duas sidebar... uma a esquerda outra a direita, com larguras diferentes... e toda vez que mudo a configuração de uma, mudo da outra, queria torna-las independentes, como faço?

se puder me ajudar, agradeço!

daufen bach.

Anônimo disse...

suas dicas são ótimas, parabéns :)

Pri Santander disse...

Oi Ariane!
Gostaria da sua ajuda!
Tirei a bolinha do marcador do meu blog, mas o recuo para a direita continua, assim os marcadores não ficam alinhados com o titulo, tens alguma dica?! Tentei centralizar pelo html, mas não consegui!
Obrigada!

Alaíne Costa disse...

oi, ariane, estou tentando criar meu 1º blog, suas dicas são muito úteis mas há um problema: eu uso o modelo do novo blogger por isso mta coisa é diferente e eu ñ consegui achar o código da sidebar-wrapper, pensei em add mas ñ sei onde e qnd tento ñ dá certo, por favor me dê uma luz!! acabei de virar sua seguidora, e desde já agradeço a ajuda q já me deu. bjss

Alaíne Costa disse...

oi de novo, tentei ser sua seguidora mas ñ consegui pois ñ tenho facbook acho q vou fazer.

Alisson Lopes disse...

boa noite! Aline não consigo inserir nada no meu blog, faz tanto tempo que eu procuro por algo q me ajudasse nesse aspecto mais nada tenho conseguido.... me ajude, porque eu não consigo inserir!!??!

Franklin Sousa disse...

Olá amigo, tentei fazer isto apenas para reduzir a distancia entre os widgets, mas não achei o trecho no blog.
Poderia me ajudar?

http://psbitabuna.blogspot.com/

Ariane disse...

Pri procura por text-indent e deixa valor 0px

Layla as dicas deste tutorial não valem para os novos modelos do blogger

Alisson sugiro que você procure ajuda no fórum de ajuda do blogger.

Franklin você usa um modelo novo do blogger, então as dicas do tutorial não se aplicam. Para o modelo que você usa, você deve colocar o seguinte trecho, antes de body{

#sidebar-left-1 .widget{margin: 10px 0px;}
#sidebar-right-1 .widget{margin: 10px 0px;}

eu coloquei o valor de 10px só para ilustrar. O primeiro valor depois de margin (10px) refere-se a distância entre um widget e outro (para cima e para baixo) e o segundo valor, distancia para os lados. Aumente e diminua os valores e vá visualizando até ficar do jeito que você quer.

Michel Alves disse...

Ariane, vc pode me ajudar? No HTML do meu blogger eu não acho o #sidebar-wrapper {

Ou seja, não consigo botar uma imagem no fundo da minha Side Bar, eu quero muito mudar mas não consigo! Será que você pode me ajudar? Se puder me mande um e-mail: m.cam99@hotmail.com

Abraços

Daniel disse...

Posso colocar o código: .sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em; }

no CSS? Me ajuda hoje Ariane por favor, eu vou mudar o estilo do meu blog e quero separar postagens dos gadgests e nao consigo!

Lucky disse...

Olá Ariane, eu gostaria de saber como ajeitar algo que aconteceu no meu Blog de testes onde estou criando um template em base dos tutoriais.... Aqui como pode ver : http://lucascoelhotst.blogspot.com/ as sidebars se separaram mas ficaram entre elas a cor de continuação do fundo como eu faço para a cor parar entre o fim de cada sidebar?

Unknown disse...

Ótima dica foi de muito valor para meu blog....

Postar um comentário

Os comentários são moderados.