11.1.14

Tutorial - Links abaixo do título da postagem

Olá, ladies and gentlemen! (。・ω・。)ノ♡ Tudo certo com vocês? Eu estou bem q Apenas hoje que me veio uma dor de cabeça bem ruim pelo tempo que passo no computador, mas fora isso... Bem estou postando esse tutorial por via de um pedido da ask, já haviam me pedido antes, e se eu não me engano foi a Emiko, mas acabei não postando o tutorial porque acho que tinha outros planos e já existem vários tutoriais por aí. Mas aí um anônimo disse que precisava muito porque não conseguia, e agora eu sei que muitos ainda não conseguem mesmo com tantos tutoriais, então tentei explicar o melhor possível no meu jeito para vocês <3 Espero que gostem, hm ^u^

PS::. Para certificar-se que o tutorial dá certo, eu fui aplicando em um blog de testes, e ao mesmo tempo explicando aqui então se der errado, é provável que algo que você fez deu errado, hm? E tente visualizar todos os prints, eles ajudaram muito.
01. Primeiramente, vamos começar retirando os links de baixo, certo? Pois dê F3 no teclado e procure por <div class='post-footer-line post-footer-line-1'>< (E não retire o "<" não foi um erro.) Achou? Bom, após achar, ao lado dele vai estar o código do link do nome do autor, certo? Então você vai selecionar de <span até </span> e recorte esse código. (PRINT) Certo, agora abra seu bloco de notas e cole o código lá, mas no final depois de </span> coloque as duas "barrinhas" para dividir os links. (PRINT).

02. Agora iremos sair do line-1 e ir ao line-2 onde se encontra o código responsável pelos marcadores, tudo bem? Bom, tecle F3 e procure por <div class='post-footer-line post-footer-line-2'>< (E novamente não retire o "<" no final.) Vai ser igual ao passo de cima, o código dos marcadores se encontram ao lado do código que você procurou, de acordo? Você vai selecionar de <span até </span> (PRINT), faça como antes, cole no bloco de notas e acrescente as duas barrinhas após </span>.

03. Agora sobrou apenas os comentários para finalizar a primeira etapa! Bom, tecle F3 pesquise por > <span class='post-comment-link'> (E não retire o "> " do começo, isso é porque existem dois dos mesmos códigos no html, e o que você vai precisar retirar vem esse "> " antes.) Bom, pois agora você selecionará de <span até </span> como todos os outros. (PRINT) Cole no bloco de notas mas dessa vez não adicione as barrinhas no final.

01. Prontinho, mas não salve ainda, falta a segunda etapa, que é colocar os códigos abaixo do título da postagem. Primeiramente procure por <div class='post-header-line-1'/> note que há dois desse no html, ficou confuso (a)? Bom, para identificar o certo note que um pouco abaixo desse código bem no <div class='post-footer-line post-footer-line-1'> os códigos do autor não está, significa que é o código certo, mas já no outro um pouco abaixo dele o código do autor e tudo o que você já fez aqui continua lá, apenas ignore esse e volte para o outro.

02. Pois bem, pesquisou? Agora vá no bloco de notas, que por acaso deve estar assim (PRINT), selecione tudo e copie. Agora cole tudo abaixo de <div class='post-header-line-1'/> (PRINT)

