Sejam bem vindos meu ao bloguinho, ele foi criado com o intuito de ensinar a quem necessita de ajuda em html e css, temos diversos tutoriais e materiais. Fiquem bem a vontade e qualquer dúvida que tiverem entrem em contato comigo ou peçam pela ask. Beijinhos caramelados e inté mais ♡
Search here
All that you want is here, css and html
Welcome to garota no mundo html.
- efeito legenda nas imagens de posts
- backgrounds grandes em aquarela
- Avatar do autor no post footer
- Leia mais na mesma linha do header
- Efeito Dragqueen e efeito Swing
- Três modelos de menus agenda
- Usando temas de tumblr no blog
- Criando seu próprio modelo de data
O tema atual do layout é: the fall of leafs
A meta dos posts do blog é de: 300 posts
A meta de comentários do blog é de: 3500
O blog foi inaugurado no dia: 27/12/2012
os Seguidores do blog atualmente são: 865
A versão atual do layout está na: 41ª vers.
folhinhas que estão no blog online agora:
folhinhas que já passaram por aqui:

colocando backgrounds no título de post


What's up my cherries \( *ω*) Tudo certinho? Nossa gente como está ficando foda postar aqui, na verdade não foda em postar mas em arranjar tempo para isso, confesso que sempre achei que teria sempre um tempinho de sobra para eu conseguir manter o blog ativo mas olha, está ficando bem complicado pra mim. É muita coisa muitos afazeres e estou chegando sempre muito tarde em casa, o que complica um pouco mais pois tenho que ter uma dieta regrada, tipo, tomar certas coisas em certos horários, comer em certos horários e ir dormir cedo, sim, isto mesmo, dormir bem mais cedo que antes. Resumão: foda manter o blog ativo como antes ((T.T) Espero que todos entendam e que mesmo assim não deixem de seguir e comentar, posso ficar no máximo uns 5 dias sem postar mas sempre dou um jeito de estar aqui. Demorei mas aqui estou postando o pedido de uma leitora.

Então, eu sempre uso dois modos para usar o fundo do título do post com background, o de cor somente e o de imagem, gente eu faço uns truques e sempre dá certo, tipo sempre fica certinho. Uma leitora me pediu que em vez de eu postar o mesmo fundo da sidebar também para título de post, eu postasse como eu faço para usar esses modelos, e aqui estou mostrando para vocês. Editem como acharem melhor é só prestar bem atenção e mudar onde se pede ;)


MODO DE COR NO FUNDO:

/* Posts
----------------------------------------------- */
.post h3 {
z-index:600px;
padding: 10px;
width: VALORpx;   TAMANHO DA SUA ÁREA DE POST
margin-left: -VALORpx;    MARGEM DA ESQUERDA DO FUNDO
margin-top: VALORpx;    MARGEM DO TOPO DO FUNDO
margin-bottom: VALORpx;  MARGEM DA PARTE DE BAIXO DO FUNDO
background: #COR;   COR DO FUNDO
border: 1px solid #COR;   COR DA BORDA EN VOLTA DA FUNDO
box-shadow: inset 1px 1px 0px #COR;   SOMBREADO DO FUNDO
-webkit-border-radius: VALORpx;  SE QUISER MAIS ARRENDONDADO É SÓ AUMENTAR O VALOR
}
h3.post-title {
padding: 8px 0 8px 8px;
text-transform: UPPERCASE;
letter-spacing: .1em;
font-family: 'SUA FONTE;
font-weight: 300;
font-size: VALORpx;  TAMANHO DA FONTE
color:#COR;
line-height: 8px;
margin-top: 3px;
text-align:left;  OU PODE COLOCAR RIGHT OU CENTER.
-webkit-transition-duration: .80s;
}
h3.post-title a {
text-transform: capitalize;
letter-spacing: .1em;
font-family: 'SUA FONTE;
font-weight: 300;
font-size: VALORpx;  TAMANHO DA FONTE
color:#COR;
text-align: left;  OU PODE COLOCAR RIGHT OU CENTER.
-webkit-transition-duration: .80s;
}
h3.post-title a:hover {
color:#COR;   COR DO TÍTULO EM HOVER
-webkit-transition-duration: .80s;
}


