domingo, 28 de agosto de 2011

Buttons de Parceria - DICAS / MINI TUTORIAL



Oi pessoal, queria ilustrar esse post com uma imagem de RAFE, mas tô ocupado com uma pequena animação, que se caso eu terminar hoje, eu a colocarei no cabeçalho do blog como uma opção pra quem quiser ver, vai ter som nela também. Enfim como não posso parar pra fazer um desenho pra ilustrar o post, vai esse que é muito bonito, mas não é meu, viu. XD


    Bom, nessa semana eu andei visitando alguns blogs diferentes dos que eu sempre vou de costume e notei algo na parte de parcerias desses blogs. Os banners/buttons dos parceiros são todos de tamanhos aleatórios e desproporcionais entre eles, dá uma idéia de bagunça e desorganização. Então eu resolvi explicar, pro pessoal que estiver lendo este post agora, as funções dos códigos HTML dos buttons, banners. É bem simples, isso é tudo que você precisa pra gerar o button/banner:

<a href="http://rafeproject.blogspot.com/" target="_blank"><img src="http://www.rafeproject.com/rafe_baner.gif" width="88" height="31"></a>



 Primeiro : <a href="http://rafeproject.blogspot.com/" target="_blank">

   Essa tag do código informa pra onde se vai quando se clicar no button/banner. No caso do exemplo acima, está direcionado pro meu blog. O problema é que a gente não quer que o visitante que veio até o nosso blog saia dele assim que clicar no button/banner, não é ? Imagine a seguinte situação. A pessoa chegou até o seu blog e tava olhando ele numa boa e gostando e de repente ela olha um button/banner de um parceiro e ela resolve clicar nele e pá, foi pro blog do cara (abriu na mesma janela onde tava seu blog) e não gostou e como de costume clicou no "X" e fechou a janela e depois ela se liga "putz fechei a janela onde tava aquele blog legal tb". As pessoas são preguiçosas, de repente ela vai pensar: " Já era, depois eu procuro de novo" e aí você já perdeu um futuro visitante. Então o interessante é que quando a pessoa clique nos banners/buttons dos parceiros, é que ele abra em outra janela separada, sacou ? E é pra isso que serve o target="_blank"  . Tá vendo ele no fim da TAG que eu coloquei no ínicio dessa explicação ? Então, use-o.


 Segundo : <img src="http://www.rafeproject.com/rafe_baner.gif" width="88" height="31">

 Aqui nessa TAG a gente tá informando onde o JPG ou GIF animado está hospedado, nesse exemplo é o endereço onde está a minha imagem. Você consegue esse endereço clicando com o botão direito na imagem que está no blog do parceiro e depois em "copiar endereço da imagem" no FIREFOX ou clicando com o direito do mouse em cima da figura e depois "Copiar URL da imagem" no CHROME. Daí vc só cola o endereço no lugar desse outro que tá no exemplo. Agora vem algo legal pra manter os buttons/banners todos do mesmo tamanho. Logo depois disso vem width="88" height="31" . Pois bem, pra que serve isso ? Width é LARGURA em inglês e Height é ALTURA, então vc já sacou né. Quando a imagem do Parceiro é muito grande, essa tag o dimensiona para as medidas que você definir ali, no caso do exemplo tá para 88x31 pixel, padrão na maioria dos blogs. Mas você pode aumenta-las também, assim como eu faço nos TOP 12 DE VISITAS do blog de RAFE, pra isso é só mudar os números.


E por último :</a>

Essa TAG é só pra fechar todo o grupo, porque se você notar você começou escrevendo o código com  <a ... , então você fecha o código com a mesma TAG, mas com "/" pra indicar que terminou.

Barbadinha né ? Agora você já pode ORGANIZAR SEUS PARCEIROS no seu blog, mãos a obra brother.
Até mais pessoal, um abraço !
Daniel Dias
 

4 comentários:

Eriko Everson disse...

valeu Daniel gostei do tutorial.^^
Gostei de + agora sei HTML dos buttons , facius de aprender .;D

RAFE disse...

Dinada, que bom que ajudei ! XD

c8ris disse...

muito bom ^^ facil de entender

RAFE disse...

Valeu !XD