http://sonhoshtml.blogspot.com.br/2015/01/autor-marcadores-e-comentarios-abaixo.html
Autor, marcadores e comentários abaixo do Título do Post
Oiiiiiie coelhinhos *-* Como estão hoje??
Eu não estou tão bem assim... minha cachorrinha morreu anteontem. O nome dela era Lady e tinha 9 anos. Ela sofria com uma doença chamada cinomose e tinha hérnia de disco. A cinomose paralisou as suas patas traseira e por causa disso, ela não podia andar. Ela sofreu muito com essa doença, e o pior, não tinha cura :(
Estou muito triste com o falecimento dela ,mas estou aliviada por ela esta descansando em paz e não esta mas sofrendo! ~
Hoje trago um tuto a pedido de uma leitora do blog, que foi de por os links do Post-footer (autor, marcadores e comentários) abaixo do título do post!
O tutorial é bem complicadinho e requer MUITA atenção, mas tentarei ao máximo explicar bem explicadinho para que você consiga entender facilmente!!! Vamos ao tuto o/
Antes de fazer as modificações, salve um backup do seu blog!
FAÇA O TUTORIAL COM BASTANTE ATENÇÃO E SEM PREÇA!
Primeiro você vai em Layout Postagem no blog Editar e deixe marcado igual a imagem:
E depois, logo abaixo coloque da mesma forma, como mostra a imagem:
Transfira as "opções'' , abaixo onde está escrito " Título da postagem ". Depois Salve!!
Depois vá em seu Editor e procure por:
<div class='post-footer-line post-footer-line-1'>Você vai achar isso:
<div class='post-footer-line post-footer-line-3'><span class='post-location'>
Selecione desde:
<div class='post-footer-line post-footer-line-3'><span class='post-location'>
Até:
<div class='post-footer-line post-footer-line-1'>
~A imagem está horrível, mas é o exemplo do que terá que selecionar~
E substitua por:
<div class='post-footer-line post-footer-line-1'/>Ficando assim:
<div class='post-footer-line post-footer-line-2'>
</div>
<div class='post-footer-line post-footer-line-3'><span class='post-location'>
Visualize para ver se deu algum erro! Se não deu erro, continue com o tutorial!
Agora procure por:
<div class='post-header'>
Abaixo do código que procuramos, coloque:
Ficando assim:<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a></b:if> </b:if> </b:if> </span> | <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-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> <span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'> <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/> </a> </span> </b:if> <!-- quickedit pencil --> <b:include data='post' name='postQuickEdit'/> </span>
Visualize e veja se ficou assim:
Se ficou igual a imagem acima, você fez tudo certinho!
Agora para editar os links e centralizá-lo, você vai procurar por:
.post-footer {
Você irá achar ele assim:
.post-footer {
margin: .5em 0;
line-height: 1.6;
}
Substitua por:
.post-header { text-align: center; /*Alinha no centro*/
padding-top: 5px;
font-size: 11px; /*Tamanho da fonte*/
border-bottom: 2px solid #A3A2A2; /*Borda inferior*/}
.post-header a { color: #696969;!important; /*Cor dos links*/}
.post-header a:hover {color: #fff !important; /*Cor dos links ao passar o mouse*/}
Visualize novamente e veja se centralizou. Depois Salve!
Espero que tenham conseguido!!! Qualquer dúvida ou se estiver tendo problemas, deixe nos comentários que tentarei ajudar!! Bjos e até a próxima ♥
Tirei esse tutorial do Blog Sweet of cherry, mas da forma que estava ensinando lá, estava dando erro, então eu tive que simplificar e tirar algumas coisas. Quando usar dê créditos ao Sweet of Cherry ou Sonhos HTML.
0 Comentários