Como incluir a barrinha de progresso no Blogger
Apesar da 'limitação' que o Blogger pode apresentar, como a falta de plugins para facilitar o nosso trabalho, é possível sim acrescentar a famosa Barra de Progresso, que provavelmente, você já deve ter visto no YouTube ou em outros sites. O tutorial é muito simples, mas, requer atenção por parte de quem vai fazer. Se você não entende de HTML/CSS, é altamente recomendável que você não continue. Mas, se mesmo assim quiser continuar, faça um backup de todo o seu template pronto para evitar perdas e danos significativos.
A instalação é BEM simples, siga o passo à passo abaixo:
1. Acesse o site do Pace.
2. Após acessar, desça até encontrar os temas disponíveis
3. Escolha seu tema favorito (o que é igual ao do YouTube é o Minimal)
4. Clique em Download
Uma página se abrirá com o código do tema correspondente.5. Copie o código e vá ao seu blog em "Modelo" > "Editar HTML"
6. Aperte CTRL + F e procure por "header" (sem as aspas)
7. Desça até encontrar um aviso semelhante à esse:
Esse aviso serve para indicar as configurações que o cabeçalho do seu site terá como as cores, tipos de fonte e etc.
8. Cole o código que você copiou anteriormente em cima do aviso e NÃO salve.
DICA: Se quiser, pode fazer um aviso semelhante para você encontrar o código com mais facilidade da próxima vez, porque você vai precisar, já já!.
9. Volte ao site original do Pace, e dessa vez procure e clique no botão azul "PACE.JS"
10. Uma outra página se abrirá com um código enorme. Copie-o
11. Volte ao "Editar HTML" do seu blog.
12. Aperte CTRL + F e procure por: "//<
14. Clique em "Salvar Modelo"
Pronto! Clique em "Visualizar Blog" e confira o resultado.
Quero mudar a cor da barrinha, como eu faço?
Dexeuexplicar: Lembra quando eu disse que você iria precisar voltar ao primeiro código que você copiou? Então, é para você trocar a cor da barrinha. Siga esses passos adicionais:
1. Volte em "Modelo" > "Editar HTML"
2. Aperte CTRL + F e procure por "Pace"
É bem provável que você encontre aquele primeiro código de cara.
3. Encontre o comando '.pace .pace-progress {' e procure por "Background"
4. Troque o código da cor pela de sua preferência.
Acesse o site Flextool que possui uma tabela de cores em HTML e encontre o código de sua preferência.
E fim! Seguindo esses passos, você deve conseguir com sucesso ter a barrinha de progresso em seu site. Qualquer dúvida é só deixar nos comentários, tá?
Nenhum comentário: