23/11/2012

Tutorial: Separador abaixo do titulo dos Post

||

Hayoo pessoal! Estou tão feliz por ter atingido a meta de 250 seguidores e pouco no momento eu sei, mas para muito e muito mesmo! Então arigatou de verdade a todos que seguiram! *-*

Agora indo ao tutorial do dia, irei ensinar como colocar um separador abaixo do título do blog, que também é chamado de linha de separação, sei que muitos já conheçem mas para quem não usa ainda poderá ajudar. Para conseguir colocar essas linhas já sabe onde clicar rsrs


Bom vamos ao tutu então e super fácil tentarei explicar resumida mente!

Vá em seu HTML e clique na caixinha Expandir modelo de Widget, usando o atalho Ctrl+F procure por:

<div class='post-header'>


E acima dele você coloca:

<div style="border-top: 1px dashed #717171"></div>


Para você compreender um pouco melhor irei explicar cada parte:

(1px) -Espessura da linha
(dashed) - E o estilo de linha, você pode trocar por qual desejar que mostrarei mais a baixo
(#717171) – A cor a linha


Estilos de bordas (Style)

none:borda oculta
solid: borda contínua (reta)
double:  borda dupla
groove: borda  entalhada
dotted:  borda pontilhada
ridge: borda  em ressalto
dashed: borda tracejada
outset: borda em alto relevo
inset: borda em baixo relevo

Você pode pegar qualquer um dos estilos que lhe agrade e colocar onde esta em vermelho:

<div style="border-top: 1px dashed #717171"></div>

Bom é isso o tutu de hoje, espero que tenham gostado deixem um comentário dizendo o que acharam se deu certo ou não, beijokas e ate o próximo tutorial.

16 comentários:

  1. título do blog? acho que você quis dizer título da postagem

    ResponderExcluir
    Respostas
    1. Rsrsr verdade! Obrigada por alerta!

      Excluir
  2. Ótimo tutorial!
    Já usei bastante. Super fácil e deixa o blog com um "UP" :)

    Obrigado pela sua visita no meu blog, volte sempre ^~^

    blog-the-memories.blogspot.com
    a-strangegirl.blogspot.com <-- Blog Pessoal.

    ResponderExcluir
    Respostas
    1. E verdade! Pode deixar que sim o/

      Excluir
  3. Adorei! :3
    Amei aqui, seguindo viu? *-*

    Garota Estranha

    ResponderExcluir
  4. Adorei, acabei de colocar do meu blog, ajudou muito rsrs, bjs ;*

    http://www.juventudedamoda-br.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Fico contente que tenha lhe ajudado

      Excluir
  5. Deu super certo obrigada! =] Faz uma visitinha lá no meu blog

    http://believe-tj.blogspot.com.br

    ResponderExcluir
  6. Porque no layout que eu to testando não ta dando pra colocar?! Ç3Ç
    Beijinhos ♥

    Uma ovelha mais que negra

    ResponderExcluir
    Respostas
    1. Não? Seja mais detalhado por favor, não esta achando o código? Ou e algum erro ao salvar?

      Excluir
  7. Não consegui! No meu não tem a opção: Expandir modelo de Widget.

    meumundocupcakes.blogspot.com
    meumundocupcake@gmail.com

    ResponderExcluir
    Respostas
    1. O blogger fez modificações na parte de Editar HTML e não existe mais a opção "Expandir modelo de Widget" então procure direto pelo código

      Excluir
  8. E como faz para botar abaixo da postagem? Por exemplo: Título/ Texto do post/ Separador/ Botões compartilhar. Entendeu?
    Espero que me ajude! Beijos.
    www.escritoradosdezesseis.com

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram