Caixa de link-me personalizada

|
A-Yo! (cansei de dizer hello) . Como vocês estão cherries? Aproveitando bem o feriado ou só babando pelos ovos de páscoa que estão em cima da geladeira e que você não pode abrir antes do domingo? >.<
Aqui em casa não temos essa tradição, então estou bem feliz e cheia de espinhas com meus chocolates.

O tutorial de hoje é bem simples, mas quando se quer fazer um layout perfeito, qualquer detalhe faz a diferença não é? Irei ensinar como personalizar aquela caixa de código bem pequena que usamos para por o código do banner de link-me. O nome "formal" dela é text area, e personalizá-la é bem simples. Veja como fica:


Para fazer a sua é bem simples. Copie o código abaixo e cole em um gadget de HTML/Javascript em seu blog:


Código
<p align="center"><img src="URL_DO_BANNER"/><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_DO_BANNER" border="0" /></a>
</textarea>
</p>

Você só precisa colocar a url do seu banner de link-me e o link do seu blog nos lugares indicados, e alterar a fonte, cor de fundo e etc. nas partes que estão em cinza. Para quem não sabe, aqui a explicação de cada código:

Font-family: O tipo de fonte da letra (Ex: Arial, Calibri, Georgia)
Font-size: tamanho da fonte
Color: Cor do texto
Border: Estilo da borda você pode mudar o tamanho, a cor e o tipo de borda.
Background: Cor de fundo da caixa
Width: Largura em pixels da sua caixinha

Espero que tenha ficado bem claro. Qualquer dúvida, não hesitem em perguntar. Pode demorar um pouco, mas eu respondo.
Por hoje é só, não esqueça de deixar seu recadinho nos comentários ♥

Gostou deste tutorial e quer reblogar? Leia as regras primeiro!

