-->

16/01/2015

Códigos de CSS que todo dono de Blog deveria saber



Olá, gente!
Com as mudanças que fiz no blog, recorri muito a ajuda do CSS! Pesquisei, achei códigos e tudo foi muito muito útil!

Resolvi trazer alguns códigos (os mais procurados) para personalizar ainda mais seu blog!



Centralizar a Imagem/Título do cabeçalho


A imagem/título é sempre colocado a esquerda, o que dificulta na hora de colocar uma imagem no layout (redimensionar, cortar, blá blá blá, da trabalho demais!)

Vá em: Design > Personalizar > Avançadas > Adicionar CSS e cole o código:

#header-inner img {
margin-left: auto;
margin-right: auto;
}
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}


Assim que colarem o código, irá aparecer o resultado :)


Como centralizar o título e data das posts

Vá em: Design Personalizar > Avançadas > Adicionar CSS e cole o código:

h3.post-title {text-align:center;} /* centralizar titulo dos posts */
.main-inner h2.date-header {text-align: center;} /* centralizar data dos posts */


Cole e aplique ao blog.


Como remover moldura branca das imagens

O Blogger coloca uma moldura branca em volta das imagens, com sombra também (apenas em alguns modelos), que eu pessoalmente não gosto.
Em um modelo que usei anteriormente, tinha essa moldura e assim que descobri o código de como a retirar, foi o que fiz.

Vá em: Design Personalizar > Avançadas > Adicionar CSS e cole o código:

.post-body img, .post-body .tr-caption-container, .ss, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}


Cole o código e vai aparecer o resultado na hora também!


Como diminuir data da post

Meu modelo do blog deixa a data ENORME! Eu quase faleci quando fui tentar diminuir e não dava :O
Maaas é só fazer o seguinte:

Vá em: Design Personalizar > Avançadas > Adicionar CSS e cole o código:

h2.date-header {font-family: Courier; font-size:100%; text-transform:none; letter-spacing:0; font-variant:normal;}
#header-inner img {
margin-left: auto;
margin-right: auto;
}

O "%" é o tamanho que você quer a data. É só ir modificando e conferindo como fica logo abaixo ;)



Bem gente, esses eram os códigos e mini tutoriais que queria mostrar para vocês! Espero que tenha sido fácil e útil! Beijinhos, Bel.



4 comentários:

  1. Amei as dicas!
    Obrigada por compartilhar.

    Beijo, ótimo final de semana
    |Blog ° WL Store|

    ResponderExcluir
    Respostas
    1. Que bom que vc gostou, Cah! Magina, esse é o meu trabalho hehe Beijo, e um ótimo fds pra vc também!!! :*

      Excluir
  2. Que dicas ótimas :)
    beijinhos!

    http://fifoquices.blogspot.pt

    ResponderExcluir
  3. Que dicas ótimas :)
    beijinhos!

    http://fifoquices.blogspot.pt

    ResponderExcluir