13/07/2012

Personalizando o Título da postagem

Hello pessoas legais, como andam? Graças a meu bom DEUS, a minha Internet voltou ~~todos gritam~~ e eu poderei voltar com a rotina normal do Blog ok? 

E pra voltar voltando ~~sério?~~ Hoje tem Tutorial *-* esse é pra quem quer aprender a personalizar de Várias maneiras o estado Normal e o estado Hover do Título das postagens, confere ai rapidão!

Texto Centralizado
Para deixar o Texto de cada título centralizado Vá em Design – Editar HTML – Ctrl+F e pesquise por h3.post-title {
Assim que você achar esse trecho, cole ao lado dele o código abaixo:
Text-align: Center;
Linha Pontilhada embaixo do Título
Vá no Painel do Blog – Editar HTML – Ctrl+F e procure por h3.post-title {
Assim que achar o código acima, cole o código seguinte abaixo de margin-top: 20px; o código abaixo:
Border-bottom: 1px Dashed #000;
Você pode personalizar todas as partes do código acima, isso varia de acordo com as suas vontades é claro.
Fundo Colorido
Esse Tutorial é bem parecido com o Anterior, só que ao invés de colocar o código da linha pontilhada abaixo de margin-top: 20px; cole esse outro:
Background: #FFF;
Se você quiser deixar o Fundo com as bordas arredondadas ou diferentes, acrescente abaixo do código acima esse outro código:
Border-radius: 10px 10px 10px 10px;
Modifique a cor do fundo e a espessura das bordas do jeito que você quiser.

Fonte diferente nos Títulos
Para colocar fonte diferente nos títulos das postagens, você precisa antes adicionar o código no HTML do seu Blog.
Entre no Site do Google Web Fonts, escolha a fonte que você deseja e Clique em Quick-Use assim como na imagem abaixo:
Crédito da Imagem - Kawaii World

Em seguida, na outra página que abrirá, copie o código HTML da fonte assim como no print abaixo:
Crédito da Imagem - Kawaii World

Agora, vá no Painel do Blog – Design – Editar HTML – Ctrl+F e pesquise por <head>. Logo que achar, cole o código da fonte que você copiou em cima do código que você achou. Não se esqueça de colocar a / antes do último > caso você não coloque, o código não irá funcionar.
Por último, pesquise por h3.post-title a {
e cole o código seguinte, abaixo do que você encontrou.
font: normal 25px 'Nome da sua Fonte', Arial, Tahoma, Helvetica, FreeSans, sans-serif;

Hover do Título em Negrito, Itálico ou Sombreado
Vá em Design - Editar HTML - Ctrl+F e procure por text-decoration: underline; e troque o que está em destaque por none o código resultante deve ficar assim:
text-decoration: none;
Se você quer o Hover do Título em Negrito cole o código seguinte, abaixo do que você acabou de modificar:
font-style: bold;
Se você quer o Hover do Título em Itálico, ao invés do código anterior, cole esse código?
font-style: talic;
Mas, se você quer o Hover Sombreado, não cole nenhum dos códigos anteriores, mas sim este abaixo:
Text-shadow: 1px 1px 1px #000;
Postagem grandona não foi gente? Espero que tenha sido útil para todos :) Até mais!

14 comentários:

  1. Adoree !
    Adoro personalizar o titulo do post !
    Nhaac ~~> www.piinkrock.tk

    ResponderExcluir
  2. Hum, esses códigos todos ai são muito interessantes e super úteis! Adoro ver o s seus tutoriais, sempre muito bem explicados. E outra, completinho e super bem feitos. Fico feliz que sua internet tenha voltado e que você possa continuar com a rotina normal do blog. Um beijo!
    the-zombie-attack.blogspot.com

    ResponderExcluir
  3. Uau, curti o post, mas não só porque é sobre personalizar o titulo do Post, mais sim porque do mesmo jeito também dar para mim editar sidebar entre outros lugares com esses códigos (*-*)
    Thank You!

    http://www.ophera-phantom.blogspot.com.br

    ResponderExcluir
  4. A-D-O-R-E-I esses tutoriais, são mega úteis e dão um ar de blog organizado. Ainda bem que sua internet faltou, fã não pode ficar sem ídolo de jeito nenhum. Bejú:D
    http://www.viciadasemcupcake.blogspot.com.br/

    ResponderExcluir
  5. Por mais que já soubesse os efeitos achei muito bacana os tutoriais! Super bem explicados e simples de fazer.

    rosaschiclete.blogspot.com

    ResponderExcluir
  6. Adorei o tutorial, super básico e muito útil. Já até salvei nos favoritos.

    http://comoasborboletasblog.blogspot.com.br/

    ResponderExcluir
  7. Adorei os tutoriais. Eu não sabia como colocar pontilhado em baixo do titulo. Que bom que a sua internet voltou.
    http://startdreamy.net.tc

    ResponderExcluir
  8. Adorei as dicas, por isso seu blog é tão lindo *-*
    http://gilsilene.blogspot.com.br/

    ResponderExcluir
  9. Uaaaaaal que bom que está de volta Alex, ameeei os estilos, ótimos, já conhecia alguns ! Aguardo mais postagens !

    Beeeeijos
    #Nhaaac >>>http://the-lovers-official.blogspot.com/

    ResponderExcluir
  10. Amei os tutoriais! Você sempre mostra bem explicadinhos!
    Beijo,

    blogmodaonline.blogspot.com

    ResponderExcluir
  11. Amei o tutorial Alex, muito bom saber que o POM está de volta!

    ResponderExcluir
  12. Ah, que saudades daqui <3 Mil desculpas por estar te respondendo agora Alex, mas não tive quase tempo essa semana. Foi um bigpost hein? É sempre bom personalizar os títulos das postagens. Tanto que já uso boa parte dos códigos que você postou. Um beijo.

    http://world-cutest.blogspot.com.br/

    ResponderExcluir
  13. Já estou usando um! Muito obrigada, beijos.
    ismeninadelicada.blogspot.com

    ResponderExcluir