MODO DE IMAGEM NO FUNDO:

/* Posts
----------------------------------------------- */
.post h3 {
background:#COR url("IMAGEM QUE VAI NO FUNDO")no-repeat; FAÇA O TAMANHO QUE FIQUE BOM NA SUA ÁREA DE POST
border:solid #COR 1px;   COR DA BORDA EM VOLTA DA IMAGEM
z-index:500px;
width: TAMANHOpx;   TAMANHO DA IMAGEM
margin-left: VALORpx;   MARGEM DA ESQUERDA DA IMAGEM
height:10px;
line-height:10px;
padding: 10px;
font-family:'FONTE QUE QUER';
margin-bottom: 5px;
border-radius: 1px;  SE QUISER ARRENDONDAR MAIS AUMENTE O VALOR
}
h3.post-title {
margin-top:4px;
padding-bottom: 8px;
padding-top: 8px;
padding-left: 8px;
letter-spacing: 0;
font-family:'FONTE QUE QUER';
font-weight: 300;
font-size: TAMANHOpx;
color:#COR;
text-align:center;
-webkit-transition-duration: .80s;
}
h3.post-title a {
letter-spacing: 0;
font-family:'FONTE QUE QUER';
font-weight: 300;
font-size: TAMANHOpx;
color:#COR;
text-align: center;
-webkit-transition-duration: .80s;
}
h3.post-title a: hover {
letter-spacing: 0;
font-family:'FONTE QUE QUER';
font-weight: 300;
font-size: TAMANHOpx;
color:#COR;
text-align: center;
-webkit-transition-duration: .80s;
}

Quem quiser as imagens iguais a das sidebar:

 IMAGEM 1





 O resultado do título de post com imagem foi este:  (★^O^★)


6 comentários:

  1. Caramba, Roh. Eu também estou de dieta e tá bem foda pra mim também. E uma das coisas mais difíceis numa dieta é resistir às tentações, né? Agora falando do tutorial, é super útil, um dia desse eu tava procurando ele que nem uma doida e nunca achava :c agora sim posso terminar meu layout haha'
    Aliás, se lembra de mim? Eu me mantive um pouco afastada, mas agora voltei. Pode postar mais modelos para calendário?

    Besitos >..<
    HTMLittle || Aguardo sua visitinha!

    ResponderExcluir
  2. TE AMO, SOCORRO!!!!!!!!!!
    Eu estava procurando isso feito uma louca e não achava açskalsaks <3 <3 vou usar no meu próximo layout :3



    Fica com deus! www.blogbrightwords.blogspot.com | Curta nossa página!

    ResponderExcluir
  3. Oii Roh!
    Super entendo essa coisa de faltar tempo para postar, já passei muito por isso. Meu problema agora é o que postar e-e
    Muito util o tutorial! Sempre quis saber como fazia!

    Küsse - atmornin.blogspot.com

    ResponderExcluir
  4. ooi Roh!
    Eu entendo essa falta de tempo para fazer postagens, estou passando por isso recentemente ;-;.
    Aliás muito bom o tutorial, bem útil!

    Beijos, http://starf-ire.blogspot.com.br/

    ResponderExcluir
  5. Oii Roh!
    Gostei muito do post, é uma maneira bem legal para alguns blogs "Kawaii".
    Beijos, Blog do Math

    ResponderExcluir
  6. Nossa Ro tava bem atrás desse tutorial mesmo, isso parecia um bicho de 7 cabeças quando me pediam para elaborar titulo da postagem com background, mais com esse tutorial facilitou muito beijokas e abraços.

    cherry--berry.blogspot.com

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)