Baixar Brasil Baixar Templates Novos Top Novos download

Avatar
Colocando autor abaixo do titulo do post

Koe Galera! aqui é o Matheus Pereira e estou trazendo + 1 tutorial aqui para a Design On Storm. Bom sem mais delongas vamos a esse tutorial: Autor abaixo do título do post.

Bom vá em editar HTML logo depois procure por:
<div class='post-footer-line post-footer-line-1'>

Você com certeza verá 2 linhas como essa, porem trabalharemos apenas com a primeira.  Dentro desse div estaremos removendo o código do autor da postagem e coloca-lo no autor da postagem. Buscando pela linha que eu falei logo acima você provavelmente encontrou um código da seguinte forma:

<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>         <b:if cond='data:top.showAuthor'>           <data:top.authorLabel/>             <b:if cond='data:post.authorProfileUrl'>               <span class='fn'>                 <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>                   <data:post.author/>                 </a>               </span>             <b:else/>               <span class='fn'><data:post.author/></span>             </b:if>         </b:if>       </span> <span class='post-timestamp'>

Então você remove toda as partes menos o código: <span class='post-timestamp'> e o código: <div class='post-footer-line post-footer-line-1'>. . Então logo apos remover todas a partes menos as mostradas acima você deve procurar pela seguinte linha:
<div class='post-header-line-1'/>

Novamente tem 2 linhas mais trabalharemos apenas com a primeira. Bom abaixo da PRIMEIRA linha iremos adicionar o seguinte código:
<div style='color:#XXX;float:left;margin-top:XXpx;margin-left:XXpx;font-family:XXXXX;font-size:XXpx;'> <data:post.author/> </div>

Bom assim está feito a mudança. Mais para encerrar esse tutorial com chave de ouro você deverá ver uma legenda do código acima:

color:#XXX; ------------Aqui você define a cor do texto do autor margin-top:XXpx; -------Aqui você define se o texto sobe(usando números positivos) ou desce(usando números negativos) margin-left:XXpx; -------Aqui você define a distância do texto com relação ao lado esquerdo font-family:XXXXX; ----Aqui você define a fonte que irá ser (Arial, Calibri, Impact, etc). font-size:XXpx; ---------Aqui você define o tamanho da fonte.

Bom é só isso, espero que tenham gostado.



~Matheus Pereira.

0 comentários:

Postar um comentário