Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

19 janeiro 2009

Convertendo tema do Wordpress para o Blogger I

Recapitulando o post anterior, isto é que o você vai precisar para converter o tema:
  • Faça o download do tema que será convertido 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, que já expliquei como usar neste post aqui. 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.

Continua no próximo post.

Artigos Relacionados

24 comentários:

Edson S. Ferreira disse...

Por favor, mostre como importar a seção de cometarios tambem, sempre tenho problemas com temas, apos a instalação do novo template, o formulario de comentarios some.

obrigado e parabens pelo belo trabalho!
=]

Márcio disse...

Primeiramente dar os parabens pela sua iniciativa e pelo exelente tutorial se esse ficou massa imagine os outros que vier por ai adorei abraços!

Bem Ariane só algumas perguntas, as imagens referente aos RSS e RSS-coments não apareceram somento o texto e tem mais algumas imagens também que não apareceram eu copiei o codigo e refiz e fui refazendo não quizeram aparecer se puder dar uma olhada pra mim entrando no meu perfil vc já vai saber o blog de teste meu que estou usando para seguir este tuto obrigado.

Ariane disse...

Márcio, pelo que eu percebi vc está copiando o código html do tema que eu converti e não do original. Pq no tema que eu converti eu fiz uma modificação que vou explicar no proximo post. Copie o código do tema original aqui para conseguir os resultados por enquanto, ok? Abraços!

Kspolaor disse...

Nossa senhora preciso de mais tempo para aprender.

Valeu pela dica.

Diogo Andrade disse...

Ebaaa... to conseguindo até aqui!
Enquanto espero pelo próximo post, já vou tentando aplicar a sua aula em outro template (impaciente e pretencioso! rss).
:-**

Ariane disse...

Diogo, pretensioso nada, é assim q se aprende :D

Fernanda Maria disse...

Ariane...tem um site que tem os temas mais lindos do WordPress aguns ficariam lindos convertidos para o blogger, mas principalmnete o tema Fauna, do WordPress, eu amo esse tema e sou doida pra ter ele no blogger.
O link é esse
http://hardsoftgeek.com.ar/category/plantillas

Se puder, converta esse o Fauna que é simplesmente lindo e vjea os outros tambem, eu gostei do tutorial mas eu, sinceramente, sou dificil em entender então aidna tenho que ler e reler muitas vezes...mas se puder ajudar seria otimo, o ultimo tema é lindo so que escuro demais...
Abraço grande

PAOLA GAVAZZI disse...

Ariane Querida,

Meu nome é Paola, tenho um blog chamado TRUQUES DE MAQUIAGEM (www.truquesdemaquiagem.blogspot.com) e gostaria muito de entrar em contato com vc.

Vc tem um e-mail? Desculpe, como estou caindo de sono não achei... hahaha!

O meu é paolafotografa@uol.com.br

Queria trocar informações com vc sobre trabalhos ;-)

Beijinhos 1000, aguardo respostas pelo e-mail :-)

Obrigada desde já!
PAOLA

Thiago Luan Bessa Martins disse...

olha esse tema para wordpress
http://www.magznetwork.com/wordpress-themes/indomagz-1gallery-wordpress-theme.html

esse tema pra Blogger concerteza faria sucesso, eu não consigo colocar ele pra Blogger mas quem sabe você que tem conhecimento sobre isso consiga...

tai a dica seria uma boa

LIVE GOSPEL disse...

Olá Ariane...primeiramente parebens por ajudar tantos pobres mortais como nós a melhorar nossos blogs,kkkkkkkkkkk,bem instalei um template que vc converteu do Worpress (dfOriginal)fiz uma pequenas mudanças espero que não se importe,e gostaria de aprender mais sobre a conversão...to louco para ver o desfecho desse tutoral...veja ai meu blog se esta legal(http://livegospel.blogspot.com/)

Celma Araújo disse...

Oi Ariane!!!
olha adoro seu blog viu,
por isso tem um Selo pra vc, passa no meu blog depois!!
bjos

Jônatan disse...

Gostaria que você convertesse este tema para mim.

http://web2feel.com/gamezine-theme/

Me responda pelo e-mail:

pezzioliveira@hotmail.com

JuaOoOo disse...
Este comentário foi removido pelo autor.
vαnvαn ઇ‍ઉ disse...

Ola Ariane
para converter este tema: http://www.eblogtemplates.com/my-diary/ seria muito diferente? Como devo fazer... sigo seu tutorial e depois de convertido o tema para o greendark começo a conversao para este que eu escolhi?
bjuuus

Lecca disse...

Oi Ariane.G
Gostaria de parabeniza-la pelo seu trabalho, comecei a gostar de fazer lays e coisas para blogs a algum tempo e comecei a gostar do blogspot, quando o criei ele era mais span, mas agora o ativei e estou só com ele e tenho amado vir aqui e aprender novas coisas para blogspot no seu blog.:).

