Convertendo tema do Wordpress para o Blogger II

Continuando a primeira parte deste tutorial, onde mostro como converti o tema Green Dark do Wordpress para o Blogger.

Copie o trecho de div.corner (mas retire o div) e cole abaixo de .post, ficando assim:

.corner {
float: right;
width: 88px;
height: 79px;
background: url(images/corner.gif) no-repeat;
display: block;
margin-top: -16px;
margin-right: -16px;
}

Hospede a imagem correspondente e coloque no local indicado. Este trecho, como vocês podem ver com o Firebug, refere-se ao detalhe no canto superior direito de cada post, que é como se fosse uma dobra de papel. Para inserir este trecho, não basta apenas o CSS, é preciso colocar esta div class no HTML. Para isso, salve as modificações, depois clique em Expandir Modelo de Widget. Procure por: <div class='post hentry uncustomized-post-template'> e cole logo abaixo :

<div class='corner'/>

Veja que é uma div vazia, não há conteúdo nela. Ela serve apenas para exibir a imagem. Visualize; a imagem deve aparecer no topo dos posts.

Copie o trecho referente a div.big-post h2 a e cole em .post h3, a correspondência é a mesma. Deve ficar assim:

.post h3 a{
text-decoration: none;
color: #333;
font-size: 19px;
line-height: 1.2em;
letter-spacing: -1px;}

div.big-post h3 corresponde ao estilo das letras nas informações abaixo do título. Para conseguir alinhar estas informações, criei um novo bloco para contê-los, que chamei de post-info. Pegue as informações para div.big-post h3 e cole em post-info, assim:

#post-info{
margin: 0 auto 0;
display:block;
height:25px;
width: 640px;
text-decoration: none;
color: #777;
font-size: 12px;
padding: 5px 0;
text-transform: uppercase;
font-weight: lighter;
border-bottom: 1px dotted #ccc;
}

No próximo capítulo vou ensinar como modificar a posição destas informações, no HTML.
As linhas em negrito são informações que eu acrescentei, para que o bloco obedecesse às dimensões que constam no tema original. Nem tudo é copiar e colar, por isso é que expliquei, no início, que é necessário algum conhecimento de HTML e CSS para fazer a conversão. Nem sempre copiar e colar basta. É preciso entender as diferenças entre os temas e a necessidade de inserir informações, quando for preciso. Sigamos...

Copie todo o trecho para a.redmore e cole, renomeando para #showlink, pois este é o nome da div no hack Leia Mais..., que usaremos aqui. Deve ficar assim:

#showlink {
padding: 11px;
padding-left: 55px;
font-size: 12px;
background: url(images/readmore.gif) no-repeat left;
text-decoration: none;
color: #444;
border-right: 1px solid #ccc;
}

Hospede e coloque a imagem no local apropriado.

Copie todo o trecho para #footer e #footer-wrapper e substitua o trecho correspondente no Blogger. Salve as modificações. Desça a página toda e lá no final, antes de </body>, você encontrará a parte do HTML de Footer. Apague todo o trecho e cole no lugar:

<!-- Footer -->

<div id='footer'>
<div id='footer-wrapper'>
<big>
<big>
<strong>&#169; 2009 My Web Blog</strong>
</big>
</big>
<br/>
<small>
<strong>
<a href='http://www.freethemelayouts.com/' style='color: rgb(255, 255, 255); text-decoration: none;'>Wordpress Theme</a>
designed by DT
<a href='http://www.dreamtemplate.com' style='color: rgb(255, 255, 255); text-decoration: none;'>Website Templates</a>
<strong/>
</strong>
</small>
</div>
</div>

Slave as modificações. Continua no próximo post.

Veja também: Convertendo tema do Wordpress para o Blogger I