Oi gente linda! Aqui é a Liah -como vocês podem ver pela imagem acima-
Primeiramente, quero dizer que estou muito feliz por estarem gostando das meninas da equipe. Recebemos algumas críticas maldosas Aos poucos estou fazendo os tutoriais da minha lista de pedidos (aqui um print pra quem não acredita na existência dela), e este é um dos que estão lá há um bom tempo, mas que ainda é muito útil e procurado. Vocês irão aprender a colocar os links "x Comentários", "Postado por" e "Marcadores", abaixo do título dos posts. Eles geralmente ficam no final do post, mas é possível movê-los de lugar modificando alguns códigos do seu blog. O resultado será esse:
Print do Kawaii World |
Este tutorial mexe com códigos bem extensos, então preste bastante atenção e faça download do modelo do seu blog antes. Assim, se algo der errado é só restaurar como estava antes.
Primeiro verifique se esses links estão visíveis no final do post. Se eles não estiverem lá, vá em layout, clique em editar no gadget correspondente ás postagens e marque a opção correspondente a cada link. Depois certifique-se de deixá-los na mesma linha assim:
Agora abra o modelo HTML do seu blog, e marque a opção "Expandir modelos de Widgets"
Aperte Ctrl+F e procure por: <div class='post-footer-line post-footer-line-1'> Irá mostrar dois resultados, o que queremos para este tutorial é o primeiro (1 de 2)
Você verá vários códigos depois deste que procurou. Selecione tudo desde <div class='post-footer-line post-footer-line-1'> até </div> e apague. Deve ficar assim:
Agora aperte Ctrl+F novamente e procure por: <div class='post-header'>
Novamente teremos dois resultados, mas o que nos interessa é o primeiro. Abaixo dessa linha que você procurou, cole o seguinte código:
Código
<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>
<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 se está tudo certo e salve. Para personalizar os links é só colar o código a seguir acima de ]]></b:skin> :
Código
.post-header { text-align: center; /*Alinha no centro*/
font-size: 11px; /*Tamanho da fonte*/
border-bottom: 1px dashed #000; /*Borda inferior*/}
.post-header a { color: #000 !important; /*Cor dos links*/}
.post-header a:hover {color: #fff !important; /*Cor dos links ao passar o mouse*/}
font-size: 11px; /*Tamanho da fonte*/
border-bottom: 1px dashed #000; /*Borda inferior*/}
.post-header a { color: #000 !important; /*Cor dos links*/}
.post-header a:hover {color: #fff !important; /*Cor dos links ao passar o mouse*/}
Espero que todos consigam fazer :) Vou começar a responder os comentários que eu não puder retribuir aqui no blog mesmo então fique atento para ver a resposta para o seu.
Kissus da Liah!
Amei o tutorial Liah! E Não liga para essas pessoas invejosas :3
ResponderExcluirthe-kawaii-candy.blogspot.com.br
Gostei o/
ResponderExcluirantes eu não tava conseguindo *u*
acho que agora consigo :3
obrigada adália~♥
Reign of Otakus♥
Espero que consiga dessa vez :D
ExcluirDe nada!
Muito bom o tutorial, eu tava procurando há tempos :D
ResponderExcluirhttp://the-paradiise.blogspot.com.br/
Adalia posta mais layout free
ResponderExcluirAdorei esse tutorial, já estou usando no meu blog, ele é perfeito!
ResponderExcluiranjodecereja.blogspot.com
Sempre q tentei outros tutoriais de outros blogs nao consegui, este é dificil mesmo. está muito bem explicado. se eu conseguir, volto aqui. bjs quatroestacoes.blog.br
ResponderExcluirFaz quanto tempo que não uso essa opção em algum layout meu, mas é tão fofo. Algo que eu observei é que aqui as instruções parece bem mais fácil, do que os outros tutoriais com a mesma finalidade em outros blogs. Sempre ajudando muito Liah. (:
ResponderExcluirBeijos.
- Always Fearless
Que bom saber que estou facilitando a vida de vocês >.< rs
ExcluirKissus!
qquando eu era novinha por aqui, fui tentar fazer esse tuto, e aconteceu uma parada muito doida não ficou embaixo do titulo do post mais sim ficava dando erro o/
ResponderExcluirmais vou tentar seguir por esse aqui o/
acervo-de-livros.blogspot.com
Verdade, ainda mais comentários vindo de anônimos, tudo ridículos sem coragem!
ResponderExcluirEstá mesmo de parabéns a equipe, bom que o blog irá ficar mais atualizado do que de costume né?! ^_^
Haha' ótimo tutorial Liah, coincidência, acabei de postar no A.N ainda agora um tutorial sobre o post footer também hihi, só que o post foi diferente, o sue foi mais útil hehe!
Adolescente Nerd
Gostei da ideia, mas tem como deixar ele com esse mesmo efeito só que em baixo como divisor de postagem?
ResponderExcluirEstou fazendo um Layout novo, peguem alguns tutos daqui, vou postar seus créditos no post de retorno das atividades, alguns deles foram muito úteis mas outros não deram certo. Obrigada!
http://fashionistasassumidas.blogspot.com.br/
Bom é só pegar o código css".post-header { text-align: center; /*Alinha no centro*/
Excluirfont-size: 11px; /*Tamanho da fonte*/
border-bottom: 1px dashed #000; /*Borda inferior*/}
.post-header a { color: #000 !important; /*Cor dos links*/}
.post-header a:hover {color: #fff !important; /*Cor dos links ao passar o mouse*/}". E nas partes ".post-header"substitua por ".post-footer" (substitua todos) e pronto vai ficar como divisoria no final do post. beijoos
Muito lindo e muito fácil haha. Ou seja, perfeito!
ResponderExcluirVou tentar ;)
Beijos
www.picturesandreams.blogspot.com
Liah, esse foi o único que pegou comigo! Pois já havia tentado mais tinha conseguido! Sobre essas pessoas que comentaram em anônimo, são pessoas que não tem nada para fazer, é tem inveja do seu blog, que é mega divo!
ResponderExcluirKisus...
Things Crazy
Sim,consegui este !
ResponderExcluirhttp://commands-of-my-life.blogspot.com.br/
Super legal o tuto!
ResponderExcluirprincessofjeans.blogspot.com
Ótimo tuto e bem explicado como sempre Lia, não é atoa que me ajudou desde o início hah <3
ResponderExcluirBeijos!
Too Kawaii
Nossa, nunca consegui fazer isso, mas dessa vez eu vou tentar e acho que vai ficar certinho!!
ResponderExcluirÓtimo tutô!
Beijo :)
pqngarota.tk
ADOREI MESMO ADOREI< OBRIGADAAA >_< kissus ;3
ResponderExcluirAdorei o tutorial! ^.^
ResponderExcluirJá conhecia e o resultado é realmente incrível!
Até mais :3
@Catching Stars
Alguem sabe como faço para editar o espaço dos meus comentarios e que ele fique aparecendo sem colocar ele em pop-up ?
ResponderExcluirAdorei o tutorial!!
ResponderExcluirTá bem explicadinho e fica uma graça!
Beijos!
blogdaruiva
Ameei o tuto, muito útil!! Tava atras dele a dias!! Já to usando X.X!!
ResponderExcluirVlw Liah!!
..::Loucura Controlada::..
Amei o tutorial,mas não tô conseguindo usar.Beijos♥
ResponderExcluirblogmakeshine.blogspot.com
lool adorei, faz muito tempo que eu procurava esse tutu é nunca achava
ResponderExcluirobrigada mesmo
http://blog--da--moda.blogspot.com.br
http://blog--sobre-tudo.blogspot.com.br
Já usei algumas vezes. Acho que dá um toque de "delicadeza" ao blog.
ResponderExcluirPelo menos é assim que penso u_u
Muito bem explicado ^3^
Kisu
http://the-kawaiis.blogspot.com
Eu uso um parecido *u* Adorei o tutorial <3
ResponderExcluirBeijos ~
Sweet Geek || Clique no Perfil
Este comentário foi removido pelo autor.
ResponderExcluirNão consegui ;c
ResponderExcluirhttp://bytheway-foryou.blogspot.com.br/
Adoreii adoreei !! Obrigada !!
ResponderExcluiroi Liah, como pode ver no meu layout q coloquei free, consegui fazer sim. só nao posso apagar div class='post-footer-line post-footer-line-1' se não dá erro. dai deixo la e deu certo. bjs
ResponderExcluirquatroestacoes.blog.br
Oie Liah, gente amei esse tuto vou usar no meu próximo layout. Flor não tive problema nenhum com as postadoras e não de bola para gente sem saber oque ta falando e sim muitos invejosos, olha se cada vez eu ganhasse uma moeda de 1 real de quantas invejosas que temos nossa!!! Já estava RICA,além não fique se estressando com pessoas sem gosto ;) beijos, bah flor eu queria ser postadora daqui que pena não tem mais vaga né flor??
ResponderExcluirBeijinhos amooooooooooooo seu blog e amei o novo layout parabéns !
Oi liah, tudo bem??
ResponderExcluirhttp://glam4teste.blogspot.com.br/
Eu tenho os comentários em baixo do título dos posts e eu queria retirá-lo dali e por para o rodapé do post, como faço???
Não consegui >.<
ResponderExcluirOi lembro de quando o cherry bomb usava a data deste jeito
ResponderExcluiré realmente legal o tuto Liah
ResponderExcluirpor isso que voçe é uma cherry kkkkk
bombomkawaii.blogspot.com
ele ainda não esta popular
tchau ;)
Acho que vai ficar um pouquinho mais difícil de colocar alguns códigos por causa da nova versão do html do blogger... :S
ResponderExcluir(/ minhasstuff.blogspot.com \)
Tava dando uma olhada em seu blog, achei lindo, e seus tutoriais são bem explicativos, parabéns.
ResponderExcluirQueria colocar essa caixinha de comentar no final da postagem mas só fica o envelopinho :(
Este comentário foi removido pelo autor.
ResponderExcluirEu fiz mais ai quando fui visualizar ficou em cima e em baixo ! :(
ResponderExcluirEu fiz ficou bom porem quando finaliza fica em cima e embaixo
ResponderExcluirOs seus posts estão me ajudando muito com o meu novo blog!! Ah! E eu fiz em dois blogs a máscara e no primeiro ficou certinho e no segundo ficou em cima e em baixo!! Que pena que o blog foi excluído!
ResponderExcluirOobrigado me ajudou mt <3
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirNão estou conseguindo, me ajuda! :( Dá erro no xml, algo assim... http://cogumelocintilante.blogspot.com.br/
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirConsegui, mes daí fica o autor, as tags e os comentários certinhos abaixo do título do post, mas o que fica no footer não saiu, daí fica duas vezes :(
ResponderExcluirO meu também está assim, segui as regras certinhas e fica repetido
ExcluirNo meu também :(
ExcluirOlá. No meu blog não tem a opção ]]> :
ResponderExcluireu não cosegui
ResponderExcluireu estraguei meu blog fazendo esse tutorial
ResponderExcluirNão estou conseguindo :(
ResponderExcluirhttp://themonsterhighuniverse.blogspot.pt/
Nao consegui :c
ResponderExcluirVou ver se consigo
ResponderExcluirparece facil!
Valeu pelo tuto! Estava procurando!!!
http://docebunny.blogspot.com.br/
lindinha.. deu certo mais fica aparecente repetido o q faço?
ResponderExcluirhttp://melhor-metade.blogspot.com.br/
Não estou conseguindo no template :'(
ResponderExcluirNão estou conseguindo no template :'(
ResponderExcluirSalvei não aconteceu nada '-'
ResponderExcluirSalvei não aconteceu nada '-'
ResponderExcluirEu consegui mas queria que ficasse centralizado como faço?
ResponderExcluirGostaria de saber como posso remover o nome "marcadores" de lá.
ResponderExcluirMe ajudou muito, mas por algum motivo
ResponderExcluirNão conseguir colocar
Sempre dá erro :\
eu nao estou conseguindo
ResponderExcluir