Convertendo tema do Wordpress para o Blogger II
Continuando a primeira parte deste tutorial, onde mostro como converter 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:
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:
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:
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:
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:
Slave as modificações.
Copie o trecho de div.corner (mas retire o div) e cole abaixo de .post, ficando assim:
.corner {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 :
float: right;
width: 88px;
height: 79px;
background: url(images/corner.gif) no-repeat;
display: block;
margin-top: -16px;
margin-right: -16px;
}
<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{No próximo capítulo vou ensinar como modificar a posição destas informações, no HTML.
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;
}
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 {Hospede e coloque a imagem no local apropriado.
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;
}
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>© 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.
Demorei muito pra faser isso nao tire meus creditos
By: Wellington Power design
0 comentários:
Postar um comentário