#DIY - Código para Banner ou Link-Me

Hey Beauties! ūüíč
Não sei se repararam mas para além de ser uma amante de maquilhagem e jogos, sou bastante entendida na criação de layouts de blog de raiz, desde a criação e codificação das imagens aos gadgets. Se assim não fosse, não teria em funcionamento a loja Beauty n' Queen Designs.
Porém, não manterei o conhecimento somente para mim e tenciono ensinar-vos alguns códigos HTML fáceis de entender e que poderão e devem utilizar no vosso blog para que fique bem mais organizado e bem composto.
Informo que estes códigos são de HTML e não JavaScript. Por isso, antes de os tentarem noutros sites de blogs que não sejam da blogger, informem-se se os layouts são feitos através dos códigos HTML para que nada entre em conflito.

O código HTML que vos trago hoje é muito simples e está visível e ativo não só no meu blog, como também no blog de algumas clientes a que sempre faço questão de o inserir.
Antes de irmos ao código, informo que este funcionará como um gadget e não mexeremos sequer no tema do blogue para não vos atrapalhar já de início.


Imagem do que vamos fazer

A imagem acima é a representação do gadget que tenho no meu blog com o código que vos irei ensinar hoje.


Porque vos estou a ensinar isto?
O motivo pelo qual vos estou a ensinar este c√≥digo √© de certa forma a corrigir muitas confus√Ķes em rela√ß√£o √† diferen√ßa entre log√≥tipo, marca d'√°gua e banner.
Por v√°rias vezes pe√ßo a afiliados o banner ou o link-me do blog, p√°gina, f√≥rum, etc. e acabam por me enviar o log√≥tipo a um tamanho extremamente enorme fora das dimens√Ķes que um banner deve ter ou a marca d'√°gua ou, como j√° me aconteceu, enviarem-me a imagem do banner simplesmente.
Princesas e Pr√≠ncipes que estejam a ver isto, na blogosfera quando algu√©m vos pede o banner para usar na publicidade em gadget e afins, a pessoa est√° a pedir o C√ďDIGO HTML e n√£o a imagem, pois o pr√≥prio c√≥digo j√° tr√°s a imagem e o link da vossa p√°gina/blog/f√≥rum para que toda a gente possa aceder.


Função do código
Ao observarem a imagem acima, reparam que por baixo da imagem de banner se encontra uma caixa com um código lá dentro. Esse código facilita a qualquer um de partilhar o vosso site através do banner no seu website, não tendo que ficar à espera que vocês enviem a imagem e depois ainda ter que codificar a imagem por vocês para inserir no gadget de parceiros ou de publicidade.
O lado bom é que basicamente facilitam a qualquer um de fazer propaganda gratuita através deste código que ficará no vosso blog visível para os leitores.


O que é necessário ter para este código?
- Antes de pensarem em inserir o c√≥digo, confirmem que t√™m um banner com as dimens√Ķes certas. Caso contr√°rio o banner sair√° das extremidades do sidebar ou, em caso das dimens√Ķes serem demasiado pequenas, n√£o se ver√° sequer o banner.
No meu caso, eu sempre uso de comprimento um máximo de 300px e um máximo de 250px a nível da altura. Tendo assim o meu atual gadget 200px por 100px.
Em caso de Link-Me o comprimento deve de conter um máximo de até 300px e a altura ser relativamente maior do que o comprimento.

- Igualmente, antes de mexerem com o código e após garantirem que têm um banner (o banner deve estar preferencialmente em .png), devem de hospedar essa mesma imagem no IMGUR.
Após a hospedagem da imagem, devem de tornar o link da mesma em .PNG.

- Alerto que irão aparecer dois links junto à imagem do banner hospedada, mas o link oficial é o link que aparecerá em cima do banner sempre que o mouse lá passe.

O link que sublinhei a verde é a posição correta
onde aparecer√° o link correto do vosso banner
Se repararem, o link dessa imagem não se encontra em .PNG, o que significa que teremos que o modificar de modo a que fique como nós queremos.
Para o colocarmos em .PNG basta simplesmente adicionarem no fim do link - .png

Link Inicial: https://imgur.com/I1tCnek
Link em .PNG: https://imgur.com/I1tCnek.png


Como inserir o código:
a) Em primeiro lugar, entrem no painel de controlo do vosso blog.
b) De seguida cliquem no separador "Esquema".
c) Onde diz "Sidebar1", cliquem sobre a frase "Adicionar uma mini aplicação".
e) Automaticamente abrir√° uma segunda janela na qual clicar√£o no gadget que diga "HTML/JavaScript".
f) De seguida, escrevam o t√≠tulo do vosso novo Gadget "Banner" e, na √°rea do "Conte√ļdo" ir√£o colar o seguinte c√≥digo descrito abaixo.

<center><div align="center"><img src="INSERIR O LINK DA IMAGEM DO BANNER EM PNG.png"/><br/>
<textarea cols="15" rows="3" onfocus="this.select()" onmouseover="this.focus()" name="textarea" style="width:80%;">
&lt;a href="INSERIR O LINK DO BLOGUE" target="_blank">&lt;img src="INSERIR O LINK DA IMAGEM DO BANNR EM PNG.png" title="INSERIR O NOME DO BLOGUE" alt="INSERIR O LINK DO BLOGUE" style="border:0;"/&gt;&lt;/a&gt;
</textarea>
</div></center>



Como mexer e alterar o código? Simples!
  • Legenda a azul "INSERIR O LINK DA IMAGEM DO BANNER EM PNG" - Aqui devem inserir o link da imagem hospedada no IMGUR em .PNG
  • Legenda a vermelho "INSERIR O LINK DO BLOGUE" - Aqui devem inserir o link do vosso blog/p√°gina/f√≥rum
  • Legenda a laranja "INSERIR O NOME DO BLOGUE" - Aqui devem inserir o nome do vosso blog/p√°gina/f√≥rum


Um beijinho da vossa,
Beauty n' Queen


Sem coment√°rios :

Enviar um coment√°rio