venho ensinar a vocês a como colocar a área da postagem separada. Como assim Ô sábio Ulquiorra ? kkk
Bem galerinha é bem simples, quando vocês entram em algum site a maioria está como a parte da postagem separada assim como o do Designer Project.
Primeiro passo.
Vai, no blogger, vá em Design, Editar HTML, procure por:
Post
Vai estar meio que assim:
/* Posts -------------------------------------------- */
Após encontrar, substitua todo o código que faz parte desta área. E coloque a que está logo abaixo mas lembrando em editar as devidas partes:
/* Posts -------------------------------------------- */
h2.date-header {
margin-top:-25px;
margin-right:0px;
margin-bottom:0;
margin-left:329px;
text-align: left;
font-size:70%;
line-height:2em;
text-transform:none;
letter-spacing:1px;
color:#fff;
}
.post {
margin-bottom: 0px;
padding: 0px 0px 0px 0px;
background:url() repeat;
font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
color:#000;
text-shadow: 0px 0px 7px #CD5C5C;
}
.post h3 {
margin:0;
line-height:1.5em;
width: 554px;
height: 115px;
background:url("IMAGEM DO TOP")no-repeat 0px .0em;
display:block;
border:1px;
border-width:0 1px 1px;
padding:12px 07px 25px 20px;
font:16px Verdana, Arial, Helvetica, sans-serif;
}
.post h3 a, .post h3 a:visited {
text-decoration:none;
color: #000;
text-shadow: 0px 0px 7px #CD5C5C;
}
a.title-link:hover {
background-color: #ffffff;
color: #ffffff;
}
.post-body {
border:1px ;
background:url("") repeat;
border-width:0 1px 1px;
border-bottom-color:#ffffff;
padding:0px 5px 0px 9px;
}
html>body .post-body {
border-bottom-width: 0;
background:transparent url(IMAGEM DO MEIO) repeat scroll 0 0;
}
.post p {
margin: 0px;
}
.post-footer {
background:transparent url(IMAGEM DO RODAPÉ) no-repeat scroll 0 0;
width:554px;
height:176px;
padding-left:390px;
padding-top:25px;
color:#000000;
display:block;
text-transform:uppercase;
font: normal normal 60% 'Haettenscweiler', Trebuchet, Verdana, Sans-serif;
}
.comment-link {
margin-left:.6em;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
margin-top:10px;
margin-left:5px;
}
#blog-pager-older-link {
float: right;
margin-top:10px;
margin-right:5px;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
display:none;
}
Agora vamos as dúvidas:
float:left : é o lado que vc quer que fique.
left é o lado esquerdo, se quiser que fique a direita troque por right
margin: 0px 0px 0px 0px : são as posições que vc irá colocar, no caso são pros lados inferior, pra superior e pros lados, esquerdo e direito.
Que pode estar assim:
margin-top:-25px;
margin-right:0px;
margin-bottom:0;
margin-left:329px;
O text-align é a posição que vc quer que fique o texto.
A color:#00000, que é a cor. Vou deixar abaixo a tabela de cores, daí é só escolher:
O text-align é a posição que vc quer que fique o texto.
A color:#00000, que é a cor. Vou deixar abaixo a tabela de cores, daí é só escolher:
O font-size:10px : É simplesmente o tamanho da letra.
O text-shadow é o efeito que dá abaixo da letra.
E por fim width e height é a largura e a altura da imagem.
Espero que tenha ajudado, qualquer dúvida deixa um comentário.
0 comentários:
Postar um comentário