Recapitulando o post anterior, isto é que o você vai precisar para converter o tema:

• Faça o download do tema que será convertido exenplo aqui e guarde o link da visualização do tema(é o décimo segundo, de cima para baixo - GreenDark)
• Se você ainda não tem, baixe um editor de HTML. Recomendo o MAX's HTML Beauty++
• Baixe o Firebug, uma extensão indispensável do Firefox (ou seja, use o Firefox). Este item é muito importante, pois o Firebug nos dá uma visão rápida e clara da hierarquia da div's e classes.
• Providencie um local para guardar as imagens: recomendo o TinyPic, que ao contrário do ImageShack e do Photobucket, nunca me deixou na mão.
• Crie um blog só para isso, assim você não perde nada importante e pode errar à vontade. Coloque nele algum conteúdo falso, para poder visualizar bem as mudanças que irá fazendo. Você pode criar posts só com Lorem Ipsum. Copie e cole trechos deste texto sem sentido, para enxertar conteúdo no blog vazio. Crie lista para a sidebar, umas tres de preferência.

Faça o download do tema GreenDark  e descompacte o arquivo em seu computador. Ao descompactar, você verá uma pasta com as imagens utilizadas no template, alguns arquivos em php e um arquivo CSS, denominado style. Abra este arquivo no editor de HTML  . Neste arquivo encontra-se todo o estilo da página: fontes, cores, alinhamentos, espaços, largura das colunas, etc. O correspondente a estes códigos no HTML nós iremos acompanhar com o Firebug. Se você não usa o Firefox e nem pretende usar, visualize o html da página clicando com o botão direito, código fonte.

Abra o demo do tema em uma aba do seu navegador e visualize a hierarquia das div's e classes com o Firebug:

Note que quando você coloca o cursor sobre o nome de uma Div, ou Class, o espaço correspondente se destaca no template, em azul. Isto dá uma visão muito clara das correspondências e dimensões de cada elemento.

Mas, primeiro, vamos passar para o Blogger o documento CSS do tema do Wordpress. Muitas pessoas, quando fazem conversões, utilizam os nomes dos seletores originais do tema convertido. Penso que isso dificulta bastante o usuário do Blogger a fazer modificações futuras, pois não encontrará denominações correspondentes em nenhum tutorial de ajuda. Por exemplo, se no tema do wordpress a div main-wrapper é chamada SCC, eu mantenho o nome main-wrapper, apenas altero os códigos como manda o arquivo style.

Só para relembrar, a sintaxe de uma regra CSS é esta:

seletor{propriedade: valor }

O que faço é manter, tanto quanto possível, os seletores originais do Blogger.

1- Body e Outer-Wrapper

Abra o arquivo style no editor html. Logo no topo você encontrará os créditos do template. Sempre se certifique se o autor permite alterações no tema. Sempre mantenha os créditos! Copie todo o trecho e cole junto aos créditos originais do seu template (escolha o Mínima):

Agora copie todo o trecho que vai de * {margin: 0;padding: 0;} até a {color: #728fa1;font-weight: bold;} do documento style, e cole, substituindo todos estes do seu blog:

body {

background:$bgcolor;

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

a:link {

color:$linkcolor;

text-decoration:none;

}

a:visited {

color:$visitedlinkcolor;

text-decoration:none;

}

a:hover {

color:$titlecolor;

text-decoration:underline;

}

a img {

border-width:0;

}

O que estamos fazendo é substituir um estilo por outro, apenas isso. Note que body do tema wordpress pede uma imagem de fundo:

background: url(images/background.gif) repeat-x top #fff;

Esta imagem se encontra na pasta Images, com o mesmo nome: background. Hospede a imagem e coloque o link entre os parenteses.

Logo abaixo no documento style, você verá:

#wrapper {
width: 900px;
margin: 0 auto;
text-align: left;
}

Usando o Firebug você notará que esta div vem logo após body e que o correspondente no Blogger é Outer-Wrapper. Copie e cole o trecho no lugar de Outer-wrapper (e mantenha o nome do seletor, para não precisar alterar no html) ficando assim:

#outer-wrapper{
width:900px;
margin: 0 auto;
text-align:left}


2 - Header, Search, Subscribe, Nav

Copie a propriedade e o valor para #header e passe para #header-wrapper:

#header-wrapper{height: 140px;}

Em seguida, no documento style, aparece o seletor #logo. Veja com o Firebug que ele corresponde a #header:

Transfira as propriedades e valores de #logo para #header, ficando assim:

#header {float: left;width: 300px;height: 100px;padding: 37px 10px;padding-bottom: 0;}

Novamente visualizando com o Firebug, você verá que #logo h1 a corresponde ao título do blog, o que no blogger se apresenta como #header h1. Faça a transferência das propriedades e valores de um para o outro, ficando assim:

