Hoje eu trago mais uma postagem do tutorial "Criando um template" do quadro "Para Blogueiras(os)".
Hoje eu vou ensinar a como trocar o footer da nossa postagem por uma imagem personalizada.
Na ultima parte do nosso tutorial nós deixamos nosso rodapé com cores, hoje vou ensiná-los à colocar uma imagem no lugar!!
Personalizando o Rodapé das postagens com uma imagem!
Antes de tudo deveremos ter um editor de imagens, o que eu vou usar é o Photoscape.
Obs.: Para trocar o texto por uma imagem, é necessário que você já tenha todos os seus widgets já instalados na #sidebar-wrapper, pois precisaremos alterar uma parte do código referente a cada widget.
Vamos lá então:
Primeiramente vamos criar uma imagem com o título do widget que deseja com a mesma largura da nossa #main-wrapper.
A minha sidebar por exemplo, tem: a largura padrão do mínima que é 410px, então minha imagem terá 410 de largura (e para a altura você usará a qual preferir, no meu eu usei 40px.)
Mas Elen, eu não sei qual a largura da minha main-wrapper, como que eu descubro?
Bom, vamos usar o esqueminha do Ctrl+F e vamos digitar o código: #main-wrapper
E como resultado deverá ter um código assim:
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: #FFFFFF;
padding:10px;
}
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: #FFFFFF;
padding:10px;
}
A nossa altura é o que está determinado em Width:
Agora vamos fazer nossa imagem, mãos à obra!!
A minha ficou assim:
Usando o Ctrl+F procure por .post-footer {
Deverá aparecer o seguinte código:
.post-footer {
margin: .75em 0;
background: #000000; /* Fundo Preto */
padding: 4px;
color:#FFFFFF; /* Texto em Branco */
text-transform:normal;
letter-spacing:.0em;
font-family: Sacramento;
font-size: 12pt;
font-style: Oblique; /* fonte obliqua */
line-height: 1.8em;
border: 2px dotted #FE2E2E; /* Borda vermelha em volta */
}
Agora vamos alterar a linha background
Vamos substituí-la por essa: background:url("link da sua imagem")no-repeat;
link da imagem você deverá substituir pelo URL da sua imagem que já deverá ter sido hospedada, daquele jeito que ensinei na Parte 5 desse tutorial!!
Veja o meu:
.post-footer {
margin: .75em 0;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT8TBA0Ar6raQnHBzEhXiGiqwVdcBBSiwvxK9cOcREoD3MhvchLy31N1w9TvSrprY5cx4f4foEguS268rqJB4j9n7mga68pPLmdQ_sBxLNhqITMku342bzBfh_Zv7xQrLOY6Ng8f5t_HU/s1600-r/background+footer+postagens.jpg')no-repeat; /* Usei o no-repeat para que minha imagem não se repetisse */
padding: 4px;
color:##FA58D0; /* Texto Rosa */
text-transform:normal;
letter-spacing:.0em;
font-family: Sacramento;
font-size: 12pt;
font-style: Oblique; /* fonte obliqua */
line-height: 1.8em;
border: 2px dotted #FE2E2E; /* Borda vermelha em volta */
}
Agora Visualize seu modelo, e se estiver como você quer, salve!
 |
| Com a propriedade no-repeat |
 |
| Sem a propriedade no-repeat |
Bom, esse foi mais uma parte do tutorial, espero que tenham gostado!
Se gostou deixe seu comentário ai!! Ele serve de incentivo para a continuação do quadro "PARA BLOGUEIRAS(OS)"
Se tiver alguma dúvida use os comentários para tirá-las!!
XoXo
0 comentários:
Postar um comentário