Existem vários modos de mudar o visual do blog somente utilizando o estilo CSS um deles é colocar ou alterar as bordas. Esse código é bem simples e pode se usado em qualquer lugar, serve inclusive para fazer botões quando combinados com uma cor de fundo, além disso podemos usar para colocar bordas nas postagens, menus e qualquer outra coisa no blog. O código das bordas deve ser moficado pela página editar HTML, agora vamos entender melhor esse código:
border: 1px solid #0000FF
1px é a largura
solid é o estilo
#0000FF é a cor
Por exemplo para colocar bordas nos link procure por:
a:link, a:visited {
color:#0000ff;
text-decoration:none;
}
e coloque border: 1px solid #0000FF, dentro das chaves, deixando o código assim:
a:link, a:visited {
border: 1px solid #0000FF;
color:#0000ff;
text-decoration:none;
}
Logo abaixo você pode ver outros exemplos de bordas e alterar como quiser a largura, estilo, cor e se precisa aqui tem o código das cores.
border: 2px dotted #000000
border: 2px dashed #000000
border: 1px solid #0000FF
border: 4px double #FF0000
border: 3px groove #6666FF
border: 4px ridge #FFFFCC
border: 3px inset #FFFF99
border: 2px outset #6699FF
72 comentários:
muito interessante aqui!
mas onde eu ponho esse codigo, no template ?
beijo :*
Keloane Mendes
você tem razão esqueci de mencionar onde usar esse código, mas já fiz a correção na postagem.
para mexer nesse código das bordas você deve ir na pagina editar html
gostaria de saber se é possível colocar uma mensagem ao lado do cursor, aquando se entra num blog. ficaria grato pela informação e continuação de bom trabalho. o seu espaço é-me muito útil!
Olá, estava fazendo uma revisão dos meus blogs parceiros e vi que meu blog não está linkado aqui e o seu continua lá. Se ainda quiser manter a parceria me avise ou tirarei seu link do meu.
Obrigada.
Ah! esqueci de dizer, o blog é O Paraíso do Amor e foi vc quem sugeriu a parceria.
Bjobjo
você sabe como faz pra colocar uma imagem na borda? Em vez d bordas coloridas, normais. No meu blog eu gostaria de colocar uma imagem na borda da coluna central. Abraços
muito obrigado!!!
Ótima dicas gostei muito
mais que tal uma >>parceria<<
http://pontodedicas.blogpot.com
eu acho que já tenho o banner do
CIDADE WEB
só falta o DICAS PARA BLOGS
ok
Valeu fui
http://pontodedicas.blogpot.com
olá, gosto muito desse blog, tem sido muito útil!!
linkei vc!
continue sempre assim auxiliando blogueiras q nem eu!!
um abraço
Elis
Olá! Amei essas dicas! Você como sempre está de parabéns!
Bjão♥
Muito legal jah usei varias vezes em orkut
mas eu queria bordas para mim colocar no meu blog tipo assim
sabe quando procuramos um recado para orkut?
ai embaixo da figura tem uns codigos para ser copiado e colado na pagina de recados de alguem entendeu?
ai eu queria colocar no meu blog alguns recados para orkut e queria colocar o codigo dentro da borda
ai vai o link do meu blog
http://janyjandre.spaces.live.com jah coloquei umas barrinhas mas não é do jeito que queria me ajuda ai por favor des de jah agradeço
Nao consegui usar este codigo, ele acabou alterando o layout do site. onde deveria inserir este codigo exatamente? Grato pela atencao
você precisa entender um pouco de CSS pra mexer com esses códigos, depedendo de onde você colocar ele altera o blog inteiro, por exemplo se colocar o código da borda junto com .main{...} vai colocar um borda na parte das postagens, se colocar
img{código da borda} todas as imagens ficaram com essa borda e assim por diante, sugiro criar um blog para teste.
oi! godtaria de saber como clocar bordas apenas nas imagens das postagens?
É muito bom o seu bloq. ha eu coloquei seu link no meu blog se der coloque o meu pois ainda esta em faze de crecimento!
Valeu!!
Pedro H.
para colocar borda nas imagens das postagens entre na pagina editar html e coloque esse código junto com os outros
.post img{border: 1px solid #0000FF}
claro que a cor tamanho e estilo são apenas exemplos você pode usar do jeito que quiser.
Obrigado! Foi muito uteo!Ha so pra lenbra coloquei um bannerdeste blog!Vc poderia colocar o meu aqui?
Meu blog esta en faze de desinvolvimento epreciso de mais leitores, pois seu blog é muit bom!
Pedro H.
Pedro H.
vou colocar seu banner.
Oi!Queria um favor(se for possivel) colocar no blog a caixinha "Posts Relacionados"ou "Veja mais"
no blog porque faz com que o leitor veja posts parecidos...
Se der um codigo bem esplicado pois ja vi codigos orriveis, que sei que vc nao faz!
Pedro H.
Pedro H.
os posts relacionados você poderia colocar os links manualmente, quando ao "leia mais" eu também vi essas explicações e acho que é trabalho demais, vou procurar alguma forma mais simples de fazer se encontrar publicarei em breve.
Fabiano:
Como novato "nível 2", que já me acho; o Dicas para Blogs é outro acho sem igual em simplicidade e funcionalidade!
Parabéns!
Fabiano, boa tarde!
Seria possível explicar exatamente como colocar bordas somente nas postagens???
Grato e parabéns pelo blog!
Abraço
Fabrício Ferraz
na pagina editar html coloque assim:
.post{border: 2px dashed #000000; padding:4px}
claro que usando o estilo de borda que gostar mais.
o padding:4px é para o texto não ficar encostado nas bordas
Fabiano,
Ficou show de bola as bordas...
É possível colocar tb nos gadjets???
Obigado!
fizemos uma publicação hoje sobre como personalizar os gadgets
http://www.dicasparablogs.com.br/2009/07/barra-de-rolagem-em-qualquer-parte-do.html
Fabiano, bom dia!
Ficou legal, mas só que o título tb rola junto com os demais.
É possível o título ficar parado e somente as notícias rolarem???
Grato mais uma vez.
Caso queira entender melhor, dê uma olhada.
http://fabriciopoliticani.blogspot.com
Fabrício Ferraz
obrigado pela idéia, já achei um jeito de fazer como você diz, veja novamente a postagem agora tem como deixar a barra somente no conteúdo do gadget, se puder deixe um comentário lá.
Olá, gostaria de saber se tem como colocar imagem nas bordas do blog, já procuro faz um tempo mas não encontro nada falando sobre isso. Desde já agradeço.
binha
para colocar bordas nas imagens entre na pagina editar html e coloque img{..} com o código da borda que desejar, mas usar isso pode gerar problemas pois aparecerá a borda em todas as imagens.
pode usar assim .post img{....} que a borda ficará somente nas imagens das postagens
Oi fabiano, tudo bem?
Como faço para colocar uma borda no texto que escrevi na barra lateral...não acho o texto no HTLM, mas consigo por as bordas, brigadão
Sandra para colocar bordas somente em um gadget veja aqui
http://www.dicasparablogs.com.br/2009/07/barra-de-rolagem-em-qualquer-parte-do.html
eii!!!! vc pode me explicar como mudar o estilo das bordas das colunas e do post do tamplate... é possível ou é só uma ilusão minha?
porque me parece que eu já vi em alguns sites, as colunas diferenciadas, tipo: umas arredondadas, outras retangulares como esses sites aqui por exemplo:
veja:
http://k2filmes.net/
http://www.baixandolegal.org/
http://www.baixarfilmesgratis.net/
http://www.baixarfilmeseseries.com/
http://www.justfilmeseseriados.org/
http://www.linkagratis.net/
note que alguns tem as bordas superior ou inferior das colunas arredondadas ou retangualdas e outros é corpo do template ("post")
vc poderia postar um tutorial de como fazer isso?.. acho que não é só eu que tenho essa dúvida... é eu os 95% de blogueiros que nao sabem como fazer isso...
obrigado pela sua atenção..
abraçoss
jl.martinns@hotmail.com/
essas bordas arredondadas são feitas com imagens de fundo, vou preparar uma postagem explicando como fazer
Fabiano Roberto,
em primeiro lugar quero agradecer por vc estar disponibilizando ajuda! Estou amando suas dicas, porque não entendo NADA (entenda NADA como NADA mesmo!!!). Confesso que fico confusa as vezes só de ler o que escreveu... rsrsrs tantos códigos, que me deixam um pouco perdida (um pouco não, completamente!) Mas estou tentando deixar meu Blog com a minha cara! Comecei montando o blog apenas para divulgação do meu trabalho com festas, mas confesso que leio tanta coisa interessante, que gostaria de compartilhar muitas outras informações, e aí, acabei transformando o blog num "cantinho"! E estou parecendo uma "adolescente" por causa disso! A cada passo alcançado fico meio abobada... kkkkk Tenho como colocar uma separação entre postagens sem ser uma linha? Ou melhor, uma linha de coraçõezinhos? rsrsrs Pode me ensinar? Obrigada!
Simone Aline
para colocar imagens separando as postagens use esse código:
.post{padding-bottom:30px;background-image:url(http://img169.imageshack.us/img169/8464/divisao.jpg);
background-repeat: no-repeat;
background-position: center bottom;}
apenas troque o endereço da imagem e o espaço vazio no final da postagem(padding-bottom:30px)
Olá, Fabiano!
São ótimas as suas dicas, mas eu queria fazer exatamente o contrário. No meu template, todas as imagens que coloco em postagens já saem com borda e eu queria que as imagens saíssem sem borda nenhuma. Será que tem como fazer isso?
Muito obrigada!
Laurinha
para retirar as bordas apague o trecho ou coloque border:none;
Gostaria de saber se tem como alterar a linha tracejada por uma linha solid ou por uma img?
Obrigado!
ola, gosto muito do seu blog e me ajuda semre q estou no sufoco, muito obrigada, mais estou com uma duvida, estou querendo colocar borda no meu blog e tirar a que esta, mas como o código é completamente do blogger o que eu faço, ja tntei por este código mais não funciona, o nosso servidor é : http://www.e-familyblog.com/
meu blog é esse:http://sumello.e-familyblog.com/
gostaria muito que vc esplicase pra mim onde colocar esse código especifico, não consigo por, agradeço desde ja. abraços
Sumello
se tiver duvidas sobre onde está o código da borda no seu modelo use o ctrl F para achar border e faça uns testes modificando os valores ou cores para achar o lugar certo.
Jairo Borges Martins de Sousa
tem que achar o código dessa borda solida e trocar a palavra solid por dashed
Fabiano, como faço para colocar uma borda em torno de todo o blog, só deixando o background de fora?
coloque o código da borda no estilo #content-wrapper{....
Olá.. td bem??
gostei muito do blog e acabei de conhece-lo, através de outro blog, o scrappinblogs.blogspot.com.
Gostei muito e pretendo aprender muito com este blog, porém tenho uma duvida.
Ao colocar o fundo de natal como o blog indica, adicionando uma nova gaget do Hmtl, até deu certo, porém o codigo do novo fundo fica aparecendo...Por que isso acontece, já qe segui todo o esquema? O codigo não deveria ficar oculto? Ai com o não encontrei o erro..deixei o blog assim mesmo..
Cristiane Munhoz
a imagem de fundo não é para colocar como gadget.
entre na pagina editar html procure por body{.... } e coloque dentro das chaves background-image: url(endereço da imagem);
se já tiver algo assim apague e coloque esse no lugar, verifique se o endereço da imagem está correto
http://www.dicasparablogs.com.br/2009/07/imagem-nao-aparece.html
Fabiano como que faz isso colocando ao invez nos links colocando nas colunas?
Lucas Bercke
para colocar as bordas nas colunas procure o código
#main{...
#sidebar{....
e coloque o código das bordas dentro das chaves, main são as postagens e sidebar a coluna, talvez seu blog tenha nwesidebar que seria uma terceira coluna
Olá querido Fabiano Roberto,
há quanto tempo não passo aqui...
Ou melhor, eu VIVO aqui!!!! mas há tempos não deixo um recado ou te "alugo" com meus pedidos...rsrs
Por isso estou passando apenas para deixar um bj e desejar um 2010 maravilhoso pra vc! Que Deus te abençoe e te conserve assim bondoso, sempre! E obrigado por disponibilizar suas dicas para nós! Acabei de colocar essas linhas separando minhas colunas lá no blog, por isso estou postando aqui! Bjks e até
Simone Aline
Como eu tiro a borda que fica em volta do blog, que engloba tudo??
desculpe , mais eu nao entendi direito! e em que lugar do codigo do modelo CSS da pagina de editar html? e que tem monte de lugares disponiveis para alterar essas bordas! e eu tenteid e tudo e nao conssegui, me ajuda ! e muito serio e que eu preciso destacar mais o meu blog pra ficar mais daora!
o lugar onde colocará o codigo das bordar depende de onde quer que elas apareçam
Tudo o que eu estava procurando acabei de encontrar aqui na sua postagem. Até os estilos de borda com seus nomes em inglês! Perfeito! Muuuuuuuito bom mesmo! Obrigadão e parabéns!
Como faço para colocar uma borda no meu blog, como se fosse uma caixa na sidebar e nos post???????
aguardo a resposta!!!!
Roneide Sousa
GeoMática
para usar as bordas nas postagens entre na pagina editar html e coloque o código da borda junto com o estilo #main, para fazer o mesmo no menu, faça na parte #sidebar.
E ai fabiano consegui colocar a distancia entre as colunas que te perguntei(Muito Obrigado), mas agora eu gostaria de colocar borda nas tres colunas (esquerda, a do meio e a direita), tentei colocar de todo jeito mas n consegui(POR FAVOR ME AJUDE)
Meu template das tres colunas :
#main-wrapper {
width: 410px;
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-wrapper {
width: 180px;
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 */
}
#newsidebar-wrapper {
width: 200px;
float: left;
margin-right:50px;
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 */
}
Desde já agradeço. Sucesso. Abração!
Sport Made , só precisa colocar border:1px solid #000000; em cada um dos 3 trechos de códigos(main-wrapper, sidebar-wrapper, newsidebar-wrapper) que mostrou aqui.
veja como formatar as bordas
Colocar ou alterar as bordas
Oi não sei se falo aqui mas tudo bem... é o seguinte, aconteceu uma desconfiguração no meu blog, claro que de teste que depois faço no outro final. Sobre o draft.blogger, repara que eu uso esse tema que arredonda o template, e fica no firefox e outros, contudo no IE nao fica mais... eu falei nao fica mais. Simplesmente saiu isso... já apliquei o tema novamente no blog de teste e gostaria que ficasse certo, inclusive as bordas nas postagens estão cortadas na direita. Nos outros navegadores está ok só pra lembrar... Será que com código resolve, será que o modelo para o o IE é assim agora. Meu blog teste é: andremfa.blogspot.com
Obrigado
os modelos no blogger in draft podem apresentar falhas afinal são novos, você poderia escolher outro modelo pq consertar o atual é meio complicado, provavelmente precisar editar o CSS e fazer alguns testes.
Oi. Pois é achei que seria teoricamente fácil isso... outros modelos também estão assim. O problema eu não sei qual foi, antes ele tava certo, coisa do modelo deles agora provável. Mas o curioso é que porque funciona nos outros navegadores, uma coisa tambem é que a maioria das pessoas do meu blog visualiza no IE. De toda jeito eu tento com alguma dica sua ae no blog que ainda não li. Obrigado Fabiano.
Anonimo, qual o link do blog que está com esse problema?
Prezado Fabiano: Gostaria de colocar bordas ou molduras dentro do meu blog, mas apenas nos gadgets que criei. Criei um para notícias com link direto de outro site, e é nele que desejo colocar uma borda.
Gostaria de saber tb como colocar bordas apenas nos nomes dos gadgets, por exemplo: seguidores, marcadores, arquivo do blog, sites amigos, adicione aos favoritos, visitantes. Não desejo estender as bordas para a parte do texto nem dos comentários.
Se desejar visualizar, www.vascaoamoreterno.blogspot.com
Abraços.
Carlos.
Carlos Vascaíno
entre na pagina editar html e coloque o código da borda no estilo h2{...}
Oi Fabiano... Já procurei em outras ocasiões e não consegui nunca encontrar esse código #content-wrapper. Tem um outro código que o substitua?
Me diz próximo de onde ele se encontra, por favor.
Beijinho meu filho
Esqueci de dizer... Quero colocar borda em torno de todo o blog.
Tem como né?
+Beijinhos
Natália
entrei no seu blog e já vi umas bordas nas postagens e sidebar era isso que você queria fazer ou tem algo mais?
Fabiano... antes de tudo gostaria de dizer que sou muito grata por tudo que tens feito por mim... alías, por nós os quase 6.500 seguidores teus. Ainda posto um texto sobre vc e o "dicas para blog". Me aguarde...
O que quero colocar é uma borda em torno de todo o blog como uma pequena moldura, ou vc acha melhor uma imagem de fundo?
Vou te enviar por email uma imagem simulando o que seria ok?
Beijinhos
Natalia, seu blog já tem bordas, poderia usar uma imagem de fundo, acho que ficaria legal
Funcionou direitinho.
Estava procurando as bordas a Bastante tempo.
Obrigado
oi...rsr
boa tarde!
como posso colocar bordas nos widgets da Sidebar e Borda no Main?
Valeu !
Bjocas
Sih
Falando Sério
veja aqui como personalizar as postagens ou colunas: Colocar Barra de Rolagem nas postagens
Bom dia Fabiano, você sabe me dizer como eu poderia tirar essa faixa cinza ao lado do cabeçalho do meu blog?
Obrigado.
aquela faixa é esse código
.tabs-outer {
overflow: hidden;
position: relative;
background: #ffffff url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png) repeat scroll 0 0;
tem que apagar o trecho url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png)
se achar isso em outra parte do html faça o teste e apague também
Obrigado pela ajuda e pelas dicas Fabiano, já retirei a faixa. Valeu!
Olá Fabiano, gostaria de saber qual o código para deixar barra de rolagem na janela do blog? como se ela fizesse parte do template, procurei nos comentários mais não consegui encontrar nada a este respeito, abraços
Maysa
Esmaltes e Ponto
não entendi sua duvida a barra de rolagem na pagina é automatica, não precisa colocar código, só verifique se no seu html tem overflow: hidden isso oculta a barra de rolagem, se tiver você pode apagar ou trocar a palavra hidden ou auto
Postar um comentário