quinta-feira, 9 de agosto de 2012

Personalizando o título das postagens

Hooy gente  eu dei uma sumidinha daqui né? Mais por bons motivos, estou preparando algumas surpresas pra vocês.
Aaah... Estou anotando todos os pedidos de goodies que vocês me mandaram, ok? E os que eu souber fazer é claro que estarei disponibilizando aqui no blog!

Sobre o tutorial de hoje se trata de algo muito simples. Certamente você já viu em algum blog ou até mesmo no seu, o titulo da postagem super personalizada e quando você clica no post em questão fica totalmente diferente e sem personalização alguma, certo? Isso acontece porque provavelmente você ainda não sabe que o titulo da postagem tem 3 momentos:

- O momento que está na página inicial 
- O momento em que se passa o cursor em cima do titulo 
- E por fim o momento em que você já clicou no título e está na página que mostra somente o post.

E pra cada um desses ''momentos'' existe um código especifico pra você personalizar. Gente eu juro que não é difícil, segue essa linha de raciocínio que vai dar tudo certo (risos.

O código de personalização é esse:
1° Você irá copiar todo esse código 
text-align:center; /*deixa o título dos posts centralizado. Se você não quiser centralizá-los, apague essa linha.*/ 
font-family: "NOME DA FONTE AQUI"; /*Se refere a fonte*/ 
 font-size: 26px; /*Tamanho da fonte*/
color: #FF1493; /*Se refere a cor da fonte*/ 
border-bottom: 2px dashed #FF1493; /*Se refere a borda pontilhada abaixo do titulo. Se não quiser apague essa linha*/ 
background: #fff; /*Nesse trecho você pode colocar uma cor de fundo*/
Pra facilitar eu coloquei a explicação do lado de cada código. A fonte eu vou ensinar a mudar logo no final desse post. 

2° Agora vá no seu HTML e procure por: h3.post-title a {
(Esse código se refere ao momento em que título do post está na página inicial). Agora cole o código de personalização ANTES dessa chavinha:

3° Agora faça o mesmo com os outros 2 códigos:
h3.post-title a:hover {
(Este código refere-se ao momento em que se passa o cursor em cima do titulo).

h3.post-title {
(Este código refere-se ao momento quando o leitor já clicou no link da postagem e está na página onde aparece somente o post que ele está lendo).

Visualize. Se estiver tudo OK salve!

Por último personalize a fonte:
Para personalizar a fonte é só clicar aqui.
:iconcutepandaismybf:
É isso! Espero que gostem do tutorial de hoje 

94 comentários :

  1. Adorei , ainda mais que estou deixando meu blog com uma carinha melhor !

    lovelylittletoo.blogspot.pt

    ResponderExcluir
  2. Yoooo \o/
    Finalmente um tutorial desse, eu só sabia do normal e do hover *O*
    Obrigadão jackie , favoritei!
    http://garotadoolharsincero.blogspot.com

    ResponderExcluir
  3. Ótimo tutorial Jack, como sempre arrasando! (:

    Beijos! http://porckybunny.blogspot.com.br

    ResponderExcluir
  4. jackie, ensina como faz pra colocar a imagem aqui onde comenta???? bjks !

    ResponderExcluir
  5. Muito bem explicado esse tutorial. No meu quando eu clicava no titulo ele não ficava personalizado na nova página, já tá corrigido .

    www.bugigangazdanet.blogspot.com

    ResponderExcluir
  6. Heey Jackie, que saudades ! Ótimo tuto :3, eu fico louquinha quando vc coloca tutoriais super úteis -como esse-. Beeijo !

    ResponderExcluir
  7. a quanto tempo não lembra de mim?gostei do post viu estava procurando ele ontem!bom o meu antigo blog foi haquado por isso o meu novo ta aqui ta1tchal jackie

    fefe-strawberry-jam.blogspot.com.br/

    ResponderExcluir
  8. jackie xD como vc pos essa imagem a dizer 'Mini F.A.Q'?
    eu ja tinha personalizado meu titulo diferente desse e gostei mais.
    xicablog.blogspot.pt
    beijossssss

    ResponderExcluir
  9. Amei o tutu Jackie!
    Beijos..
    http://garota-preciiosa.blogspot.com

    ResponderExcluir
  10. Ótimo tutorial!!

    http://garotavertigem.blogspot.com.br/

    ResponderExcluir
  11. Oii Jackie!! Pedi um tuto, cabeçalho em toda largura do blog, vc postou para mim um link (inclusive, obrigada!), consegui fazer tudo o que o blog Go Imagine passou, mas eu gostaria de colocar um background com o cabeçalho e não somente uma cor, não sei se vc ainda está aceitando pedidos mas se puder atender este agradeço!! Bjooss

    http://agarotadocachecolrosa.blogspot.com.br/

    ResponderExcluir
  12. Você gosta do meu blog, acha ele bonito? É que é por causa que você segue ele e é minha afiliada, isso quer dizer que você gosta dele não é? (se gosta, por que não divulga ele ou recomenda?)

    ResponderExcluir
  13. Jackie, muito obrigada!
    Eu tava tentando ontem sozinha no html, eu tava aumentando aquele h3.post-title a:visited { achando que era o que aparecia quando clicava heuehuehueheuheu Tragédia!

    Beijinhos fofa

    Moda Ponto

    ResponderExcluir
  14. Eu queria pedir um tuto de como fazer essa Mini F.A.Q. Qual programa vc faz e qual a fonte e tamanho que usou? Muito obrigada ;D

    ResponderExcluir
  15. Haaaaaaaaaaaaaaaa Jackie você me salvou guria!!!!!!!!!!
    http://brilhants.blogspot.com.br/

    ResponderExcluir
  16. Adorei o tutorial! Jackie, amo seu blog <3


    http://querido-mundo-das-garotas.blogspot.com.br/

    ResponderExcluir
  17. Nossa , vai ajudar mt , obrigada Jackie ! Bjs
    sz

    ResponderExcluir
  18. Adorei o tutorial!Será super util pro próximo layout do blog :)

    Jackie,sinto lhe informar que as respostas da entrevista não chegaram '='

    http://cupcakegoodies.blogspot.com.br/

    ResponderExcluir
  19. Hey {sei q vc não gosta mto de comentários não referentes ao post, mas tinha q comentar o geral :P}!

    Conheci seu blog através do Piink Cookie e amei! Amei o fato de vc fazer tutoriais e tal {sou meio totalmente perdida em questão de html} e seus posts vão me ajudar muito!

    Tô comentando rapidinho na correria aqui, mas vou voltar depois :}

    Bjos bjos!

    www.naosouumbolinhodearroz.blogspot.com

    ResponderExcluir
  20. ótima dica!
    http://blogandocomtatah.blogspot.com.br/
    :*

    ResponderExcluir
  21. Ótimo tutorial,gostei muito bem elaborado :D

    http://dezapaixao.blogspot.com.br/

    ResponderExcluir
  22. Quanto eu estiver com mais temo eu faço.. Se não vou enrolar tudo, haha..

    Já ia puxar suas orelha, kkk. Mas como é por um bom motivo *--*, vou ficar esperando...

    Beijos, Guriiia

    ResponderExcluir
  23. com isso não tenho problema meu layout veio perfeito, uma guria fez pra min já com todos detalhes certos HAHA'
    :l:

    ResponderExcluir
  24. É que vc havia me dado um aviso previu dizendo que iria enviar ;)

    http://cupcakegoodies.blogspot.com.br/

    ResponderExcluir
  25. Jackie,eu não entendi!
    Onde que eu coloco esses códigos?E que outros dois códigos é esse? Confusa *o*

    beijo;*
    bonequiinha-de-luxo.blogspot.com

    ResponderExcluir
  26. Obrigada pelo tutorial, vou usar de certeza ;)
    cat-girl-cg.blogspot.pt

    ResponderExcluir
  27. Nossa Jackie, eu estava precisando muito desse tuto, ajudou bastante ! Obrigada *-*

    ResponderExcluir
  28. @Kimberly Divulgações por pedidos só nessa página>>http://isjackiezzdream.blogspot.com.br/p/extras.html

    ResponderExcluir
  29. @Xica52/Lafy
    @Dudinha
    @Anônimo

    http://isjackiezzdream.blogspot.com.br/2011/10/substituir-postar-um-comentario-por-uma.html

    Anônimo usei o photoscape.

    ResponderExcluir
  30. @Nick

    O que o JD significa p/ você? Meu porto seguro! Lá eu me sinto totalmente à-vontade pra tratar de todos os assuntos que estão presentes no meu dia a dia ou não. O pessoal que visita o JD diariamente me dá o maior apoio e eu adoro isso (:
    Por que pra você,é tão importante não desistir de ser blogueira? Qual é sua opinião referente aos "Anônimos" e "hackers"? Manter o blog é meu Hobby, eu amo isso e sou blogueira porque realmente gosto e não espero receber nada em troca! Por isso nunca pensei em desistir de bloggar, ás vezes até dou uma sumida por alguns dias, mais sempre volto.
    Anônimos são conseqüência... É incrível como essas pessoas adoram criticam sem mostrar a cara.
    Até hoje nunca precisei lhe dar com hackers (amém!). Mais acho uma pena alguém perder tempo apenas para hackear alguma rede social que não lhe pertence.
    O que é mais importante em um blog.O Design ou o conteúdo?
    ‘’Ambos’’ são importantes em um blog! Um design com cores que combinam entre si deixa o blog mais ‘’aconchegante’’ e facilita a leitura.
    Quais são sua principais dicas para um iniciante?
    ‘’Paciência’’ seu blog não vai crescer de um dia para o outro. Vai com calma, faça amizade com outros blogueiros(as), faça posts bem elaborados e criativos! Nada de copiar, todo mundo sabe diferenciar o plágio do original.
    Obrigada mais uma vez por aceitar ser entrevistada pelo meu blog :)
    Eu que agradeço o convite Nick *---* Beijus pra todos ;D

    ResponderExcluir
  31. oi linda, amei este turorial, posso usar no meu prossimo layout talvez!, eu gostaria de pedir um tuto sobre "como fazer um cabeçalho transparente"

    e como colocar imagem no titulo de gadge(por HTML) okeii? beijinhos e até mais

    ResponderExcluir
  32. Meio complicadinho,as se alguem quiser caprichar no lay,este tuto é uma boa opção (:

    http://www.meianoitebr.com

    ResponderExcluir
  33. Jackie, eu tava procurando esse tuto, caraca valeu mesmo.
    Ah e tenho uma pergunta, se não tudo bem...
    É que achei seu bg em um site, e não me lembro qual e eu salvei (e já que não me lembro o site, lhe daria os créditos já q vc usa), e queria usá-lo, queria saber se posso, se não tudo bem!!!! Bjs

    meninasapeca-ms.blogspot.com

    ResponderExcluir
  34. personalizei meu titulo ,

    :), beijos,
    Jackie, dá uma passada lá? por favor
    http://doonadaa.blogspot.com.br/

    ResponderExcluir
  35. Ówin obrigada, seu blog é um arraso..
    Muito boom o tuto, um dia irei de usa-lo..
    Abraço Maika..

    ResponderExcluir
  36. @yasmin Ribeiro Você pode fazer o cabeçalho no photofiltre pra ficar transparente (:

    e o outro tutorial aqui>>http://isjackiezzdream.blogspot.com.br/2012/06/personalizando-o-titulo-dos-gadgets.html

    ResponderExcluir
  37. Oi fofa,nao achei a palavra,tem outra palavra que sirva?
    Beijos
    http://portal-do-mundo.blogspot.com.br/

    ResponderExcluir
  38. oi flor graças aos seus tutoriais estou conseguindo fazer varias coisas no meu blog eu fiz um post no meu blog usando o seu tutorial esse ai do titulo da postagem mas te di os créditos ta bom?bjs
    http://larissapradodesousa.blogspot.com.br/#

    ResponderExcluir
  39. Oi Jackie! Eu não consigo personalizar o titulo do post quando já está clicado. Tem outro jeito de fazer? O meu não está dando certo de jeito nenhum

    Beijinhos <3
    Garota Inocente

    ResponderExcluir
  40. Jackie eu fui tentar fazer isso e consegui,mas o titulo da pagina onde fica só o post está pequeno,como eu faço para deixar do mesmo tamanho que na pagina inicial?

    ResponderExcluir
  41. Eu procurei isso pelos 4 cantos do mundo, nunca entendi porque na página o post ficava diferente!
    me dava uma raaaaiva!
    Obrigada flor!
    http://taste-thesky.blogspot.com.br

    ResponderExcluir
  42. Jackie, como faço para colocar a linha pontilhada em cima dos títulos das postagens? bjs

    ResponderExcluir
  43. Viciada , viciada , encantada com esse blog. :))

    ResponderExcluir
  44. como coloca o pontilhado até o final, tipo, não só onde está escrito? Tipo o desse blog http://www.depoisdosquinze.com/? Beijos

    ResponderExcluir
    Respostas
    1. Eu ia responder no seu blog mas vc já conseguiu... Desculpe a demora :(

      Excluir
  45. MUITO BOM! Finalmente consegui arrumar. Seus blogs é um dos favoritos quando resolvo mudar o lay do blog :DD Obrigaaada!

    http://achar-e-comprar.blogspot.com

    ResponderExcluir
  46. Jekie, deu tudo certo, mas eu só consegui o 2º código, já cliquei em expandir modelos de wideget e tudo mais e nem sinal de código.
    parabéns pelo blog.

    ResponderExcluir
  47. Exatamente o que eu precisava!! Thanks!

    ResponderExcluir
  48. Oiin, pq o meu html não tem esses códigos?

    h3.post-title a {
    h3.post-title a:hover {
    h3.post-title {

    ResponderExcluir
    Respostas
    1. Talvez pq vc já tenha editado essa área ou pq vc não usa o template viagem do blogger

      Excluir
  49. Alguém me ajuda?
    Porque o meu título não está centralizado? ):

    ResponderExcluir
  50. me ajudemmm, na parte 2 eu procurei o codigo mas não tem ele lá!

    ResponderExcluir
  51. Amei,Eu Adorei No Meu Blog Fico Lindo,Primeiro Quando Começei a Ler Pensei Que Ia Ser Dificil Mas Dps Vih Qui Era Facil,Valeu A Pena,Beijinhos

    ResponderExcluir
  52. Gostei muito do seu blog e estou seguindo :)
    Retribui seguindo o meu?www.sweetspaceasj.blogspot.com.br

    ResponderExcluir
  53. Muito obrigada de verdade por esse tutorial!

    Eu estava super irritada com o fato dos meus posts sempre ficarem com o titulo errado quando ia para o post, graças á você consegui arrumar isso de forma simples e fácil, agradeço muito mesmo.

    http://tempopranada.blogspot.com.br/

    ResponderExcluir
  54. Exelente dica obrigado estou usando no meu blog.

    ResponderExcluir
  55. Amo demais esse tutorial e sempre uso ele! É o melhor para personalização de título que já encontrei ^^

    ResponderExcluir
  56. êe consegui mudar, muito obrigada, adorei!

    ResponderExcluir
  57. Obrigada Fazia horas que eu estava tentando, achava milhos de tutoriais diferentes e o seu foi o Melhor <3 muito obrigada

    ResponderExcluir
  58. Me ajudou bastante. ótimo tutorial :)
    Beijos

    Bella Tulee | Fan Page

    ResponderExcluir
  59. Obrigada! ^-^ Deu super certo!! Eu fiquei pesquisando um tempão um tuto desse e finalmente achei um bom!
    Beijos, amei o blog ^-^

    ResponderExcluir
  60. Ficou muito fofinho, obrigada :D

    https://imperiokawaiis.blogspot.com

    ResponderExcluir
  61. Obrigado Meu Blog Ficou Muito Mais Lindo http://criatividadesnamoda.blogspot.com.br/

    ResponderExcluir
  62. Me ajudou bastante, obrigado !! adorei seu blog http://luanna-porto.blogspot.com/

    ResponderExcluir
  63. Nossa adoro seu blog ele me ajuda muito e tem ótimas leituras!
    O meu da tudo certo exceto na pagina de leitura continua a cor normal preto =/
    O ruim e que sempre da certo mas dessa vez não T-T
    Obrigada!
    Me visite quando quiser ---> http://palavrasaoventomgabriela.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que estranho Maria. Você verificou se fez tudo certinho? Ou se esta com alguma dúvida?
      Qualquer coisa tô aqui pra ajudar ;D

      Excluir
  64. - Adicionado aos favoritos - <3
    Aiin, seu design tá perfeito demaaais molier, parabéns !!
    Adorei o tutorial, me ajudou muito, com certeza !

    ~~> http://www.lovelylittletoo.blogspot.com.br <~~

    ResponderExcluir
  65. Adoreei, ficou lindo no novo layout que estou fazendo! Obrigada linda :)

    Beijos,
    www.blogterritoriofashion.com

    ResponderExcluir
  66. oi achei o seu blog a pouco mas eu já tou amando tem um layout lindo e um conteúdo super bom eu também tenho um blog aqui na blogsfera eu queria saber como colocar o titulo dos gadgets e a aprensentação das 4 imagens em cima do post

    se puder me responda.

    ~-~ obrigado

    ResponderExcluir
    Respostas
    1. Muuuuito obrigada pelo carinho Ale <3
      Olha só, não entendi muito bem a sua pergunta, creio que se refira ao slide, certo?

      Deixo o link de um tutorial que vai te ajudar bastante> http://cherry-liah.blogspot.com.br/2012/05/slide-de-imagens-com-numeracao.html

      Outro post que acredito que irá ser útil pra você:
      http://isjackiezzdream.blogspot.com.br/2015/04/tutoriais-que-usei-pra-fazer-meu-layout.html

      Beijos linda, qualquer coisa to aqui ;D

      Excluir
  67. obrigado linda vc é fofa continuo seguindo seu lindo maravilhoso blog

    ResponderExcluir
  68. oi tudo bem meu blog é novo e eu tava pesquisando e caí aquí mas o seu blog é muito fixe queria saber como você coloca a imagem do cabeçalho transparente e como consegues fazer o plano de fundo com imagens lá de cima e cor aqui de baixo .beijos

    ResponderExcluir
  69. Esse efeito aquarela do cabeçalho são pngs que encontrei no google, e montei no photoscape dps (:

    ResponderExcluir
  70. Oi! seu Blog é lindu♥
    no meu blog não fica com a fonte que escolhi"HONEY" o que eu faço?? não aparece ://
    se puder me ajudar eu agradeço♥

    http://coffeeemustache.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Segue esse tutorial aqui> http://isjackiezzdream.blogspot.com.br/2012/04/instalando-fontes-diferentes-no-blog.html

      (:

      Excluir
  71. Oi, não achei no HTML esse código aqui h3.post-title a { e agora?

    ResponderExcluir
  72. Olá!
    Não quero ser grossa e nem intrometida, mas estou avisando que eu tentei usar este tutorial no meu blog e não deu certo.
    Mas ai eu pesquisei outro igual a esse e estava explicando de um modo diferente, você não pode colocar antes da chave, é depois da chave.
    Peço que tome cuidado com o que você ensine, pois as vezes dá um bug no blog da pessoa e a pessoa não sabe como arrumar.
    Beijos
    www.blognekokawaii.blogspot.com

    ResponderExcluir
    Respostas
    1. Não é grosseria, vc apenas não entendeu o tutorial.
      Se vc prestar atenção existem DUAS chaves, uma é o começo do código e a outra o final.
      Obviamente é necessário colocar ANTES da chave final.

      Da uma olhadinha no print pra não ter erro (:

      Excluir
  73. O teu tutorial me ajudou a resolver um problema enorme no meu blog que á dias eu estava tentando resolver, muito obrigada <3

    ResponderExcluir
  74. Oi Jackie!
    Eu estava tendo um problema com o título das minhas postagens (quando clicava no link direto do post o título aparecia em outra cor/fonte etc). Não era exatamente o que você estava explicando no tutorial, mas prestando atenção nele eu percebi o que estava faltando no meu código e consegui arrumar. Obrigada, fiquei muito feliz! ^^

    Eating Peanuts

    ResponderExcluir
  75. Este seu tutorial foi muito útil, me ajudou.
    Eu ainda não entendi pq quando clico no título do post, o TÍTULO DO BLOG altera o formato (cor e tamanho) mas com base neste tutorial creio que vou achar a solução. Obrigado!

    ResponderExcluir

.