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!
Adoree !
ResponderExcluirAdoro personalizar o titulo do post !
Nhaac ~~> www.piinkrock.tk
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!
ResponderExcluirthe-zombie-attack.blogspot.com
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 (*-*)
ResponderExcluirThank You!
http://www.ophera-phantom.blogspot.com.br
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
ResponderExcluirhttp://www.viciadasemcupcake.blogspot.com.br/
Por mais que já soubesse os efeitos achei muito bacana os tutoriais! Super bem explicados e simples de fazer.
ResponderExcluirrosaschiclete.blogspot.com
Adorei o tutorial, super básico e muito útil. Já até salvei nos favoritos.
ResponderExcluirhttp://comoasborboletasblog.blogspot.com.br/
Bem útil :D
ResponderExcluirBeijos.
StupidGirls
Adorei os tutoriais. Eu não sabia como colocar pontilhado em baixo do titulo. Que bom que a sua internet voltou.
ResponderExcluirhttp://startdreamy.net.tc
Adorei as dicas, por isso seu blog é tão lindo *-*
ResponderExcluirhttp://gilsilene.blogspot.com.br/
Uaaaaaal que bom que está de volta Alex, ameeei os estilos, ótimos, já conhecia alguns ! Aguardo mais postagens !
ResponderExcluirBeeeeijos
#Nhaaac >>>http://the-lovers-official.blogspot.com/
Amei os tutoriais! Você sempre mostra bem explicadinhos!
ResponderExcluirBeijo,
blogmodaonline.blogspot.com
Amei o tutorial Alex, muito bom saber que o POM está de volta!
ResponderExcluirAh, 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.
ResponderExcluirhttp://world-cutest.blogspot.com.br/
Já estou usando um! Muito obrigada, beijos.
ResponderExcluirismeninadelicada.blogspot.com