Social icons

3.08.2011

Tutorial: Como criar linkbar com imagens

A partir de hoje vou dar umas pequenas dicas que podem ser úteis caso queiram modificar um pouco os vossos blogs e dar-lhes 'outro ar'.
Decidi que neste primeiro tutorial ensinaria como criar uma linkbar com imagens.

1- Primeiro, irão precisar de um editor de imagens, o Photoshop, Gimp ou PhotoFiltre, por exemplo. Este último é muito fácil de trabalhar caso não estejam muito familiarizadas com estes programas, mas infelizmente só existe para windows. O gimp é uma boa alternativa ao photoshop. Num destes programas criam as imagens para serem 'linkadas'. Tenham atenção pois estas devem ter o mesmo tamanho (no que diz respeito à altura) e verifiquem o tamanho do header do vosso blog, normalmente é esse o tamanho acertado para a largura total da linkbar.

Como exemplo, irei usar estas imagens que usei anteriormente num dos meus blogs:




Photobucket Photobucket Photobucket Photobucket


A altura de todas estas imagens é 40px, podem ser maiores ou mais pequenas dependendo do efeito que pretendem.
Passemos então à prática: Como criar uma linkbar com imagens?

É muito simples e apesar de existirem diversas maneiras de fazer isto, vou dar-vos a conhecer a maneira como eu própria faço isto pois a meu ver é a forma mais fácil.

1 - Criar uma conta no photobucket. Se já tiverem, melhor!
2 - Fazer o upload das imagens como mostro a seguir:

Cliquem em Upload Now e a seguinte página irá aparecer




Photobucket
3- Clicar em Customize your upload options, como mostra na imagem. Irá surgir a seguinte janela:




Photobucket

4- Seleccionem a opção Best Possible Quality para que as vossas imagens não percam o tamanho que lhes deram quando as criaram.

5- De seguida, cliquem em Select Photos and Videos e seleccionem as imagens que previamente criaram




Photobucket
6- Quando o upload estiver terminado (aparece uma mensagem a dizer Upload Complete), cliquem em My Albums, como indica a imagem:




Photobucket
7- Na página My Albums aparecerão as imagens que acabaram de carregar no site. Passem com o rato sobre elas (uma de cada vez) e copiem o código HTML code como mostra a imagem. Como normalmente a imagem HOME encontra-se em primeiro lugar na linkbar copiei primeiro o código da imagem HOME.




Photobucket

Agora sim, estão prontos para começar a criar a vossa linkbar. E onde colam os códigos? Mostro como se faz a seguir:

8- Entrem no painel do vosso blog e sigam estes passos: DESIGN > ELEMENTOS DE PÁGINA


9- Logo abaixo do Cabeçalho aparece a opção Adicionar Miniaplicação. Cliquem nela

Photobucket

10- Surgirá uma pequena janela com diversas miniaplicações. Escolham a que mostra na imagem:

Photobucket

11 - Surgirá esta janela e é nela que devem colocar o código que copiaram no passo 7.

Photobucket
12 - Se quiserem que a vossa linkbar esteja centrada basta inserir o código que se encontra dentro do rectângulo amarelo na imagem. Seleccionem o primeiro endereço url do código da imagem (seleccionado a roxo na imagem) e substituam-no pelo link que pretendem, ou seja, o link para o qual os leitores serão direccionados quando clicarem na imagem.

13 - Repitam o passo 7 até colarem nesta janela todos os códigos das imagens. Não façam ENTER entre as imagens senão, em vez de ficarem numa só linha, ficará cada uma na sua linha e não é esse o efeito pretendido (isto será apropriado caso queiram fazer um menu na sidebar com as imagens na vertical e não na horizontal). No final ficará assim (eu aqui não substitui os links porque é só um exemplo mas não se esqueçam de substituir o primeiro endereço URL do código de CADA IMAGEM:

Photobucket


14 - Depois basta guardar e está feito :) o efeito final será este:

Photobucket

Se quiserem que os links sejam internos (por exemplo uma página de com os vossos blogs preferidos) basta ter uma página previamente criada no vosso blog - para criar páginas basta irem a PAINEL > ENVIO DE MENSAGENS > EDITAR PÁGINAS > NOVA PÁGINA - e inserirem o url dessa mesma página no código da imagem. Caso tenham uma imagem para FACEBOOK, por exemplo, basta inserirem o link da vossa página do facebook e os leitores serão imediatamente direccionados para lá.

Podem criar todo o tipo de imagens para a linkbar, umas mais simples como as que usei como exemplo, outras mais complexas como esta, por exemplo, onde as medidas e a precisão são fundamentais

Photobucket

Espero que vos seja útil e qualquer dúvida não hesitem :)

6 comments

  1. Este tutorial é realmente fabuloso,Daniela,parabéns!
    Eu agora comecei a usar um método mais complicado que envolve HTML e coordenadas específicas,por isso nunca ia tentar meter isso na cabeça de ninguém com pouca experiência.
    Adoro! 5/5 stars!

    ReplyDelete
  2. Awww...*blushes* Obrigada!!! O batom ao vivo fica-me digamos assim..mal! Não é mesmo um tom que me favoreça mais ainda ando à procura do vermelho perfeito,este é mais um rosa vermelho esquisito que está quase novo e vai ficar guardado num canto.

    Obrigada,és um amor!! =D

    O prazer é meu,fizeste um trabalho maravilhoso,sem dúvida.

    Obrigada.Já estou bem,acho que,agora é as alergias de Primavera e vamos lá ver se mando amanhã a tua encomenda,se os senhores dos correios não decidirem fechar outra vez mais cedo..ou se não encontrar outra fila de reformados à minha frente!

    Beijos!

    (deixo aqui a resposta,espero que não tenha mal)

    ReplyDelete
  3. Olá gostaria de saber se podias dar umas dicas de como criar um template?Ou isso é assim para lá de muito complicado?
    Beijinhos :D
    E gosto muito do teu blogue.

    ReplyDelete
  4. Eu passo a vida a tentar alterar o meu blog mas nem sempre as coisas correr bem... realmente esta maneira é bem mais simples do que andar a mexer no código como eu custumo fzr! tenho de experimentar! :)

    ReplyDelete
  5. olá Daniela, antes de mais parabéns pela iniciativa, tenho a certeza que dará jeito a muita gente :)

    queria perguntar-te se sabes centrar as mensagens no blog, tenho tentado de várias maneiras e nunca consigo..

    ando há meses com os vídeos à esquerda e ainda por cima cortados.

    obrigada!

    ReplyDelete

Powered by Blogger.