27 de junho de 2012

Tutorial for your blog: Retirando as bordas do template viagem, e deixando a borda arredondada!


 Olá meus bolinhos de baunilha haha, tudo bom com vocês? Bom, esse é meu primeiro tutorial sobre blog (HTML), mas talvez vocês já tenham visto algum tutorial parecido, mas é o seguinte, eu tirei a borda do tamplate viagem com o tutorial da Pink pimenta, e coloquei as bordas arredondadas com o tutorial da Cherry bomb, mas os posts do meu blog ficaram todos juntos, não tinha aquele espaço para separar eles, ai vem o problema.
O código para arredondar as bordas era assim:

-moz-border-radius: 10px; /* Para Firefox */

-webkit-border-radius: 10px; /*Para Safari e Chrome */

border-radius: 10px; /* Para Opera 10.5+*/

Clique em "Leia mais", para continuar a ver esse post :)


E tinha que colocar esse código no abaixo de onde começa esse outro código:

.main-inner .column-center-outer {

Até aqui, tudo bem. Só que, como as postagens ficaram juntas eu tinha que separar, ai lá vou eu procurar. "Separar postagens". Eu achei no blog da Pink pimenta,  e  vi que tinha que tirar o código .main-inner .column-center-outer {  e as duas seguintas linhas que tinha abaixo dele, para substituir, por este código:

.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;
}

Mas eis que vem o problema, eu tinha que colocar esse código no lugar aonde eu coloquei o código de arredondar as páginas, e eu queria minhas páginas arredondadas, mas eu ai eu fucei o HTML, e coloquei o código de arredondar as bordas junto com o de separar postagens. E TCHANA, eis que eu consegui, arredondar as bordar e deixar os posts separados ao mesmo tempo.

 Agora sim, depois de eu ter exclarecido tudo, podemos começar.

Tire as bordas do template viagem no tutorial da Pink pimenta

Vai no seu painel do blogger, clique em Modelo, e editar HTML, aperte Ctrl+f, e procure por .main-inner .column-center-outer {  ele vai estár mais ou menos assim:

.main-inner .column-center-outer {  

background: $(post.background.color) $(post.background.url) repeat scroll top left;

_background-image: none; 

}

Apague tudo essa parte, e substitua por esse código:


.post-outer {
background: #FEDEC3; /* Fundo da postagem */ -moz-border-radius: 10px; /* Para Firefox */
padding-top: 4px; /* Espaço do topo */  -webkit-border-radius: 10px; /*Para Safari e Chrome */
padding-left: 5px; /* Espaço da esquerda */ border-radius: 10px; /* Para Opera 10.5+*/
padding-right: 5px; /* Espaço da direita */
margin: 5px 3px 25px;
}

Visualize antes de salvar, se estiver tudo certo, salve.

P.S: Esse código de separar os posts e de bordas arredondadas eu peguei no blog da Cherry bomb, e da Pink pimenta (créditos a elas), eu só tentei juntar os dois e deu certo então, é isso.

Se der algum problema, e não funcionar me avisem :)

Xoxo, obrigada por tudo ,e até mais.



 





Nenhum comentário:

Postar um comentário

Deixa aqui seu comentário, com sugestões ou criticas, mas seja gentil ♥

LinkWithin

Related Posts Plugin for WordPress, Blogger...