03. Visualize, deu certo? Ótimo, mas agora vamos personalizar! Coloque o código do quote abaixo acima de ]]></b:skin> ou acima de h3.post-title a { vai dar no mesmo. E personalize ou deixe do jeitinho que está!
.post-header, .dados {
border-bottom: 1px solid #f0f0f0;/* Cor e expressura da borda de baixo */
border-top: 1px solid #f0f0f0; /* Cor e expressura da borda de cima */
text-align: center; /* Alinhe seu texto de acordo com o do título */
padding: 3px; /* Acolchoamento interno entre as linhas */
margin-bottom: -9px; /* Espaço de baixo se quiser retire ou mude */
}
Prontinho, visualize e salve! Espero que tenha dado certo <3

36 comentários

  1. Vou tentar. Esse tuto é bem útil, fica bem melhor, tava procurando, obrigada :3

    bloogencantado.blogspot.com

    ResponderExcluir
  2. Eu já sabia desse tutorial, já usei tanto ele que sei fazer sozinha. Só preciso ir até o blog para ver os códigos, para copiar e pesquisar. Enfim, ótimo tutorial, explicou super bem :3

    Visite o blog :3 | Etc For Me :3

    ResponderExcluir
  3. Puxa que útil Mack obrigada , vvou usar no meu proximo lay pq sei q n vou resistir e vou trocar dnv. Vlw Pois agora vou fazer um lay bem divo *uu*

    Geekegirlie.blogspot.com || G²

    ResponderExcluir
  4. Ótimo tutorial *u*
    Astronomia? uashuash, eu gosto também *u*
    teenagethiings.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada! >3<
      Sim, astronomia é muito bom cara ç3ç

      Excluir
  5. Nossa que legal o significado do nome >.<, eu quando fiz o meu nem pensei muito no que seria na cabeça dos outros mas como o nome mesmo diz somos nós garotas nesse meio de html, bem acho esse tuto muito bom e super útil dou meus parabéns para você pois tem que ter uma paciência do cão para postar e ensinar tudo bem direitinho =3, mas enfim aproveitando para dizer que este lay é muito fofo e amo demais cores neutras assim, tudo o que faz é lindo e com muita qualidade até as coisas simples >.< Kissus amore ;)

    ResponderExcluir
    Respostas
    1. GSYDGSYAYSGA' Mas eu gosto de escrever tutoriais! >3< Obrigada Roh *y*

      Excluir
  6. Bem bolado o nome do blog :) Finalmente, um tutorial que preste e me ajude, sempre que eu tentava por, dava errado. Obrigada ♥

    Unskilled

    ResponderExcluir
  7. Astronomia é algo fascinante, e o nome do blog é bem criativo ♥
    Adorei o tutorial, fica muito lindo e organizado *u*

    With You || Imperfectous

    ResponderExcluir
    Respostas
    1. Nha, é mesmo eu amo demais isso cara! <33
      Obrigada Mandi *u*

      Excluir
  8. Tem como deixar a data junto desses links? grato, e não vou mandar essa pergunta por ask pq eu já vou sair, xau

    ResponderExcluir
    Respostas
    1. Acho que tem, mas tenho que pesquisar melhor para saber como HAISUAHSIA' Tiau u3u

      Excluir
  9. Aaah, que legal o nome do blog, eu sempre achei que era A reservadora de lua u.u (me julgue, eu não sei inglês) Mas tbm nem pensei em ir num tradutor nem nada, mas foi bem criativo o nome!
    Ix, eu nunca consegui colocar os links abaixo do título das postagens, nunca nunca dava certo, mas dessa vez eu vou tentar fazer, vai que da certo né!

    ResponderExcluir
    Respostas
    1. HAISUAHSIAUS' Mas esse nome também é bonito u3u Nha, boa sorte então! >3<

      Excluir
  10. Oii Mack! Vim avisar que pode retirar meu nome dos afiliados. Eu parei com o DOP definitivamente. Já fazia um tempo que vinha pensando nisso, mas agora é oficialmente um adeus. De agora em diante eu vou apenas procurar vaga como postadora em blogs, então se precisar é só me chamar no face haushaush. Beijos, Rafa ♥

    ResponderExcluir
    Respostas
    1. Tudo bem Rafaela! <3 HAISUHSIUSHA' Certo, se um dia eu abrir vagas, se eu me lembrar eu te aviso :3

      Excluir
  11. Já tinha visto este tuto várias vezes, só que nunca conseguia fazer direito sempre dava erro :P, agora salvei no favoritos shuahs e usar :D
    Kisses u,u. Com carinho, amora queen -q

    blogandoseuassunto.blogspot.com.br/

    ResponderExcluir
  12. Eu somente fazia ideia que o nome do blog tinha relação com a Lua, óbvio q. Achei o nome em português bem bonito! <3

    Adorei o tutorial, Mack! Na verdade, amei! Muitos blogueiros os quais fizeram e postaram este tutorial não explicaram detalhadamente e com prints >3<

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
  13. com certeza vou usar no meu próximo lay *u*

    Bjs || h-piece.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Se usar avise-me? Quero saber sevai dar tudo certinho *3*
      Obrigada! >33<

      Excluir
  14. Um ótimo nome Mack *-*
    Esse tutorial eu uso quase sempre,acho ele bem útil.
    Smashed

    ResponderExcluir
  15. Tutorial do Kawaii World...

    ResponderExcluir
    Respostas
    1. E de muitos outros blogs, né? Aliás, esse é o tutorial que eu sempre faço, a diferença é que eu simplifiquei :3

      Excluir
  16. Ah obrigada por postar mack eu que pedi e eu realmente estava precisando, você explicou da melhor maneira possível, acho que consigo fazer, obrigada mesmo! <3

    ResponderExcluir
  17. Eu acabei de conhecer o blog, e você foi a unica que conseguiu me ensinar esse tutorial. Gostei muito daqui, e o nome é muito bonito. Seguindo ;))

    ~XOXO || http://coiisasdeotome.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Awn, bem vinda Clarah! <3 Obrigada, que bom lhe lhe serviu :D

      Excluir

O blog não é mais atualizado com novas postagens. Mas fique à vontade para perguntar algo do seu interesse, seja relacionado às postagens ou dúvidas que lhe inquietam, estou algumas vezes entrando no blog e certamente verei se tiver comentários pendentes. Obrigada pela visita, leitor!