22 de fevereiro de 2014

11

Estilo de Carregamento de Página do You Tube no Blogger




Hoje vamos aprender a adicionar o estilo de carregamento da página parecido com a do You Tube.
Acredito que você já deve ter visto, quando acessamos qualquer página do You Tube, durante o carregamento logo "aparece" uma pequena barra com a cor vermelha no topo da página e quando termina de carregar a mesma desaparece. Então, vamos aprender a utilizar esse mesmo estilo de carregamento no Blogger...




Este estilo é um "progress bar" que é executado durante o carregamento da página, onde o usuário poderá visualizar o progresso de carregamento da página em um determinado tempo, nele, é utilizado uma animação que indicar que o carregamento está acontecendo.

Antes, eu queria agradecer ao Charliton Carvalho do site 2C Multimídia um grande amigo e parceiro do Varias Dicas... que nos sugeriu este excelente artigo para ser compartilhado entre nossos leitores.

Veja uma demonstração na imagem logo abaixo:
Clique na imagem
Barra de carregamento do You Tube no Blogger


Como colocar estilo de carregamento de página igual o You Tube

Pra colocar no Blog é extremamente fácil vamos apenas inserir um pequeno código no HTML do Blog.

1º Passo: Acesse o painel de edição do seu Blog, clique na opção Modelo >> depois em Editar HTML.
2º Passo: Agora, clique em qualquer parte do código, em seguida, pressione as teclas de atalho "Ctrl+F" do seu teclado e encontre esta seguinte Tag no código:
</body>

3º Passo: Após encontrar a Tag, logo acima dela acrescente este código:

<!-- carregamento -->
<style>#nprogress{pointer-events:none}#nprogress .bar{background: #FF0000;height:2px;left:0;position:fixed;top:0;width:100%;z-index:100}#nprogress .peg{-ms-transform:rotate(3deg) translate(0px,-4px);-webkit-transform:rotate(3deg) translate(0px,-4px);box-shadow:0 0 10px #29d, 0 0 5px #29d;display:block;height:100%;opacity:1.0;position:absolute;right:0;transform:rotate(3deg) translate(0px,-4px);width:100px}#nprogress .spinner{display:block;position:fixed;right:15px;top:15px;z-index:100}#nprogress .spinner-icon{-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite;border:solid 2px transparent; height:18px;width:18px}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.photo{display:none}</style> <div id='loadMore'/> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> <script src='http://goo.gl/10Okof'/>
<!-- Fim do código de carregamento -->

  • Prontinho, agora é só clicar em Visualizar Modelo para verificar se esta tudo certo, depois é só clicar em Salvar Modelo.

Alterando o código

  • Se você desejar alterar a cor da Barra, basta substituir a parte que esta destacado em vermelho "#FF0000" por um outro código de cor em HTML. (clique aqui para escolher uma Cor em HTML)
  • Para alterar a espessura da barra basta alterar o seguinte valor destacado em Azul "height:2px".









11 comentários:

  1. Atrapalhou no carregamento do slide de destaques do meu blog o.O

    ResponderExcluir
    Respostas
    1. Isso deve ter ocorrido porque o seu blog já tem os scripts descritos no post. Tente Apagar um desses scripts script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>" ou "script src='http://goo.gl/10Okof'/>" e veja qual é dos dois.

      Excluir
  2. Boa tarde brother. Muito bacana esse efeito. Mas pena que ele entra em conflito pra quem utiliza um sistema de slide no blog. seria ótimo se vc conseguisse ajustar esse probleminha. Mas de qualquer forma eu utilizei ele em outro blog e ficou nota 10. Mais uma vez vc esta dando ótimas dicas. valeu brother.

    ResponderExcluir
    Respostas
    1. Olá Betto Wert!
      Obrigado por informar este problema. Antes de postar este tutorial fiz o teste do código e ocorreu tudo certo, porém, não previ que poderia haver este problema para quem utiliza template com Slide.
      Novamente queria agradecer pelo comentário. Obrigado!

      Excluir
  3. Olá, primeiramente parabéns pelo seu trabalho, tem me ajudado bastante.

    Comecei a trabalhar com mídias sociais recentemente mas ainda tenho algumas dificuldades com html e afins, se puder responder algumas das minhas perguntas eu ficarei muito grato!

    1) Meu site http://www.historiailustrada.com.br/ não redireciona do http://historiailustrada.com.br/ para o http://www.historiailustrada.com.br/. Como resolvo isso?

    2) Meu site está no ar há cerca de 20 dias e já tem fluxo de milhares de pessoas graças às redes sociais, entretanto não está gerando fluxo via mecanismos de busca, tem algo errado com ele? Todos os textos são originais.

    3) Quanto tempo demora para adquirir uma pontuação no PageRank?

    4) Depois que coloquei a atual template a caixa de comentários do facebook não funciona corretamente, nem mesmo a do google funciona em todos os posts, existe alguma ferramenta que pode me ajudar a encontrar o erro que está me atrapalhando nisso?

    5) Queria colocar um popup fixo com as redes sociais, pode me indicar algum?

    Abraços!

    ResponderExcluir
    Respostas
    1. Olá Bruno Brito,

      Estou ciente dos problemas que o site História Ilustrada está enfrentando... e posso resolver isto. Favor entrar em contato através do e-mail: adm.charliton@2cmultimidia.com e deixe seu Skype ou perfil do Facebook.

      → iServ Charliton C.│Serviços na web !

      Excluir
    2. Olá Bruno Brito!
      estive ausente bastante tempo e não respondi aos comentários...
      Queria saber se você consegui resolver a parte de redirecionamento do domínio, se esta conseguindo acessar sem o "WWW."

      atenciosamente

      Excluir
  4. Amigo poderia ver pq não esta mais funcionando ?
    queria muito colocar no meu blog http://www.kdkdownloads.com.br/
    parabéns pelo blog encontrei conteúdos muito bom aqui, poderia tbm me informar como coloco essa caixinha no canto inferior esquerdo para curti a fan page ?procurei no seu blog mais não encontrei, não sei se tem essa postagem. Obg

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook