30 de jul. de 2012

Corrigindo o bug do título do Template Mínima

Galera hoje vou postar uma correção do bug do título do Template Mínima, não sei se ja aconteceu com muita gente mais com migo aconteceu um monte de vezes e consegui resolver o problema, esse foi um tuto pedido por Júlio do xat. Confira a demo logo abaixo, você poderá perceber que o título está normal, porém após o você clicar no link da post ele vai pro meio.

Demonstração

1º Vá em >> Design >> Editar HTML >> Expandir Modelos >> procure pela seguinte tag:
<b:if cond='data:post.title'>
Irá aparecer duas tags, porém será a primeira.

O código completo é esse aqui:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Agora você irá substituir todo código do título por esse aqui:

<div class='post-title entry-title'>
<b:if cond='data:post.title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if></div>

2º Agora vamos adicionar o CSS e HTML do titulo, procure por:
]]></b:skin>
Logo acima dela adicione o seguinte CSS e HTML:

/* Titulo By: Lord Schiffer
----------------------------------------------- */
.post-title {
float: left;
margin: -92px 0px 0px 140px;
font: normal bold 18px 'arial',Verdana,Arial,Sans-serif;
color: #fff !important;
text-shadow: #000 0px 1px 2px;
}

Agora é só editar a flotagem, a margin de acordo com o float, o formato da fonte e seu tamanho, a cor e o shadow.

Salve!

Agora como está aplicado um CSS e HTML direto no título, a imagem do topo-post irá desaparecer, portanto teremos que aplicar uma div com a imagem do topo post.

Vá em >> Design >> Editar HTML >> Expandir Modelos e procure por:
<a expr:name='data:post.id'/>
Abaixo dela adicione a seguinte div:

<div style='width: XXXpx; height: XXXpx; background: url(URL DA IMAGEM) no-repeat;'></div>
Nota: Caso você tenha adicionado o código dos avatares essa div do topo-post terá que ser fechada após o código dos avatares, ficando assim:

<div style='width: XXXpx; height: XXXpx; background: url(URL DA IMAGEM) no-repeat;'>

AQUI O CÓDIGO TODO DOS AVATARES!

</div>

Coloque a largura da imagem e a altura, caso fique bugada com um espaço entre o meio e o topo-post é só mexer no margin-top do post-body.

É isso ai galera até o próximo tutorial, espero que eu tenha te ajudado Júlio, e desculpa pela demora, até mais.