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 />font-family: verdana: É a fonte da caixinha (Ex.: Arial, Trebuchet MS, Geogia)
<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-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 />P.S.: Mude o padding: 20px; se quiserem que as margens e o texto se aproximem ou se afastem.
<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>
Espero que tenham gostado do tutorial, que tenha sido útil. Lembrando que os créditos vão pro Cherry Bomb, hein.
~ Besos
Muito Utiu o tuto!
ResponderExcluirAseita Afiliação?
responde lá no blog por favor
Olá eu gostaria de me afiliar com o seu blog,se aceitar avisa no meu blog :3
ResponderExcluirhttp://loveforhtml.blogspot.com.br/
Obrigada por postar esse tutorial. Sabia que não estava aparecendo o EAHTML aqui? Fiquei fora por um tempo por isso ¬¬
ResponderExcluir~ 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
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.
ResponderExcluirKuusou World
Me ajudou bastante Isa >-<
ResponderExcluirBjinhos ;3
http://cakesweetkawaii.blogspot.com.br/