23/11/2012

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á conhecem 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!

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

<div class='post-header'>


2. E acima dele você coloca:

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

◤Entendendo o código◥
 (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
  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
  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
  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

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345