Caixa com os posts recentes do blog em formato pop up lateral - * Blog Elaine Gaspareto *

Caixa com os posts recentes do blog em formato pop up lateral

em 04/05/2017

Caixa com os posts recentes do blog em formato pop up lateral

Deixa eu te mostrar uma coisa?
Role um pouco a página do blog de demonstração e veja o gadget na lateral direita:


Demonstração do tutorial


Achei muito legal esse efeito, de mostrar os posts recentes do blog em um box, ou caixa, que fica escondido e se revela ao rolar a página.
Esse gadget é parecido com um bem antigo que mostra a caixa de curtir do Facebook (veja aqui o efeito) e fica bem legal no blog.
Quer aprender como conseguir o recurso?
Vem, vamos trabalhar!

Para começar acesse a página com os códigos necessários à execução do tutorial:


Copiar os códigos


Agora vá ao painel do blog onde deseja instalar o gadget (sugiro testar antes em um blog de testes, ok?) e clique na aba Modelo (ou Tema).
A seguir clique em Editar HTML e dentro da caixa de códigos que abrir tecle Ctrl+F.
Na barra de busca digite <head> e tecle Enter para localizar.
Imediatamente abaixo de <head> cole o CÓDIGO JQUERY.
Salve.

Agora, na barra de busca, digite ]]></b:skin> e tecle Enter.
Acima dessa tag de fechamento cole o CÓDIGO CSS e salve.

Estamos finalizando.
Vá agora ao painel do blog e clique na aba Layout. Clique em Adicionar um gadget e dentre as opções que aparecerem escolha HTML/JAVASCRIPT.
Na caixa que expandir cole o CÓDIGO HTML.
Onde deixei marcado AQUI O ENDEREÇO HTTP DE SEU BLOG coloque, claro, o endereço completo de seu blog, começando com http.
Salve, arraste pra onde desejar e salve a organização do seu layout.
Se tudo deu certo você tem uma caixinha linda, retrátil, com as postagens mais recentes de seu blog.



Agora vamos às dicas extras, de personalização e configuração:

→ Todas as coisas relativas à aparência da caixa são alteradas no CÓDIGO CSS.
→ Cores são precedidas do sinal # e para troca-las altere o código hexadecimal.
→ A fonte do título Posts recentes segue a fonte dos títulos dos posts de seu blog.
→ A fonte do nome dos posts da caixa é a Arial, altere se desejar.
→ Caso queira aumentar ou diminuir a quantidade de posts exibidos altere, no CÓDIGO HTML/JAVASCRIPT, o número 20 pela quantidade que preferir. Não exagere, quanto mais posts mais pesado fica.
→ A cor dos nomes dos posts da caixinha seguem a cor do links de seu blog.
→ Se quiser alterar a cor das setas de navegação localize o número hexadecimal #4bbecf no CÓDIGO HTML/JAVASCRIPT e altere para o código da cor que desejar.


Viu que simples que é?
Se tiver qualquer pergunta relativa à execução desse tutorial diga nos comentários e eu ajudo se for possível!
Enjoy!

Créditos dos códigos: Ayuda de Blogger
Crédito da imagem de capa do post: Shutterstock

7 comentários via Blogger
comentários via Facebook

7 comentários:

  1. OLÁ GASPARETO, ANTIGA AMIGA VIRTUAL,TUDO BEM?


    VENHA PARTICIPAR DO MAIOR EVENTO DA ATUALIDADE QUE É A HISTÓRIA DE UM PAÍS REAL IMAGINÁRIO CHAMADO HÁDESER QUE SERÁ CONTADO EM CAPÍTULOS CURTOS MAS CHEIOS DE HISTORICIDADE.

    NÃO PERCA , ACOMPANHE E COMENTE.

    OBRIGADO MINHA SEGUIDORA VIRTUAL QUE MUITO ME HONRA.

    UM ABRAÇÃO CARIOCA.

    ResponderExcluir
  2. Elaine, pode acontecer de não ter um desses códigos no meu blog? Eu não achei o código ]]>
    Me ajuda, por favor.
    bjk

    ResponderExcluir
    Respostas
    1. Karine, todo template tem essa tag, é a tag de fechamento da folha de estilos.
      Para localizar mais fácil digite skin e vá teclando Enter. Provavelmente vão aparecer 2, estamos em busca daquele que é exatamente igual eu peço no tutorial...
      No caso específico de seu blog, a tag de fechamento está logo após o código do slide de posts recentes: The Nivo Slider styles
      Cole e localize.
      Aí tem um monte de códigos e ao final a tag que precisa achar.
      Certinho?
      bjssss

      Excluir
    2. Elaine, só apareceu 1, esse aqui ó <![CDATA[/*


      Outra coisa que eu queria falar, eu também não encontrei o botão para inserir o link para participar da blogagem coletiva. Hoje fiz um post sobre a #52semanasdegratidão.

      Desculpa a "encheção de saco".
      bjk

      Excluir
    3. Karine, veja esse vídeo:
      Como localizar linhas de código
      Creio que ajudará :)
      bjssss

      Excluir
  3. Achei muito legal e fica diferente nos blogs!!
    Bom final de semana!!

    Beijinhosss ;*
    Blog Resenhas da Pâm

    ResponderExcluir

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…



Visualizações

Contando...

Dias online
Postagens
comentários