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).

02 fevereiro 2009

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

Artigos Relacionados

11 comentários:

Darkrai disse...

Ariane, você poderia por um tutorial de como colocar akele Slide que você pos no Template Clean, eu tava fazendo um template e consegui instalalo mas quando fui olhar lah no Internet Explorer o troço viro uma merda, ou se você souber como um Slide tipo aquele do Baixaki seria muito bom tambem.

Darkrai disse...

Ariane, você poderia postar um tutorial de como colocar aquele Slide com links igual ao do Baixaki. Estava tentando colocar aquele do Template Clean no meu Blog e ele pego no Fire fox mas no Internet Explorer 7 fiko uma merda

Giu Pereira disse...

Olá!
Adorei seu blog com a cara nova! antes estava muito bonito tbem! adoro seus tutoriais e graças a vc consegui fazer um template pro meu blog ! Depois passa pra dar uma olhadinha!

Parabéns pelo blog!

Áurea disse...

Olá Ariane,
Está tudo lindo aqui! Amei o template novo!
Simples, bonito e prático!
Não consigo se resumida! Rsss... Puxei à minha mãe. Tem horas em que estamos conversando que precisamos pedir para ela resumir o caso. A "baixinha" gosta de falar! Hahahaha....
Grande beijo no seu coração e tenha uma ótima semana!

pedro_botton disse...

Ariane, eu queria te agradecer pelo seu site, muito bom mesmo, eu achei quando ia reformular o meu, o refiz com suas dicas, me animei e fiz outro template, pr'umas amigas minhas. Se der, depois passa lá. E eu sei li sobre as perguntas, mas tem uma coisa que eu não tô conseguindo mesmo, eu queria deixar os botões do meu blog do firefox, do blogger e do rss um ao lado do outro, dá? beijooo

laemalgumlugar disse...

*

Oi Ariane! Eu sei que este espaço não é apropriado... massss...! =)
Amei seu novo template! Inclusive vc voltou com o "About" =;b

(((( Sucesso ))))

Tenha uma ótima semana!!

(,")Susy

*

PhantomLord disse...

Ariane, eu gostaria de converter o meu template de antigo blogger para o novo...

Poderia me ajudar?

Se quiser eu lhe mando o codigo do meu template e vc converte, ok?

Ariane disse...

PhantomLord, posso converter sim, basta entrar em contato pelo formulário. Mas, quero apenas adiantar que este é um serviço cobrado, ok? Abraços

Makay disse...

Ariane, kd a continuação do tutorial?
Abraços

Johnny disse...

Ariane, por favor tem como você converter esse tempalte http://www.elegantthemes.com/preview/TheStyle/ para blogger, por favor!

Meu msn é: Johnny_ferabrd@hotmail.com
Abraços. Eu já até tenho esse template salvo no meu PC (tudo dele, como se fosse eu ter comprado) no caso eu consegui baixalo. To começando a pensar que vou ter que criar um site mesmo... Converte pra mim? Eu quero usar ele como referência no meu site de revista.

RM2 COMUNICAÇÃO disse...

Bom dia Ariane..
Bom eu tenho um blog tambem ou seja estou apenas começando e gostaria de algumas dicas porr exemplo : eu quero colocar um linkbar para organizar o meu blog.
Abraçosss.
meu blog é :
http://rm2comunicacao.blogspot.com/

Postar um comentário

Os comentários são moderados.