By Fóco. disse...

Ariane , tipo , eu tinha um blog chamado 'LAB Insano' , e ele usava o template WordPress Fun convertido pro Blogger , demo do template: http://www.wordpressfun.blogspot.com .

Só que ele não fez muito sucesso :] kkk.
Mas hoje , vendo uns templates de WordPress , achei uma outra versão dele que se chama DeskSpace , achei muito melhor ,e bem meu estilo :P . Daí lembrei que uso o Blogger e não o WordPress , aí procurei no google modos de Converter templates de WordPress para Blogger , e achei teu blog , só que tentei esse metodo com o template que eu gostei que é o DeskSpace , e a div's do template de exemplo , não batiam com a do template que eu gostei ,até tentei , mas não deu , então , estou aqui , de JOELHOS xD , IMPLORANDO :] , PARA QUE TU CONVERTA O TEMPLATE PRA MIM , claro , se não for folga demais , e se vcê estiver afim , mas poor favor , preciso dele , ele é taum bunithinhu *-* , Demo dele : http://freethemelayouts.com/blog/index.php?wptheme=DeskSpace ,

e download dele : http://freethemelayouts.com/dls/deskspace.zip

vleeuzaum , e se vcê converter , mande arquivo pro meu email : m.andradesantos@gmail.com

Obrigado .

el trio disse...

fala ai amigão, bem... Cara sou totalmente leigo quanto a edição de html, creio que não há ninguem burro, mas sim, desinformado! Eu achava que templates prontos só tinham para wordpress, e que para blogger, somente os já disponibilizados por ele mesmo, leigo engano, essa madrugada começeu fazer donw de vario temp e testa-los em meu blog, porém surgiram ai os problemas, cadê meus widgets, um outro site ensinou-me a recoloca-los em meu novo temp ai me virei tomei umas cerva, (só pra não frita o cérebro) e consegui, fiz um pequeno ajuste na html dele, esse seu tutorial me ajudará muito, uma vez que encontramos muito mais temp para wordpress do que para blogger, parabéns pela sua íniciativa, qualquer coisa passe em meu blogg (ainda vazio) e deixe o link para um baner seu!

abraços

Douglas Vieira disse...

Oi Ariane !
eu vi Sua Explicaçoes mas não consegui converter o Template que eu Queria !
sera que vc poderia me Dar Uma Ajuda ??
o Blog que eu Quero o Template eh Esse
http://www.cyberfilmes.org/
se der me Responda pelo Email
dossantos30@gmail.com
vlw

ℓιмασ disse...

Por Favor me Ajude... Tentei converter o Tema Zinrex so que não consegui =(
Poderia Converter Para Mim?? (Se Não quiser nao vou fica triste)

Link:http://www.fileupyours.com/view/246710/zinrex.rar

Meu E-Mail: leo.maglia@hotmail.com

Desde ja muito obrigago!!

Bruna disse...

olá Ariane, o seu tutorial é muito bom, mas eu tentei converter o template Bueno,( você pode vê-lo aqui ó http://www.woothemes.com/2009/11/bueno/ )e não consegui converter.
Será que você poderia ensinar, talvez fazer um tutorial mostrando como converter esse template porfavor!

bj xau!até mais..

Anônimo disse...

existe algum conversor online que simplifique o processo de Codificação?

Obrigado!

pradeep kumar disse...

Awesome tutorial! From long time I had been search for converting wordpress theme to blogger. Thanks for sharing nice post. Keep it up.

Matt O'brito disse...

Como faz pra converter template do blogger para tema no wordpress?

SilvioUploader disse...

Também tenho interesse na questão do Matt O'brito...
Ficaria muito grato escreve-se um tutorial sobre: Como Converter template Blogger para Wordpress.

Quero Migrar para WordPress e continuar com o mesmo template

Postar um comentário

Os comentários são moderados.