Hoy Gente, como estão nesse Domingo? A pedidos da minha amiga Luly (www), no Tutorial de hoje nós vamos aprender a separar as postagens do Blog e deixá-las com as bordas arredondadas.
Parte dos códigos deste tutorial é do Pink Pimenta, e a outra parte é minha mesmo. Quem estiver curioso, clica ai para ver o resto!
No Painel do Blog, vá em Design - Editar HTML - Ctrl+F e pesquise por .main-inner .column-center-outer {
Você encontrará algo parecido com isso:
.main-inner .column-center-outer {background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image:none;}
Apague tudo e troque pelo código abaixo:
.post-outer {background: #fff; /* Fundo da postagem */padding-top: 4px; /* Espaço do topo */padding-left: 5px; /* Espaço da esquerda */padding-right: 5px; /* Espaço da direita */<margin: 5px 3px 25px;}
O Código acima irá apenas separar as postagens do seu Blog, mas ainda não deixará as bordas arredondadas, para arredondar, acrescente o código abaixo antes da chave } que fecha o código:
border-radius: 20px;
Prontinho, as suas postagens já estão separadas e com as bordas arredondadas. Espero ter ajudado a Luly e a todos vocês também! Até mais pessoal :)
Que legal o tutorial! Uso ele mas sem as bordas arredondadas, fica mesmo lindo né? Bjão
ResponderExcluirQue legal o tutorial. Talvez eu use, mas gosto das postagens juntinhas mesmo.
ResponderExcluirthe-rain-will.pass.blogspot.com
É um ótimo tuto Alex, fica muito lindo ♥ Combinou muito aqui com o POF ;]
ResponderExcluirNhaac:3 |Viciadas em Cupcakes
oii.
ResponderExcluirtudo bem? vim aqui te pedir um favor mt importante pra mim.
queria q vc votasse no meu blog oblogdapp.blogspot.com em um concurso que estou participando!
para votar no meu blog, siga esses passo XD :
---> vá no meu blog e na direita dele tem um retangulo dourado escrito TOP BLOG. clique nele e vote!
ah, e se puder vote mais de uma vez com outras contas que vc tem (como por exemplo outro email, facebook e twitter).
OBS: se vc votar em mim com um email, vá na sua caixa de entrada no email q vc votou e confirme o voto ok?
PFV, ME AJUDE A VENCER COM SEUs VOTOs!
bjs =D
Ah, não acredito que você postou! Com certeza eu vou usar nos próximos layouts. Ficou suoer bem explicadinho e eu entendi super bem, e você tem precisa ter dito que fui que eu pedi, Alex! Obrigada mesmo, vai me ajudar muito. E pode deixar que eu credito o blog. Um beijo!
ResponderExcluirthe-zombie-attack.blogspot.com
Adorei o tuto! Super útil..
ResponderExcluirTô seguindo, amei o seu blog! Retribui? Tem selinho pra ti lá no blog.. Beijinhos
http://neerd-priincesa.blogspot.com.br/p/selinhos.html
Tuto super útil! Seu blog é lindo, primeira vez que vejo um blogueirO!^^
ResponderExcluirhttp://planetfashiong.blogspot.com.br/
achei o tuto útil e bem legal.
ResponderExcluirhttp://sonhosdeegelo.blogspot.com.br
Nossa, ótimo e simples! Eu não sei se vou utilizar, mas ficou a dica. Já deixei até guardadinho o código. HSUAHSAUHSUAHS Beijos seu lindo, <3
ResponderExcluirJá que eu sou muito abusada, queria pedir pra você recomendar o meu blog ):
ResponderExcluirOs dois tutos deixam o blog mais fofo *--* Bem úteis, acho que vou usar o de separar postagens no próximo lay.
ResponderExcluirKissus ----> Blog Bola de Chiclete.com *--*
muito bom o tutorial!!! fica lindo!
ResponderExcluirspaziodm.com
Arrasou, adoro esse tutorial Alex!
ResponderExcluirSó que eu prefiro quadradinho mesmo hihi'*-*
Beijos,
http://quinzedilemas.blogspot.com.br/
Adorei o tuto Alex!! Beijos
ResponderExcluirhttp://pepper-of-rock.blogspot.com.br/
Ainda não conhecia o tutorial Alex! Achei bem bacana e é super simples.
ResponderExcluirrosaschiclete.blogspot.com
Adorei o tutorial !
ResponderExcluirFica muito lindo !
Nhaac ~~> www.piinkrock.tk
Muito útil o tutorial, fica muito bonito no final. Você aceita ser me afiliado? Se aceita me avisa.
ResponderExcluirhttp://blogger-boysattitudes.blogspot.com.br/
Fica lindo!
ResponderExcluir# ------> A garota de Preto
Adorei Alex! acho que ja vou usar *u*
ResponderExcluirbeijos ~> magic-touch.tk
Muito bom o tutorial . Acho que vou usar no meu próximo layout :)
ResponderExcluirhttp://bugigangazdanet.blogspot.com/
Já fiz um tutorial desses lá no WC, é sempre bem-vindo não acha?
ResponderExcluirUm beijo,
http://www.world-cutest.blogspot.com.br/
imperfeitanostagia.blogspot.com
Está aceitando parceria?
ResponderExcluir--> http://meninoridiculo.blogspot.com.br/
ai que lindoooo amei as bordas
ResponderExcluirO meu fica transparente
ResponderExcluiro meu nao esta dando certo de jeiito nenhuum' :/
ResponderExcluirAjudou muito *-* Obrigada
ResponderExcluirhttp://glamourmeninas.blogspot.com.br/
ResponderExcluirMe visite,ajudou muito, obg!!!
Adorei! Mas a data fica fora da "caixa". Sabe como arrumar?
ResponderExcluir