1) Vá no seu painel do Blogger em Modelo > Editar HTML. Clique em prosseguir no aviso que vai aparecer e marque a caixa "Expandir modelos de widgets". Aperte Ctrl + F e procure por:
.main-inner .column-center-outer {
2) Caso você ainda não tenha mexido nessa parte do código, ele vai estar assim:
.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}
Substitua todo o código acima por:
.post-outer {
margin: 3px 8px 20px; /*Margem externa*/
background:#fff; /*Cor de Fundo*/
padding: 5px; /*Margem interna*/
box-shadow: 1px 4px 19px 2px #DCDCDC; /*Sombra da caixa*/
border-radius: 30px; /*Borda arredondada*/
}
Mostrando postagens com marcador Postagens. Mostrar todas as postagens
Mostrando postagens com marcador Postagens. Mostrar todas as postagens
segunda-feira, 21 de outubro de 2013
domingo, 8 de setembro de 2013
Customizar rodapé dos posts
Localizar:
.post-footer {
margin: .5em 0;
line-height: 1.6;
}
E substituir por:
.post-footer {
margin-top: 15px; /* espaço entre o rodapé e o post */
padding: 0;
}
.post-footer-line-1, .post-footer-line-2
{
border-bottom: 1px solid #EEEEEE; /* cor, espessura e tipo da
borda */
background: transparent; /* fundo do rodapé */
color: #666666; /* cor do texto */
font-family: Arial; /* fonte do texto */
font-size: 11px; /* tamanho da fonte */
margin: 2px 0; /* margem entre uma linha e outra, não altere */
padding: 1px 1px; /* espaço entre texto e margens, não altere */
text-transform: uppercase; /* transformação do texto */
word-spacing: .2em; /* espaço entre palavras */
text-align: center; /* alinhamento do texto */
}
Para personalizar o link “comentários”:
Acrescentar:
.comment-link {
background: url("URL-DA-SUA-IMAGEM") no-repeat
center left;
padding:2px 0px 2px 20px;
/*ajuste as margens se precisar*/
}
*-------------*
Código da data para personalizar os comentários:
float: left;
width:55px;
height:55px;
overflow:hidden;
font-size:15px;
font-family: nomedafonte; {fonte da data}
color: #fff !important; {cor da fonte}
text-align:center;
margin-bottom: -65px; {desce}
margin-left: -80px; {margem pra esquerda}
padding: 8px 2px 0px 2px; {espaço interno: topo, direito, embaixo, esquerdo}
-webkit-border-radius: 5em; -moz-border-radius: 5em; {borda redonda}
background: #FF6C91;
*-------------*
Código da data para personalizar os comentários:
float: left;
width:55px;
height:55px;
overflow:hidden;
font-size:15px;
font-family: nomedafonte; {fonte da data}
color: #fff !important; {cor da fonte}
text-align:center;
margin-bottom: -65px; {desce}
margin-left: -80px; {margem pra esquerda}
padding: 8px 2px 0px 2px; {espaço interno: topo, direito, embaixo, esquerdo}
-webkit-border-radius: 5em; -moz-border-radius: 5em; {borda redonda}
background: #FF6C91;
sexta-feira, 15 de março de 2013
Colocando assinatura nas postagens
Depois de clicar em "expandir widgets", localize o código abaixo no seu html, e acrescente acima dele o que estiver em azul.
<div align='right'>
<img src='URL da Imagem' style='border:0px;'/></div>
<div class='post-footer'>
Como colocar linha embaixo do título do post
Localize em seu html o código abaixo e acrescente o que estiver em AZUL.
h3.post-title {
margin-top: 20px;
border-bottom: 3px dotted #ccc; {Altere o #ccc para a cor que você desejar. Altere o "dotted" para o modelo de borda que você desejar}
}
h3.post-title {
margin-top: 20px;
border-bottom: 3px dotted #ccc; {Altere o #ccc para a cor que você desejar. Altere o "dotted" para o modelo de borda que você desejar}
}
Colocando bordas ao redor da postagem
Localize no seu html e acrescente o que estiver em vermelho.
----------------------------------------------- */
.main-inner {
margin-top: -20px;
padding: $(content.padding) 0;
}
.main-inner .column-center-inner {
border: solid 2px #000000;
padding: $(content.posts.padding) 0;
}
.main-inner .column-center-inner .section {
margin: 0$ (content.posts.padding);
}
1. Solid quer dizer uma linha reta. Se quiser linhas pontilhadas, troque por dashed
2. 2px essa é a largura da bords
3. #000000 essa é a cor da borda
Assinar:
Postagens (Atom)