Páginas

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

Postagens separadas

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*/
}

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; 

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

Colocando bordas ao redor da postagem

Localize no seu html e acrescente o que estiver em vermelho.

/* Main 
----------------------------------------------- */

.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