Galeria multi-postagens separadas por marcador

em 11 de agosto de 2015

Deixa eu te mostrar uma coisa bem legal que instalei no blog recentemente?
Olha:


Ainda está em construção, mas achei tão bonito e organizado que resolvi compartilhar com você.
Vamos aprender?
É relativamente simples, mas como tudo na vida precisa de atenção, claro.
Vamos começar com a parte mais difícil.

Vá ao painel administrativo de seu blog e clique na aba Modelo.
A seguir clique em Editar HTML e dentro da caixa de código tecle Ctrl+F.
Na barra de busca que expandir digite </head> e tecle Enter para localizar.
Acima dessa tag de fechamento cole isso:



Salve.
Esse pequeno código é uma fonte especial que vai fazer aparecer os ícones bonitinhos da galeria.

Agora vamos fazer a segunda parte.
Vá até a guia Páginas de seu blog.
Essa guia aparece em seu painel, à esquerda.
Clique nela, e a seguir clique em Nova página.
Vai abrir o editor de texto, semelhante ao editor de postagens.
No alto dele clique em HTML.
Essa ação vai reverter seu editor para o modo HTML.
Agora copie este código:

Copiar o código

E cole-o na página que está criando.
Você notará que deixei marcado em capslock todas as áreas editáveis do código.
Elas definem as cores, a aparência geral da galeria.
Altere como desejar.
Essa parte é opcional.
Agora preste muita atenção!
No código você verá esse trecho, repetido 8 vezes:

{
            name: "NOME DE EXIBIÇÃO DO MARCADOR",
            url: "ENDEREÇO COMPLETO DO BLOG",
            tag: "NOME EXATO DO MARCADOR"
        },

Entenda:
NOME DE EXIBIÇÃO DO MARCADOR: é o nome que aparecerá como título da galeria;
ENDEREÇO COMPLETO DO BLOG: coloque o endereço de seu blog, sempre começando com http;
NOME EXATO DO MARCADOR: é o nome exato de seu marcador, como ele é no seu blog.
Exemplo: Dicas para blogs, crônicas, Receitas doces são alguns dos meus marcadores.
Tem que escrever nesse campo exatamente como é, grafia idêntica ao que é no blog, ok?
Senão não dá certo!

Depois que você editou seu código e deixou tudo pronto clique em Publicar.
Se tudo deu certo você terá uma página como a minha, que lista os posts recentes de acordo com os marcadores que você selecionou.
Não é demais?!

Dicas extras


1- É importante ler o código para entender o que cada linha faz. Acredite em mim, é muito mais simples do que parece, e faz muito sentido cada coisa que está ali.
2- A fonte dos títulos vai seguir o padrão da fonte de seu blog.
3- Todas as cores (fundo, borda, fonte, etc) são definidas pelo código hexadecimal da cor, precedido do sinal #. Para alterar a cor altere o código.
Aqui tem uma tabela de códigos de cores.
Pode ser colocado como gadget HTML/JAVASCRIPT na sidebar.
4- Se quiser exibir mais galerias, para mais marcadores basta copiar o código {            name: "NOME DE EXIBIÇÃO DO MARCADOR",
            url: "ENDEREÇO COMPLETO DO BLOG",
            tag: "NOME EXATO DO MARCADOR"
        },
E colar abaixo do último.
Para ficar alinhado sugiro sempre fazer isso aos pares.
5- Antes de começar sugiro selecionar os marcadores mais relevantes que pretende destacar; facilita muito na hora de editar o código.
Escolha os que mais têm posts, ou os mais importantes do seu blog.
Precisa ter ao menos 4 posts para funcionar.
6- Faça com paciência, tá?
7-Eu hospedei o arquivo Jquery que faz o código funcionar em minha conta, então ele é estável e não sairá do ar.

Agora algo importante:
Gente, vou repetir porque é importante: leia o tutorial e sobretudo leia o código até entender.
Basicamente é editar cores e colocar o nome do marcador e endereço do blog.
Muitas vezes as perguntas que me fazem estão devidamente respondidas no post, ou a solução/resposta está clara no código. Eu testo exaustivamente antes de postar.
Leia com atenção antes de simplesmente comentar dizendo "não consegui", ou "não deu certo.". Eu fiz, dá certo. Creia em mim.

Às vezes um leitor comenta exatamente assim, simplesmente dizendo 'não deu certo".
Quando posso vou ao blog dele e tento entender o que pode ter dado errado, mesmo sem ter como saber exatamente o que foi feito.
Daí chego no blog e tem 10 coisas lá que foram compartilhadas aqui e eu pergunto:
Das 10 vezes que deu certo, alguma vez a pessoa se deu ao trabalho de dizer "deu certo"?
Não.
Mas basta 1 não dar, ou ela não conseguir por algum motivo, e a capacidade de fazer um comentário reaparece.

