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
haha' xoxo
Aaah ! Muito obrigada ♥ Estava procurando este tutorial O3O
ResponderExcluirblogtudoparaphotoscape.blogspot.com.br
www.livrosvsseries.com
Excluirwww.livrosvsseries.com
ExcluirValeu, eu só tirei as bordinhas certo? Deixei o arredondado e a sombra.
ResponderExcluirobrigada
ResponderExcluirJá fiz e deu super certo! Obrigada, bjs.
ResponderExcluirminhas-confissoes-2012.blogspot.com
Você me ajudou muito linda, parabéns pelo blog e sucesso!
ResponderExcluirwww.entreladies.com
Que coisa mais linda!!!! Meu blog ficou uma fofura!! Muito obrigada!
ResponderExcluirNão entendi nada kkkkkk a burrice no html não deixa eu compreender rsr!!! tem como postar modelos prontos para o rodapé da postagem
ResponderExcluirplagiadora idiota
ResponderExcluirAMEII!
ResponderExcluirMe ajudou muito *-*
http://mythings2.blogspot.com.br/
Eu nem acredito que consegui! Nao conseguia de jeito nenhum centralizar o titulo do post.
ResponderExcluirObrigada amores! ♥♥♥
http://natalibispo.blogspot.com.br/
Que blog mais liindo *-* http://vihpaula.blogspot.com.br/
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirgooooossssstttteeeeeiiiiiiii valeu ai
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirAmei o seu tutorial, me ajudou muito :3
ResponderExcluirguardeiparamim.blogspot.com.br/
jhonatas24.blogspot.com
ResponderExcluir