23 maio 2012

Personalizando a Área dos posts

Images_large


Aqui você vai encontrar fáceis Tutoriais Para o seu blog. Antes de fazer os tutoriais dessa postagem é necessário fazer o Backup do seu template, para não dar nada errado, ou até mesmo num blog de teste antes de usar no seu original para não estragar o seu blog. Bem você vai aprender a personalizar a área dos posts e também umas dicas básicas extras pra você. Então chega de bate-Papo e vamos começar os tutoriais...

Clique em Leia mais e vamos em bora!!
Personalizando o Título do Post

Se você quiser colocar um efeito no título da sua postagem personalizada igual a minha, veja esse tutorial com atenção.

Vá em: Modelos e Editar HTML
e pesquise pelo seguinte código:

h3.post-title {

quando achar, vai estar mais ou menos assim:

h3.post-title {
  margin-top: 20px;
}

Logo acima da última chave, coloque o seguinte código:

border-bottom: 1px dashed #000000;

agora vamos para a legenda:

Roxo: é a borda, (não mude, só mude apenas, o bottom po top se quiser a linha em cima, se quiser a linha em volta do título do post todo apague o " -bottom ").
vermelho: é o tamanho da borda ( se quiser mais grossa coloque " 2px ").
preto: é o tipo da borda ( se quiser uma borda lisa, coloque " solid ")
laranja: é a cor da borda ( se quiser rosa coloque " #ff50ff; ")

só isso, agora veja se esta tudo OK em seu blog e salve. Mai não acabou ainda tem muito mais...

Centralizando o título do Post

Vá em: Modelos e Editar HTML
e pesquise pelo seguinte código:

h3.post-title {

Logo abaixo dele, coloque o seguinte código:

text-align: center; 

prontinho, veja se ta tudo ok, e salve... ainda tem mais..


Colocando Barra de rolagem nos posts

vá em: modelo e em seguida editar HTML.
depois pesquise por:

body {

e antes de body { cole o seguinte código:

#Blog1{overflow-y:auto; overflow-x: hidden; height:500px; width: 100%;margin: 0px;}

Pronto! veja se esta tudo legal, e salve. tem mais ai..


Colocando Sombra no título do posts

vá em: Modelo e depois em Editar HTML.
em seguida procure pelo seguinte código:

h3.post-title a { 

antes de fechar a última tag " { ", cole esse código:

text-shadow: 0px 0px 5px #000000;

se vocês quiserem mudar alguma coisa,como a largura da sombra,ou a cor da sombra, fiquem a vontade.

Quando tiver tudo pronto visualize, e depois salve.
E é só isso pessoal. mais tem um dica para deixar seu texto sublinhado, persona lizado.
Fica super legal. Veja o tuto abaixo:

Vá em: Modelo >> editar HTML e procure pelo seguinte código: ]><
acima dele cole o seguinte código:

u {
color: #200000;
text-decoration: none;
border-bottom: 1px dashed #000000;
}

o que esta de vermelho é o tamanho da linha sublinhada (que vai ficar pontilhada). e o que está de preto-negrito é a cor da linha.Vê se esta tudo em ordem, e salve.

Bom gente é só isso.
comentem bastante!!
e digam o que achou do nosso post!!

30 comentários:

  1. oi deby, amei esse seu novo post!
    ficou muito bom mesmo...
    muitas pessoas vão ver e clicar no +1 do google como eu fiz... beijinhos, muitos sucessos pra você e até mais....

    http://receitadakaka.blogspot.com.br

    ResponderExcluir
  2. Oii,
    Que legal a dica, eu adorei, principalmente pq eu so tão ruinzinha quando se trata de códigos e configuração do blog.
    Muito útil.

    Adorei seu blog, estou seguindo!!
    Passa lá
    Seguindo!

    http://my-literarylife.blogspot.com.br/2012/05/como-eu-quase-namorei-robert-pattison.html#comment-form


    Um Bjo e muito suceso com seu blog.

    ResponderExcluir
  3. bem bolado esse tutorial (s)
    boa sorte!! que vnhaa muito mais sucessos para você e seu blog..

    até mais...

    ResponderExcluir
  4. Bem legal pro pessoal que não manja desses codigos eu sou um kkk

    ResponderExcluir
  5. adorei as dicas!! bjs
    http://avidademalu.blogspot.com/ http://ohmygood-omg.blogspot.com.br/

    ResponderExcluir
  6. leagal as dicas

    http://kelecatura.blogspot.com.br/

    ResponderExcluir
  7. Ótima dica... ainda terei um layout que me agrade totalmente... :)

    ResponderExcluir
  8. Excelentes suas dicas para melhorar o blog .... realmente essa parte é bem complicada e você explicou muito bem.

    Sucesso !!!

    ResponderExcluir
  9. Que legal1 tÁ MUITO MANEIRO seu blog e esses tutos sao simples e maneiros

    http://novidadesdatekinha.blogspot.com

    ResponderExcluir
  10. rsrs mexer no blog vira vicio, incrementa-lo então, adoro essas dicas!

    ResponderExcluir
  11. Estou te seguindo flor =]

    Já ouviste falar de meia calça tatuada? Vale a pena ler entao http://toobege.blogspot.com.br/2012/05/meia-calca-tatuada-elitize.html

    ResponderExcluir
  12. sempre me mato qnd faço isso kkk
    por isso deixo modelo normal msm

    ResponderExcluir
  13. seu blog e bem agradável, e bem colorido =) e sempre cheio de novidades, continue assim parabens =)

    ResponderExcluir
  14. Gostei da dica, adoro blogs que ensinam a usar o blogspot, sucesso neste seu blog e espero que chegue longe...

    http://temtudomega.blogspot.com
    siga o blog e curta no facebook

    ResponderExcluir
  15. Muito boas as dicas...Visita lá o blog,bjs
    http://so-pra-teens.blogspot.com/

    ResponderExcluir
  16. Adorei a dica, mas tenho uma pra você, crie um blog só pra testes, assim quando você postar esse tuto as pessoas vai diretamente e vê como fica. Fica mais prático e melhor, rs.

    Beijinhos, http://mundodemenin.blogspot.com.br

    ResponderExcluir
  17. Tutoriais ótimos! Amei seu blog,é lindo, seguindo.Beijos!
    http://universoteengirl-porlarissa.blogspot.com.br

    ResponderExcluir
  18. hehe gostei do tutorial !
    Bem útil!
    Flor seguindo aaq, segue lá também ?Amei o blog, bem legal ele!
    Bjão ♥

    http://garotaimperfeita.tk

    ResponderExcluir
  19. Visitinha rapida,Ammei o blog,beijooos!
    http://vitoriaacedo.blogspot.com.br/

    ResponderExcluir
  20. Legal! Poderiamos pedir um tutorial? Como você fez esse cabeçalho animado?
    Visite nosso web show: www.exclusivoshow.blogspot.com

    ResponderExcluir
  21. Adorei o post.
    Flor, está rolando sorteio lá no Blog, se quiser participar, sinta-se convidada bjssss
    http://glamouremestilobyrosaolin.blogspot.com.br/2012/05/sorteio-da-linha-nutra-da-plantony.html

    ResponderExcluir
  22. Olá querida!

    Me desculpe passar na corrida, mas vim avisar que o Zapataria migrou para o femininaevaidosa.blogspot.com.br. Espero que possa me seguir e acompanhar o blog por lá!
    Um beijo e obrigada pela sua companhia neste um ano.
    Beijos!
    Silvia

    ResponderExcluir
  23. Amei esse tutorial :) Parabéns pelo blog, já sou seguidora! :)

    Beijo*

    http://mantinhaderetalhos.blogspot.pt/

    ResponderExcluir
  24. Eita completinho amei!



    BEIJUXX
    http://ianapaulinhaaaa.blogspot.com.br/

    ResponderExcluir
  25. Que legal,mas já tenho minha área personalizada... :]

    http://trethy.blogspot.com.br

    ResponderExcluir

Créditos Blog Conectada| www.blogconnectada.blogspot.com - 2014 // Todos os direitos reservados // Para encomendar entre em contato.