27 maio 2013

Área de Postagem Personalizada



Oie, tudo bem com vocês leitores fofos? :3
Eu estou bem, apesar de estar cuidando de uma gata que está doente;
Acabei de voltar de São José, estava na casa do amigo do meu irmão, sinceramente, estava no meio de um bando de doentes. '¬¬

Então, hoje vim trazer um tutorial que acho que vai ajudar muitas de vocês, ele personaliza sua área de postagem. Eu tinha pegado o código todo que eu fiz no blog de testes e ia apenas passar a vocês explicando oque apagar e oque colocar; Mas como sou muito boazinha, vou explicar tudo direitinho em várias partes.
Sabem aquela borda que tem em vários blogs na área de postagem? Uma que no Kawaii World é em hover? Então, eu não consegui fazer ela em hover ainda, mas consegui aplicar ela.
Então, vamos logo ao tutorial neh? Da até uma agonia ficar aqui falando e olhando para o Editor do Blogger com um monte de coisas escritas. Fico sentindo que ninguém vai entender T^T

Vá em seu html e procure por /* posts.
Ao encontrar, vai estar mais ou menos assim:

No meu html a linha ''h3.post-title {" está numerada como 298.
Desça e vá até a linha /* comments então, veja o número também.

E a linha ''margin: .2em 0 0;" está no número 357, e ela fecha no número 358.
Portanto, apague da linha 298 até a linha 358.
Ficando assim:

Agora, em baixo da linha que tem (-------), do código ''/* Posts" coloque o seguinte:

h3.post-title {  margin-top: 20px;}
h3.post-title a {  font-family: 'Verdana'; /* Fonte do título do post */font-size: 26px; /* Tamanho da fonte */  color: #B09CB8; /* Cor da fonte do título do post */}
h3.post-title a:hover {color: #fff; /* Cor do título do post hover */background-color: #B09CB8; /* Cor de fundo do título do post em hover se n quiser apague */  text-decoration: ;}
.main-inner .column-center-outer {border-top: solid 6px #B09CB8; /* Borda do topo da área do post */border-bottom: solid 6px #B09CB8; /* Borda do footer da área da postagem */-webkit-border-bottom-left-radius: 5px; /* Bordas arredondadas */-moz-border-radius-bottomleft: 5px; /* Bordas arredondadas */border-bottom-left-radius: 5px; /* Bordas arredondadas */background: #ffffff none repeat scroll top left;_background-image: none;border-radius: 5px;  /* Bordas arredondadas */box-shadow: inset 0 0 20px #9C9C9C, 0 0 3px #EEE8CD; /* Sombra interna da área de postagem */}.post-body {  line-height: 1.4;  position: relative;}
.post-header {border-top: dotted 1px #d9d9d9; /* Linha abaixo do título do post */  margin: 0 0 1em;
  line-height: 1.6;}
.post-footer {  margin: .5em 0;  line-height: 1.6;}
#blog-pager {  font-size: 140%;}

Então, salve. Fim. Sua área de postagens está personalizada.
haha' xoxo

18 comentários:

  1. Aaah ! Muito obrigada ♥ Estava procurando este tutorial O3O

    blogtudoparaphotoscape.blogspot.com.br

    ResponderExcluir
  2. Valeu, eu só tirei as bordinhas certo? Deixei o arredondado e a sombra.

    ResponderExcluir
  3. Já fiz e deu super certo! Obrigada, bjs.
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  4. Você me ajudou muito linda, parabéns pelo blog e sucesso!

    www.entreladies.com

    ResponderExcluir
  5. Que coisa mais linda!!!! Meu blog ficou uma fofura!! Muito obrigada!

    ResponderExcluir
  6. Não entendi nada kkkkkk a burrice no html não deixa eu compreender rsr!!! tem como postar modelos prontos para o rodapé da postagem

    ResponderExcluir
  7. AMEII!
    Me ajudou muito *-*
    http://mythings2.blogspot.com.br/

    ResponderExcluir
  8. Eu nem acredito que consegui! Nao conseguia de jeito nenhum centralizar o titulo do post.
    Obrigada amores! ♥♥♥
    http://natalibispo.blogspot.com.br/

    ResponderExcluir
  9. Que blog mais liindo *-* http://vihpaula.blogspot.com.br/

    ResponderExcluir
  10. Este comentário foi removido pelo autor.

    ResponderExcluir
  11. gooooossssstttteeeeeiiiiiiii valeu ai

    ResponderExcluir
  12. Este comentário foi removido pelo autor.

    ResponderExcluir
  13. Amei o seu tutorial, me ajudou muito :3


    guardeiparamim.blogspot.com.br/

    ResponderExcluir

Página Anterior Próxima Página Home