04 abril 2013

Como fazer e personalizar caixinha de link-me

| |

Hey personas gosshtosas! ~
Um leitor pediu um tutorial bem legal pela Ask do blog, que eu realmente não sabia mas eu, como sou teimosa, fui atrás e achei lá no Cherry Bomb. Eu pedi permissão para a diva da Liah e ela deixou eu repassar o tutorial, mas é claro que é com minha explicação.

Eu até fiz dois modelos legais e fáceis de personalizar. Em breve eu vou ensinar a personalizar todas as caixinhas, amores.
Preview

Antes de tudo, para fazer uma caixinha de link-me sem personalizar há um gerador que é super rápido (depois de gerar a caixinha é só copiar o texto e colocar num gadget HTML/JavaScrpt), mas se prefere mais enfeitadinha, siga o tuto ok?


A imagem tem que estar pronta, é claro, e hospedada (clique aqui para hospedar). Aí vá em Layout • Adicionar Gadgets • HTML/JavaScript e cole:

<p align="center"><img src="URL_DA_IMAGEM"/><br />
<textarea onfocus=this.select() onmouseover=this.focus() rows="3" cols="10" name="textarea" style="font-family: verdana; font-size:10px; color: #000; border:1px solid #000; background-color:#fff; width: 120px;">
<a href="LINK_DO_SEU_BLOG" target="_blank"><img src="URL_DA_IMAGEM" border="0" /></a>
</textarea>
</p>
font-family: verdana: É a fonte da caixinha (Ex.: Arial, Trebuchet MS, Geogia)
font-size:10px: É o tamanho da fonte
color: #000: É a cor da fonte
border:1px solid #000: grossura (1px) estilo (solid) e cor (#000)
background-color:#fff; é a cor do fundo
width: 120px : É a largura da caixinha

Vocês também podem adicionar outras coisas como padding, box-shadow e tals.


Bem, eu acabei me empolgando e fiz dois estilos bem fofinhos. Caso queiram, eu faço mais estilos de link-me.


<img src="URL DA IMAGEM" /><br />
<textarea cols="10" name="textarea" onfocus="this.select()" onmouseover="this.focus()" rows="3" style="background: #COR DO FUNDO; box-shadow: inset 0 0 20px #COR DA SOMBRA, 0 0 4px #ccc; color: white; font-family: verdana; font-size: 11px; outline-offset: -5px; outline: 1px solid #fff; padding: 20px; width: 190px;"><a href="LINK_DO_SEU_BLOG" target="_blank"><img src="URL DA IMAGEM" border="0" /></a>
</textarea>

<img src="URL DA IMAGEM"/><br />
<textarea onfocus=this.select() onmouseover=this.focus() rows="3" cols="10" name="textarea" style="font-family: verdana; font-size:11px; color: #fff; outline-offset: -3px;
outline: 1px solid #fff;
background: #COR DO FUNDO; width: 190px; padding: 20px;">
<a href="LINK_DO_SEU_BLOG" target="_blank"><img src="URL DA IMG" border="0" /></a>
</textarea>
P.S.: Mude o padding: 20px; se quiserem que as margens e o texto se aproximem ou se afastem.


Espero que tenham gostado do tutorial, que tenha sido útil. Lembrando que os créditos vão pro Cherry Bomb, hein.

~ Besos

5 comentários:

  1. Muito Utiu o tuto!
    Aseita Afiliação?
    responde lá no blog por favor

    ResponderExcluir
  2. Olá eu gostaria de me afiliar com o seu blog,se aceitar avisa no meu blog :3
    http://loveforhtml.blogspot.com.br/

    ResponderExcluir
  3. Obrigada por postar esse tutorial. Sabia que não estava aparecendo o EAHTML aqui? Fiquei fora por um tempo por isso ¬¬
    ~ Sou linda, hein? u_u
    Template novo está um divo. Ainda mais com as Soshis, lindas e perfeitas como sempre. Gostaria que parasse de zuar com a minha cara com esses themes perfeitos, amor. ●ω●
    The Secret Diary

    ResponderExcluir
  4. Esse é um ótimo tutorial! Eu fui no CB é quando o vi, falei tenho que fazer, só que ai fiz ele do meu jeito, no caso o meu Link-me está igual o meu blockquote, achei o seu lindo, mais lá não tem o preview do modelo 2, kisus.

    Kuusou World

    ResponderExcluir
  5. Me ajudou bastante Isa >-<

    Bjinhos ;3

    http://cakesweetkawaii.blogspot.com.br/

    ResponderExcluir

« »