04 janeiro 2013

Tutorial: Bordas coloridas no blog

Hello ^^

Antes do tutorial, queria avisar que o blog desconfigurou e eu consegui arrumar ele rapidinho. Infelizmente não estou conseguindo colocar a Bruna como postadora aqui no blog. Ta dando erro, e por enquanto eu não arrumar isso, apenas eu vou ficar postando aqui. E ainda foi apagada uma postagem do blog, no qual foi a primeira postagem da Bruna. Desculpem qualquer coisa.

Vamos lá?


O resultado vai ser esse.
Na área de posts.

- Modelo > Editar HTML >  f3 > .main-inner .column-center-inner {

- Após { cole o código que preferir.

Borda no começo
border-top: 5px solid #000000;
Borda no fim
border-bottom: 5px solid #000000;
--><--><--><--><--><--><--><--><--><--><--><--><--><--

Bordas na barra lateral do blog.

No seu HTML, procure por: .sidebar .widget { e abaixo do código, cole:
border-bottom: 10px solid #d4d4d4;
Entenda o código:

border - é o comando de borda.
bottom - deixa a borda no fim do gadget.
10px - tamanho da borda. Altere o número para aumentar ou diminuir a borda.
solid - é o tipo da borda.
#d4d4d4; - é a cor da borda.
A explicação serve para os outros códigos.

Beijos

4 comentários:

Debbie disse...

Adorei eu vou testar aqui pra ver como vai ficar no meu, hihi' e se eu vou conseguir fazer, rs mas parece fácil ! muito util fica fofo ><

siteiloveit.blogspot.pt

Vicky ∞ disse...

Flor, como você separa suas postagens? rsrs É que no meu é por outro código, daí fica diferente. Mas enfim, adorei o tuto, eu uso ele bastante.

Bjs
garotas-cupcakes.com

Cristielen Camila disse...

ótimo tutorial!
Beijos;*
Visita?
girlonlline.blogspot.com.br

Elisa Cardoso*-* disse...

ameeei e e concerteza vou usar no meu proximo layout.Bem,estou separando tutos beeem legais para meu prox. layout,e concerteza,esse eu vou usar.Flor,tem como ensinar a por menu acima do cabeçalho
????
Clica no meu nome e vai no meu perfil,bjs e bom final de semana.Deus te abençoe.