Tudo sobre o rodapé do post

Então... Olá ^^ Para terceiro e último tutorial de hoje, decidi trazer mais uma coisinha que diz respeiro a rodapés, nomeadamente, ao rodapé da postagem. Há vários modelos lindinhos por aí, e eu mesma tenciono trazer alguns dos meus em breve. Mas por hora, vou ensinar apenas um modelo mais geral e depois ensinar a colocar alguns ícones atrás de cada tópico, à semelhança do blog The moon reverse: [print respetivo]. E ensinarei ainda umas outras coisas, mas demora a explicar em que consiste e não sei se será útil assim a tanta gente, embora eu lhe ache um interesse enorme. Cá vamos:

Editar a área em geral

Caso alguém não saiba do que falo, é isto aqui» www. O modelo que se segue é horrível e bastante básico, mas é esse que estou a ensinar porque tem tudo relativamente personalizado ou mais simples de personalizar, modifique números e cores à vontade, e apague as linhas do que não quiser. Outline-offset (aumente o número com o sinal "-" atrás, tipo "-5px") e outline (essa é a zona onde muda a aparência, edite como se fosse uma borda), são o tracejado interno da caixinha, border são as bordas, border-radius são os cantos arredondados (aumente o valor para arredondar), box-shadow diz respeito à sombra da área e o resto diz respeito a margens, espaçamentos e à fonte. Background é o fundo, já expliquei muito bem neste blog como editar fundos com imagem vá ao mapa e procure se quiser. Também podem adicionar hover, já expliquei como também no blog. Muita gente já sabe tudo isso, estou a explicar tendo em conta os iniciantes.

Procure por:

/b:skin

Por cima acrescente:

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.post-footer {
background: #fff;
font-family: silkscreen;
text-align: center;
color: #000;
text-shadow: 1px 1px 0px #f8f8f8;
border: 2px solid #eee;
outline-offset: -4px;
outline: 1px dashed #eeeeee;
border-radius: 0px;
box-shadow: 0px 0px 0px #eee;
}

Colocar ícones por trás de cada tópico

Caso alguém ainda não tenha entendido nem com o print, refiro-me a colocar imagens antes das palavras "autor", "comentários" e etc. Arranjem as vossas próprias imagens, tá? Vou deixar aqui a explicação para cada uma das partes que podem personalizar, coloquem o link da vossa imagem e mexam nas margens e padding se necessário. Achei o tutorial aqui: www As fontes e tudo o mais ficarão de acordo com o que você personalizou no tutorial acima. Se quiser mudar a cor  e tipo de fonte em relação à edição na caixinha geral, acrescente  a  (com espaço antes e depois) antes da chaveta de abertura. Os códigos seguintes devem ser adicionados antes de /b:skin

.post-author { /*nome do autor*/
background: url("URL-DA-IMAGEM")  no-repeat  center  left;
padding:2px 0px 2px 20px;
}

.post-timestamp { /*hora da postagem*/
background: url("URL-DA-IMAGEM")  no-repeat  center  left;
padding:2px 0px 2px 20px;
}

.comment-link { /*contagem de comentários*/
background: url("URL-DA-IMAGEM")  no-repeat  center  left;
padding:2px 0px 2px 20px;
}

.post-labels { /*marcadores*/
background: url("URL-DA-IMAGEM")  no-repeat  center  left;
padding:2px 0px 2px 20px;
}

Rodapé diferente na home e após aberto

Parece estranho? Realmente é. É algo que aprendi analisando um layout free e que acabei por aplicar mais tarde. É útil para, por exemplo, deixar a área mais pequena ou com um formado mais quadrangular antes de a postagem ser aberta, como fiz aqui: www. Personalize exatamente com tudo o que eu ensinei na primeira parte deste post, pelo menos, tudo o que decidir usar no seu prórpio blog, e eventualmente modifique a largura e altura da imagem. As personalizações devem ser acrescentadas entre as chavetas, como sempre.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.post-footer {
width: 400px;
height: 100px;
}
</style>
</b:if>

Ocultar rodapé na página inicial

Isto para o caso de não estar lá a fazer nada. Mas o rodapé aparecerá quando a postagem for aberta, então não se esqueça de o personalizar conforme eu ensinei antes, ok? Procure por /b:skin e cole POR BAIXO o seguinte código (sim, é uma variação do anterior).

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.post-footer{display:none;}
</style>
</b:if>

Rodapé por baixo do título do post

Ficará como aqui: www. Tem de personalizar a área/caixinha como ensinei na primeira parte do post, de resto, esta é a coisa que eu acho mais complicada de se fazer. Na verdade, o tutorial é bem grande e acredito que nunca irá desaparecer de onde o encontrei, então vou simplesmente deixar aqui o link para o antigo e amado Cherry Bomb .

{TUTO}

Normalmente só se encontra o primeiro tutorial, por isso decidi trazer estes todos, para ter muita coisa reunida numa postagem só e assim quem quiser personalizar já não precisa saltar de uma postagem para a outra. Espero que seja bem útil, tanto como tem sido a mim.