67 comentários

  1. Nossa é bem fácil de fazer tão fácil assim e o resultado fica muito lindo (se a pessoa tiver bom gosto, é claro) haha
    Muito bom o tuto como sempre Liah.
    Beijos

    modaetutorial.blogspot.com

    ResponderExcluir
  2. Adorei o tutorial! Muito útil, dá um toque totalmente novo ao layout. Quando bem utilizado fica maravilhoso. Até vou usar no meu template <3
    Obrigada, Liah.
    Kissus,
    exagerosdegarota.blogspot.com

    ResponderExcluir
  3. Amei, com certeza irei fazer ^^ '
    bjooos ;*

    http://ketychiclete.blogspot.com.br/

    ResponderExcluir
  4. Que legal!
    eu tava louca tentando fazer isso e não conseguia *o*
    depois vou tentar fazer!
    obrigada!
    <3
    Reign of Otakus

    ResponderExcluir
  5. Que bacana Liah, adorei, estou criando um novo layout então será super útil!

    ResponderExcluir
  6. Olá! Woooow, que legal :D Estou fazendo um novo layout para o meu blog, portanto talvez eu use. Achei super bacana e o resultado é lindo <3

    Beijos, Mrs. Nightshade.

    ResponderExcluir
  7. Adorei Liah, irei usar no meu próximo lay :3

    Kissus~
    apple-off-love.blogspot.com

    ResponderExcluir
  8. Liah...por favor..me ajude...estou utilizando um template seu o delicate,e amei ele!!
    Só que vc pode me ajudar a ativar a opção de responder comentario,ja tentei tdos os tutoriais,e não da certo,me ajude,por favor...

    ResponderExcluir
  9. OMG, eu não sabia desse tutorial :33
    Vou usar com certeza!

    Visita? (April 2nd)

    ResponderExcluir
  10. Estava procurando este tutu a dias! ajudou muito! obrigada!

    ResponderExcluir
  11. Liaaaaaaaaa.... postaram conteudo do cherry boomb neste link sem creditos:

    http://pirassunungatudo.blogspot.it/2013/01/como-tirar-sombra-das-imagens-nas.html

    ResponderExcluir
  12. Ótimo tuto, é sempre beem util!

    cupcakelland.blogspot.com

    ResponderExcluir
  13. Amei o tutorial, fica muito fofo o resultado! Estou usando viu?

    Kisses ;*
    ~ The Things Girls // Ajude-me com a meta?

    ResponderExcluir
  14. Otimo, seu tutoriais sempre são bons

    http://meniina-cupcake.blogspot.com.br/

    em reformas

    ResponderExcluir
  15. Aaah, queria eu estar comendo meus ovinhos de páscoa TT.TT
    Adorei o tutorial, vou usar em meu próximo layout, Liah!
    Beijo <3
    pqngarota.blogspot.com

    ResponderExcluir
  16. bem facil, aprendi no Kw hehe *o*
    kisses

    ResponderExcluir
  17. Ain Dália-chan! Ótimo tutorial, estava mesmo precisando.
    Agora é só esperar a minha preguiça ir embora para eu fazer o meu (-q).
    iuahsiausahisuasa'
    Kissu#
    http://the-kawaiis.blogspot.com.br/
    ~Ah, obrigada por sempre estar no meu blog, comentando e visitando *-*

    ResponderExcluir
  18. Eu não uso caixinha link-me u_u
    Bem simples esse tutorial, fica bem bonitinho também haha :D
    Beijos ;* | its--laura.blogspot.com

    ResponderExcluir
  19. realmente estava curiosa pra saber como vc personalizava essas caixinhas de link-me o/
    adorei o tuto bem explicadinho o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  20. Cada detalhes faz realmente a diferença, amei o tutorial.
    Aproveitando, eu to com post novo lá no blog.
    http://innsideofme.blogspot.com.br/
    Beijosss

    ResponderExcluir
  21. ótimo tutorial parabéns muito feliz de ver o Cheerry Bomb bem ativo de novo
    itsrockmore.blogspot.com.br

    ResponderExcluir
  22. WOOOOW, Liah! <3
    Eu uso e amo esse tutorial, fica beeem fofo *-----* Gosto bastante de personalizar os mínimos detalhes, e esse código dá um charme ao layout. kkkk

    Beijos, Sweetie Coconut!

    ResponderExcluir
  23. Liah, estou usando, e ficou muito foofo *.*.* '

    Eu vi na ask que seu aniversário é hoje, sério? Se for, perabéns, mas se não for, parabéns mesmo assim!

    Beeijãao ;*

    ~ Lorrany | maniadebg.blogspot.com

    ResponderExcluir
  24. Este comentário foi removido pelo autor.

    ResponderExcluir
  25. Aaah, eu estava procurando muito esse Tutorial, e agora eu acheeei!! Obrigaada Liah sua linda ;33

    xoxo♥

    Crazy Girl || Clique no meu Perfil para Visitar ~

    ResponderExcluir
  26. Você sempre traz tutoriais interessantes!
    Amo e sigo o Cherry Bomb (que agora é Cherry Boomb?) tem um tempão!


    POR FAVOR LIAAAAAH! VISITA O MEU BLOG E DIGA O QUE ACHOU, SIGA TAMBÉM, SE POSSÍVEL.

    VOCÊ NÃO TEM IDEIA DE O QUANTO EU SONHO EM TER VOCÊ COMO SEGUIDORA.

    É UMA HONRA MUITO GRANDE!

    O MMG ESTÁ COM NOVO LAYOUT : http://mundinhomagicodagaby.blogspot.com.br/

    Ufa, parei u_u
    Desculpe a empolgação ><'
    Mas, é sério, sempre quis tê-la como seguidora, um sonho incompensável! ^.^

    Espero que atenda meu pedido! Mil beijos! º3º

    ResponderExcluir
  27. Com certeza utilizarei no próximo layout, sempre quis saber como se fazia isso, ótimo tutorial! ;D

    Adolescente Nerd

    ResponderExcluir
  28. Eu sempre quis esse Tutorial, obrigada Liaaaah *u*
    Eu amoooo o seu BLOG SUA DIVA♥

    Estou começando um Blog novo com mais 5 amigos meus, e ficaria super feliz se nos seguisse. POR FAVOR LIAAH, É UM SONHO NOSSO PLISSS *U*
    Eu já vou te seguir, vou fazer o possível aqui é porque quando eu vou seguir alguém fica dando Error 404 e eu não sei por que, mais vou fazer de Tudo aqui para te seguir, pfvr T.T

    Big Explosion, ;3

    ResponderExcluir
  29. Eu amei o novo layout, sem contar que o anterior era lindo!!
    Parabéns, os tutoriais me ajudaram muito.
    Se puder, da uma passadinha la :p
    http://rihannafoda.blogspot.com/

    ResponderExcluir
  30. Adorei o tuto, o lay está perfeito >3<
    Já estou te seguindo =)
    Sou iniciante no blogger, criei o meu blog ontem ^^
    Se puder, pode dar uma passadinha lá?
    http://my--story--book.blogspot.com.br/
    Obrigada, beijos !

    ResponderExcluir
  31. O tuto é bem útil, o resultado fica muito fofo!
    Para deixar o lay mais 'perfeito' cada detalhe conta não é?
    Eu tenho a maior preguiça de fazer link-me SHUAHUHA'. O PS está aberto eu não tô nem a fim de fazer o meu, mas se fizer uso o tuto u3u
    Beijos!

    Caprichosdabiia.blogspot.com

    ResponderExcluir
  32. Amei, qualquer detalhe já faz a diferença.

    ResponderExcluir
  33. Gostei fica super legal mesmo parabens ta divo

    ResponderExcluir
  34. É bem útil esse tutorial ! Pois a caixa de link-me é meio sem graça então essa personalização já faz diferença !
    http://feminisess.blogspot.com.br/

    ResponderExcluir
  35. nossa, amei sua ideia, tão simples com um efeito tao bonito. bjs
    quatroestacoes.blog.br

    ResponderExcluir
  36. Oi liah, amo seu blog, vc é muito inteligente e sempre tem otimos tutoriais, 90% do meu layout foi feito com seus tutoriais!!!

    Não sei se vc aceita selinhos!!! Mas se tiver aceitando tem um para vc lá no meu blog!!! Seria uma honra se vc aceita-se o selinho!!!

    gabyfaria.blogspot.com.br/

    ResponderExcluir
  37. Amei esse tutorial ^^ Eu sempre tive curiosidade de saber como colocar essas caixinha personalizada. Eu usava a comum, mas agora vou colocar essa que é bem mais bonita.
    Haru Kingdom

    ResponderExcluir
  38. Nenhuma caixinha de link-me funciona no meu blog, porque??? Nem a caixinha normal! Aparece só a imagem e a caixinha do código vazia! Me ajuda???

    ResponderExcluir
  39. Muito legal mais o link ñ ficou,por que?

    ResponderExcluir
  40. poxa, eu queria saber como faz um banner... me ajudaaa? http://meninasde12anostambemtemsentimentos.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Visita meu blog :
      http://www.meninamalvada.tk
      O Meu foi feito por um tutorial do PhotoScape aqui do Blog , tem como fazer banner em "Goodies" procura la :D

      Excluir
  41. Mas eu queria saber assim , como criar menu no photoshop , mas se tiver como criar no photoscape tb ?

    ResponderExcluir
  42. Olha, eu tenho u blog, que já criei link-me's em diversos sites e diversos modos de fazer, mas quando eu salvo no layout do blog, não aparece nenhuma palavra, só a imagem e o quadro branco. Porque? e o que fazer? É porque é um modelo de página diferente?

    ResponderExcluir
  43. ameei seu tutorial me ajudou muiito obg :)

    ResponderExcluir
  44. Oi Cherry,bom dia.Hoje pesquizasando personalização para um blog de fotos que vou criar,deparei com im blog dizendo que você vai excluir seu blog e não vai mais blogar,achei uma pena.Então coloquei alguns tutoriais seu no meu blog de teste,para guardá-los,minha filha disse que não posso fazer isso.Então pesso sua permissão para fazê-lo,posso?Se não me avise e eu tirarei tá.Muito obrigada.Seus tutoriais são fáceis para eu entender.

    ResponderExcluir
  45. Adorei e ficou muito fofo no meu blog mas tem um probleminha, o link não aprece na caixa de jeito nenhum...
    Eu fiz e refiz mas de 7 vezes este tutorial e não aparece, tem como você me ajudar um pouquinho?

    http://fanatica1d.blogspot.com.br/

    ResponderExcluir
  46. Ameiiiii!! Ficou perfeito no meu Blog :-)

    http://videosamadoress.blogspot.com.br/

    P.S.: Blog com conteúdo adulto hihihi

    ResponderExcluir
  47. Óla adorei seu blog e adorei seu posts
    http://girlslinkedoficiall.blogspot.com.br/

    ResponderExcluir
  48. Como sempre, otima dica ><
    http://princesofnoiseof.blogspot.com.br/

    ResponderExcluir
  49. ótima dica, Como sempre ^^
    http://apenasgr.blogspot.com.br/

    ResponderExcluir
  50. Adorei a dica, mas o meu não deu certo até certo ponto, porque não aparece o link dentro da caixinha para a pessoa linkar no site dela, pode me ajudar?

    http://uaimeninablog.blogspot.com.br/

    ResponderExcluir
  51. O meu fica em branco... Alguém pode me ajudar???

    blog:www.cpsemprepresente.blogspot.com

    ResponderExcluir
  52. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  53. Post Muito Bom,E Util,Como Eu Gosto Mto Desse Blog ... Posso Colocar O Cherry Bomb Como Afiliado No Meu Blog?

    http://menina-sensivel.blogspot.com.br/

    ResponderExcluir
  54. Adorei o tutorial, muito útil e estou sempre acompanhando as dicas.

    http://bookndreams.blogspot.com.br/

    ResponderExcluir
  55. Fiz no meu, ficou um lilás super lindo mas não aparece o código, meu banner foi feito no flash vortex, mas não aparece o código afs me ajude!

    ResponderExcluir
  56. A minha aparece a caiixinha de link me mais nao aparece o codigo html dentro dela. Oque fazer?

    ResponderExcluir
  57. Bem útil!

    Sorteio de layout no meu blog: little-things-foryou.blogspot.com

    ResponderExcluir
  58. Você não imagina como isso me ajudou.Muito obrigada

    dudynhaoliveira.blogspot.com.br

    ResponderExcluir
  59. oi querida td bem n consegui fazer ja fui em tudo quanto é site/blog e nao consegui http://garotaespertinh.blogspot.com.br

    ResponderExcluir
  60. Muito lindo *-*
    Brigadinha

    http://clubeleitorassumidas.blogspot.com.br/

    ResponderExcluir
  61. oooiii eu só não consigo fazer um banner que não fique largo demais para ocupar todo o espeço,você pode fazer um para mim que contenha o nome Meu Blog Otaku e com um desenho de pandinha anime??eu espero a resposta lá no blog,eu só preciso do banner mesmo

    http://animedoqem.blogspot.com.br/

    ResponderExcluir
  62. Muiito legal vou tentar http://amorinhacandy.blogspot.com.br/

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...