Linkbão Oi Torpedo Oi Torpedo Web Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online Resultado Lotofacil Resultado Lotogol Resultado Mega-sena baixa-facil Resultado Loterias Fofocas E-Scripter Claro Torpedo

3/20/2010

como converter o tema Green Dark do próximo para o Blogger.

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

Convertendo tema do Wordpress para o Blogger II

blogs01

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.  e aguarde o próximo  poster.

 

Bookmark and Share

0 comentários:

Postar um comentário

seja bem vindo ao mundo do doutorblogs, e sendo asim espéro ser merecedor de suas amizades e lhe convido para visitar mais e ser um dos Seguidor de nosso blogs.
atenciosamente douotrblogs.

Copie o código referente a imagem e cole
:-A :-Z :-C :-X :-E
:-F :-G :-H :-I :-J
:-K :-L :-M :-N :-O
:-P :-Q :-R :-( :-T
:-a :-e :-i :-o :-w

uma lista com as últimas postagens que ira gostar.

Hello visitante seja bem vindo sua presença é um prazer

ads ads ads
 

Recommended links

  • ads
  • ads
  • ads
  • ads

DOUTOR. Copyright © 2009 Gadget Blog is Designed by Ipietoon Sponsored by Online Business Journal

Creative Commons License
This work is in the Public Domain.
Linkbão Oi Torpedo Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online torrent Resultado Dupla Sena Resultado Loteria Federal Resultado Loteca Resultado Lotofacil Resultado Lotogol Resultado Lotomania Resultado Mega-sena Resultado Quina Resultado Timemania baixa-facil Link-facil Resultado Loterias