Quem posta tutoriais nos blogs de ajuda em geral não espera nada em troca, fazemos porque gostamos de ajudar, porque temos paixão pelos blogs, porque é algo que nos atrai. Gastamos horas pra entender algo, e depois explicar da forma mais simples que for possível. Quando eu consigo aprender algo fico ansiosa pra ensinar aqui, por amor mesmo.

Mas um comentário de agradecimento, ou apenas dizendo "deu certo" é algo que alegra.
Eu sei o que estou falando sobre comentários de incentivo  porque de vez em quando recebo comentários tão, mas tão lindos e fofos que me animam tanto, que me motivam, que me enchem de felicidade.

Repito: a gente ajuda porque ama o que faz, mas amor não é obrigado a suportar grosseria/urgência/pressa de alguém que ficou com preguiça de ler até o fim...
E se comentar dizendo que não conseguiu só o faça depois de ter certeza de haver lido tudo, tutorial e código.
Porque pode ser que eu tenha deixado passar algo, tenha esquecido de explicar.
Acontece, uai...
Falou, gente querida?

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

13 comentários , comente também!

  1. Oi,Elaine acho difícil você deixar passar algo,você explica nos mínimos detalhes.
    Meu marido me perguntou algumas vezes,que graça tem eu ficar postando gráficos de revistas no blog .
    Eu respondi:para ajudar as pessoas que fazem para vender e por amor.
    Tenho computador desde 1996 mas não tinha tempo para net,eu morava no RJ,fazia todo serviço de casa e fazia crochê para vender.
    Voltei para Minas em 2005,meus filhos formados cada um seguindo sua vida,meu filho mais velho tem 2 cursos superior Enfermagem e Medicina,meu caçula Filosofia e está no penúltimo período de Direito mora comigo ,ele ainda não se casou.
    Criei um blog em 2009,menina é o filho que me dá mais trabalho,sumiu 2 blogs meus e um eu excluí,importei meu filho blog com outra url e nome.
    Pensa que eu desisti ,não ,adoro meu filho blog.
    Adoro seu blog/Site você está de parabéns.
    Vou tentar colocar este tutorial no meu blog,adorei.
    Linda semana para vocês!!!

    ResponderExcluir
  2. Compartilhei em todas redes sociais,beijos

    ResponderExcluir
  3. Vou tentar agora, ficou lindo, e tudo explicadinho, e vc está corretíssima muitas vezes as respostas das nossas perguntas estão no texto, basta deixar a preguiça pra lá e ler até o FIM...
    Dicas, Truques e Segredinhos!

    ResponderExcluir
  4. oi Elaine, como sempre você arrasou nas dicas e na boa didática.
    bjk

    ResponderExcluir
  5. Olá Elaine! Ultimamente tenho passado horas xeretando o seu blog e aplicando as suas dicas e com certeza essa é mais uma que eu vou aplicar em breve. Mas depois de tanto fuçar não achei um post que explica como colocar o Nome do Autor e a data abaixo do titulo da postagem. Você já escreveu um post explicando? Se sim, por favor me diga onde encontrar pois não achei. Desde já agradeço a sua atenção e aguardo sua reposta. Abraços :)

    ResponderExcluir
  6. Oi Elaine, minha sósia rsrs parabéns pelo seu blog sempre arrasando! Se vc puder ensinar como colocar esses balõezinhos com imagens que vai do lado dos posts sabe? Como se fosse a tag? Gostaria muito de aprender isso :)

    Obrigada!!
    Bjs

    ResponderExcluir
  7. Elaine
    Você lê pensamentos? Pois é, faz tempo que procuro um tutorial destes, e, até pensei em pedir para você, mas fiquei encabulada.
    Dai você (garota esperta) vai e publica. Muuuuuuuuuiiiiiiiiito obrigada e sucesso.
    Obrigada
    e Beijos

    ResponderExcluir
  8. tentei fazer mas infelizmente não deu certo aparece uma mensagem dizendo que o link esta´quebrado

    ResponderExcluir
  9. Coloquei o primeiro código onde mandou já o segundo criei uma nova pasta e coloquei mais não aparece, não entendi pq tenho que criar uma página, não da pra por em outro lugar?

    ResponderExcluir
  10. Olá! Elaine gostaria de deixar uma dica e solicitar outra dica rsrsrs
    A dica é que o código html também pode ser usado em gadget na barra lateral do blog.
    Basta adicionar no local desejado. Já testei no meu blog e funciona direitinho.

    E a dúvida que eu tenho é: Como diminuir o espaço entre as postagens de cada marcador?
    Obrigada! Hoje é a segunda dica que pego no seu blog!

    ResponderExcluir
    Respostas
    1. Sim, a dica de usar como gadget estrá no post :)
      Para alterar distâncias experimente mexer nos comandos padding e margin.
      bjssss

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…