#header h1 {
text-decoration: none;
color: #fff;
font-size: 26px;
letter-spacing: -1px;}

#logo h2 refere-se a descrição do blog. No Blogger este seletor se apresenta como #header .description. Faça a conversão:

#header .description {
color: #fff;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: lighter; }

Apague os seguintes trechos do seu blog (não há correspondência entre eles e o tema do wordpress):

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

#header a {

color:$pagetitlecolor;

text-decoration:none;

}

#header a:hover {

color:$pagetitlecolor;

}

#header img {

margin-$startSide: auto;

margin-$endSide: auto;}

Copie completamente todo o código referente a #search, #subscribe e #nav e cole logo abaixo de #header .description. Hospede as imagens que são pedidas e coloque os links nos locais correspondentes. Salve as modificações. Com o Firebug novamente, note que #logo, #search e #subscribe estão contidas na div #header. #logo, ( título e descrição do blog), não precisa ser inserido no código (lembra que mantivemos os nomes dos seletores do blogger: #header h1 e #header .description? Foi justamente para não precisar modificar o HTML à toa). Copie então os códigos html para #search e #subscribe (clique no sinal de + para expandir totalmente o código) e cole dentro da div #header:

Note na imagem que copiei até o final, incluindo a tag que fecha a div #header
No seu blog esta tag de fechamento já existe, portanto, ao copiar o código, cuidado para não deixar duas tags de fechamento e receber em troca uma mensagem que impeça a visualização.O código no HTML deve ficar como se apresenta na imagem abaixo:

Visualize e veja como ficou o cabeçalho.

Copie o código para #nav no documento style e cole no CSS, abaixo do código para #subscribe. Hospede a imagem para #nav ul li a:hover e coloque o link no local correspondente. Volte ao Firebug e copie o código HTML de #nav, colando no seu blog abaixo da div #header (atenção: fora da div #header!>. Lembre de expandir todo o código clicando em todos os sinais de +. Visualize.

3- Content, Sidebar e Main

Veja que a div #content no tema wordpress corresponde a div #content-wrapper do Blogger. Como ela já existe no HTML, acrescente apenas no CSS, assim:

#content-wrapper {
clear: both;
padding-top: 20px;}


Copie as propriedades e valores para #sidebar e substitua as que se encontram no seu blog, sem apagar os trechos em negrito:

#sidebar-wrapper {
width: 220px;
float: left;
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 */
}

*Estes códigos em negrito, grosso modo, garantem que o texto não extrapolará os limites da coluna no IE. Por isso, não apague estas linhas.

Veja que na verdade, a única diferença entre os dois é a flutuação, que no tema do wordpress é à esquerda.

Novamente usando o Firebug, veja que div.sidebar corresponde a cada bloco de widget da sidebar. No Blogger, este código já existe e se apresenta como:

.sidebar .widget, .main .widget {

border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}

Aqui as propriedades e valores são os mesmos para as widgets da sidebar e de main, por isso vamos separar os dois, já colocando as especificações para sidebar que há no tema wordpress, assim:

.sidebar .widget{
padding: 15px;
background: url(images/sidebar.gif) repeat-x bottom #fff;
border: 1px solid #ccc;
margin-bottom: 10px;}

.main .widget{

margin:0 0 1.5em;

padding:0 0 1.5em;

}

Copie os códigos para #sidebar h2 , #sidebar ul li e #sidebar li (este último está mais abaixo no documento style, depois de #footer) e substitua os que se encontram no blog, que são:

/* Sidebar Content
----------------------------------------------- */

.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

}

.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.sidebar li {

margin:0;

padding-top:0;

padding-$endSide:0;

padding-bottom:.25em;

padding-$startSide:15px;

text-indent:-15px;

line-height:1.5em;

}

Hospede e coloque as imagens nos locais correspondentes. Visualize.


#column corresponde a main-wrapper. Copie as propriedades e valores e substitua as que se encontram no Mínima, sem alterar as linhas word-wrap: break-word; e overflow: hidden; ficando assim:

#main-wrapper {
width: 650px;
float: right;
padding-left: 20px;
word-wrap: break-word;
overflow: hidden;
}

div.big-post e div.small-post correspondem a .post no blogger. Os dois tem as mesmas propriedades e valores, com exceção do título da postagem, que em big é maior que small. Eu sinceramente não soube como fazer esta divisão, deixando só os dois primeiros posts com o título maior e o restante com título menor. Por isso, optei por small para todos. Copie as propriedades e valores para div.small-post e coloque em .post, ficando assim:

.post {
padding: 15px;
padding-bottom: 13px;
background: url(images/post.gif) repeat-x bottom #fff;
border: 1px solid #ccc;
width: 600px;
margin: 5px;
float: left;
vertical-align: top;
}

Hospede e coloque o link da imagem dentro do parêntese.
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.
Tweet