Convertendo tema do Wordpress para o Blogger

Isto que o voc vai precisar para converter o tema:

Faa o download do tema que ser convertido aqui e guarde o link da visualizao do tema( o dcimo segundo, de cima para baixo - GreenDark) Se voc ainda no tem, baixe um editor de HTML. Recomendo o MAX's HTML Beauty++ Baixe o Firebug, uma extenso indispensvel do Firefox (ou seja, use o Firefox). Este item muito importante, pois o Firebug nos d uma viso rpida e clara da hierarquia da div's e classes. Providencie um local para guardar as imagens: recomendo o TinyPic, que ao contrrio do ImageShack e do Photobucket, nunca me deixou na mo. Crie um blog s para isso, assim voc no perde nada importante e pode errar vontade. Coloque nele algum contedo falso, para poder visualizar bem as mudanas que ir fazendo. Voc pode criar posts s com Lorem Ipsum. Copie e cole trechos deste texto sem sentido, para enxertar contedo no blog vazio. Crie lista para a sidebar, umas tres de preferncia.

Faa 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 pgina: fontes, cores, alinhamentos, espaos, largura das colunas, etc. O correspondente a estes cdigos no HTML ns iremos acompanhar com o Firebug, Se voc no usa o Firefox e nem pretende usar, visualize o html da pgina clicando com o boto direito, cdigo 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 espao correspondente se destaca no template, em azul. Isto d uma viso muito clara das correspondncias e dimenses de cada elemento. Mas, primeiro, vamos passar para o Blogger o documento CSS do tema do Wordpress. Muitas pessoas, quando fazem converses, utilizam os nomes dos seletores originais do tema convertido. Penso que isso dificulta bastante o usurio do Blogger a fazer modificaes futuras, pois no encontrar denominaes 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 cdigos como manda o arquivo style. S para relembrar, a sintaxe de uma regra CSS esta: seletor{propriedade: valor } O que fao manter, tanto quanto possvel, os seletores originais do Blogger. 1- Body e Outer-Wrapper Abra o arquivo style no editor html. Logo no topo voc encontrar os crditos do template. Sempre se certifique se o autor permite alteraes no tema. Sempre mantenha os crditos! Copie todo o trecho e cole junto aos crditos originais do seu template (escolha o Mnima):

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 aps 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 no 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;paddingbottom: 0;} Novamente visualizando com o Firebug, voc ver que #logo h1 a corresponde ao ttulo do blog, o que no blogger se apresenta como #header h1. Faa a transferncia 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 descrio do blog. No Blogger este seletor se apresenta como #header .description. Faa a converso: #header .description { color: #fff; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: lighter; } Apague os seguintes trechos do seu blog (no h correspondncia 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 cdigo referente a #search, #subscribe e #nav e cole logo abaixo de #header .description. Hospede as imagens que so pedidas e coloque os links nos locais correspondentes. Salve as modificaes. Com o Firebug novamente, note que #logo, #search e #subscribe esto contidas na div #header. #logo, ( ttulo e descrio do blog), no precisa ser inserido no cdigo (lembra que mantivemos os nomes dos seletores do blogger: #header h1 e #header .description? Foi justamente para no precisar modificar o HTML toa). Copie ento os cdigos html para #search e #subscribe (clique no sinal de + para expandir totalmente o cdigo) 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 cdigo, cuidado para no deixar duas tags de fechamento e receber em troca uma mensagem que impea a visualizao.O cdigo no HTML deve ficar como se apresenta na imagem abaixo:

Visualize e veja como ficou o cabealho.

Copie o cdigo para #nav no documento style e cole no CSS, abaixo do cdigo para #subscribe. Hospede a imagem para #nav ul li a:hover e coloque o link no local correspondente. Volte ao Firebug e copie o cdigo HTML de #nav, colando no seu blog abaixo da div #header (ateno: fora da div #header!>. Lembre de expandir todo o cdigo 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 cdigos em negrito, grosso modo, garantem que o texto no extrapolar os limites da coluna no IE. Por isso, no apague estas linhas. Veja que na verdade, a nica diferena entre os dois a flutuao, 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 cdigo 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 so os mesmos para as widgets da sidebar e de main, por isso vamos separar os dois, j colocando as especificaes 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 cdigos 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 so: /* 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 Mnima, 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 exceo do ttulo da postagem, que em big maior que small. Eu sinceramente no soube como fazer esta diviso, deixando s os dois

primeiros posts com o ttulo maior e o restante com ttulo 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 parntese.

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 vocs 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, no basta apenas o CSS, preciso colocar esta div class no HTML. Para isso, salve as modificaes, 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, no h contedo 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 correspondncia 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 informaes abaixo do ttulo. Para conseguir alinhar estas informaes, criei um novo bloco para cont-los, que chamei de post-info. Pegue as informaes 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 prximo captulo vou ensinar como modificar a posio destas informaes, no HTML. As linhas em negrito so informaes que eu acrescentei, para que o bloco obedecesse s dimenses que constam no tema original. Nem tudo copiar e colar, por isso que expliquei, no incio, que necessrio algum conhecimento de HTML e CSS para fazer a converso. Nem sempre copiar e colar basta. preciso entender as diferenas entre os temas e a necessidade de inserir informaes, 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 modificaes. Desa a pgina 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); textdecoration: none;'>Wordpress Theme</a> designed by DT <a href='http://www.dreamtemplate.com' style='color: rgb(255, 255, 255); textdecoration: none;'>Website Templates</a> <strong/> </strong> </small> </div> </div> Salve as modificaes.