PS.: MELHOR VISTO NO GOOGLE CHROME

20 janeiro 2014

Data do Blog Personalizado (com imagem)



Oi brigadeiros :3 ' ... Novo tutorial, desta vez de como Personalizar a Data do Blog com uma imagem de fundo. Como sempre, simples e rápido. Quem não conseguir tente novamente e leia tudo certinho para aprender.


Antes de tudo, procure por <head> e abaixo cole este código:

<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'/>

Agora vá em Configurações > Idioma e Formatação. E configure como mostrado a imagem abaixo:


Escolha a penúltima opção.

Vá em modelo > Editar html > Ctrl + f e pesquise:  .date-header span {
Irá encontrar 2 códigos parecidos. O certo estará abaixo de /* Posts. 

Apague todo o código, será esse:

.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}

E no lugar cole esse:

.date-header span {
color: #8B2252;
font-family: 'Poiret One', cursive;
background: url('URL DA IMAGEM');
background-repeat: no-repeat;
text-align:center;/* alinha o texto */
font-size: 14px;
width: 80px;/* largura */
height: 80px;/* altura */
float:left;
margin-left: -85px;
margin-top: 5px;
padding: 9px 1px 2px 1px;
overflow:hidden;
line-height: 18px;
word-spacing: 25px;
-webkit-transition-duration: .30s;
}
.date-header span:hover {
-webkit-transition-duration: .30s;
-webkit-transform: rotate(10deg);
}


Onde está URL DA IMAGEM você irá colocar uma imagem de fundo, separei algumas aqui:







- Gostou? Deixe seu Comentario.
NÃO REBLOGUE. SEJA CRIATIVO.

Um comentário: