O Blogger é certamente um dos serviços ou plataformas mais utilizadas para criação e alojamento de blogs. Aos poucos tem vindo a implementar serviços que permitem uma cada vez mais fácil personalização, incluindo páginas múltiplas, mas é claro que ainda há muito a fazer.
Um dos seus pontos fracos, reconhecido na generalidade pelos utilizadores e de modo especial pelos detractores, é o limitado leque de opções de escolha dos templates ou temas disponibilizados. Apesar das ferramentas que possibilitam de forma fácil e automatizada configurar e personalizar os elementos e cores dos diversos esquemas/layouts, no entanto ainda existem algumas limitações que só com recurso a edição do código html é possível alterar as coisas a gosto o que, diga-se, não está ao alcance da maioria dos utilizadores.
No nossa caso, num certo blog pessoal, pretendemos fazer com que a imagem do cabeçalho, o header, fosse múltiplo e fosse apresentada de modo aleatório, de forma a que sempre que se abrisse o blog, ou com o refresh, surgisse uma imagem diferente mas dentro do espírito do blog.
Podem existir outras formas de o fazer, passando sempre pela alteração do código fonte, mas fizemos da seguinte forma e está a funcionar bem:
1 passo: preparar previamente as imagens pretendidas, devidamente dimensionadas de acordo com as exigências do template. Para melhor efeito na transição, não é obrigatório mas será aconselhável que a altura das imagens seja a mesma; Já será uma questão de design, mas importa ter cuidado com as cores base de modo a integrarem-se de modo equilibrado no tema geral;
2 passo: sendo que pelo sistema automático não dá para remover o widget do cabeçalho da página original, deverá ser preparada uma imagem neutra que irá ocupar o lugar da imagem do header em uso. Deve-se ter em conta a cor do fundo da página de modo a que depois a respectiva imagem fique disfarçada. Se o fundo for preto então convém que a imagem seja de um preto sólido e assim sucessivamente se for de outra cor. No nosso caso a imagem era toda preta, com a largura exigida no template mas com uma altura mínima de modo a ocupar pouco espaço; Para efeitos de margem superior entre o novo cabeçalho a criar e a habitual navbar do Blogger, pode jogar na altura da tal imagem neutra;
3 passo: alojar as imagens criadas num serviço de hospedagem de imagens, como o ImageShack, o PhotoBucket, o Tynipic ou outro: Deverá tomar nota da url completa de cada imagem alojada pois irá precisar dos respectivos endereços;
4 passo: aceder à área de administração do Blogger e abrir a respectiva Dashboard do blog e seleccionar a aba Esquema ou Layout, conforme se em inglês ou português;
5 passo: editar o widget Cabeçalho, remover a imagem antiga e carregar a tal imagem neutra que deverá ter ligada a opção em vez do título e descrição;
6 passo: novamente na área de edição do Esquema, seleccionar "Adicionar uma mini-aplicação" e de depois na lista seleccionar o widget "HTML/JavaScript
7 passo: na área de edição do respectivo widget, ou seja a mini-aplicação, que deve deixar sem título, introduza o seguinte código:
<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="url do blog"><img alt="Nome do Blog" src="url da imagem"/></a>'
quotes[1]='<a href="url do blog"><img alt="Nome do Blog" src="url da imagem"/></a>'
quotes[2]='<a href="url do blog"><img alt="Nome do Blog" src="url da imagem"/></a>'
quotes[3]='<a href="url do blog"><img alt="Nome do Blog" src="url da imagem"/></a>'
quotes[4]='<a href="url do blog"><img alt="Nome do Blog" src="url da imagem"/></a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
8 passo: obviamente que o código antes de ser colado já poderá estar previamente editado, por exemplo no notepad; Todavia, se assim não for, ainda dentro da área de edição do widget, deve substituir os textos aqui representados a vermelho pelos dados do blog a editar bem como as urls completas das imagens anteriormente alojadas. Caso se pretenda adicionar mais imagens deve copiar e colar as tags quotes e alterar o respectivo número do array: por exemplo:
quotes[5]='<a href="url do blog"><img alt="Nome do Blog" src="url da imagem"/></a>'
O mesmo sentido se aplica caso queira reduzir o número de imagens, ou seja, deve eliminar as quotes que estiverem a mais do que o pretendido:
9 passo: Depois de gravar, ok, já na edição do Esquema deve arrastar a respectiva widget para o espaço entre o cabeçalho original e a zona dos posts. Será assim o novo cabeçalho;
10 passo- finalmente deve gravar as alterações gerais e experimentar visualizar o blog. Em princípio, se seguiu correctamente todos os passos deve funcionar. Importa referir que as imagens não devem ser muito pesadas de modo a que o carregamento seja rápido e fluido.
Mesmo sem imagens de ajuda, creio que o tutorial e os respectivos passos descrevem de forma fácil os procedimentos a seguir para quem desejar e quiser um efeito desta natureza. Connosco funcionou.
- Anabela Pereira