Personalizar Caixinha link-me

É possível dar uma nova aparência(formatar) a caixinha link-me retirando a barra de rolagem ou alterando suas bordas, isso tudo é fácil para fazer basta colocar um estilo (style) no código do textarea, esse é o nome correto da caixinha link-me. O código para fazer isso é:

<textarea style="overflow:hidden; border:1px dashed #0000FF; background:#FFFFCC; width:100px; height:40px"onfocus="this.select()" onmouseover="this.focus()">Conteudo da caixinha</textarea>


Quem já sabe um pouco de CSS já notou que a única coisa diferente é que aplicamos os mesmos recursos usados na formatação de uma pagina, texto ou botão no código da caixinha link-me, veja que o faz cada parte do código:

overflow:hidden – oculta a barra de rolagem
border:1px dashed #0000FF - estilo e cor da borda, veja aqui como usar outros tipos de bordas.
background:#FFFFCC – cor de fundo, veja o código de outras cores.
width:100px; height:40px – largura(100) e altura(40) da caixinha.

Depois que terminar de formatar para deixar com uma aparência que combine com o seu blog é só colocar do mesmo jeito que qualquer outra pela pagina layout, adicionar gadget, html/javascript. Se você usa varias caixas de texto desse tipo no blog e quiser mudar a aparência de todas elas também é possível e muito simples de fazer. Entre na pagina editar html e procure por body{.....} logo depois que fechar as chaves do body coloque isso:

textarea {overflow:hidden; border:1px dashed #0000FF; background:#FFFFCC; width:100px; height:40px}

Fazer alterações aqui é da mesma forma que mostramos acima para uma caixinha individualmente, mas aqui as mudanças que fizer serão aplicadas a todas as caixas de texto (textarea) do seu blog. Note que o inicio do código é textarea não tem ponto nem qualquer outro sinal antes da palavra.

Veja também:

Caixinha com o link da postagem
Fazer galeria de fotos
Registrar domínio (blog com endereço .com.br)
Configurar o domínio no Uolhost
Gerador de tags
Imagem no título das postagens
Modificar gadgets separadamente

19 comentários :

  1. Boa dica seu blog sempre me ajudando e ajudano outros blogueiros continue assim.

    ResponderExcluir
  2. adorei o novo visual das minhas caixinhas

    beijos

    ResponderExcluir
  3. Olá amigo, gostaria de saber se vc sabe como colocar os ultimos comentarios, de forma dinâmica e não somente com eles parados, se puder me dar uma " Dica " rsrsr ficarei grato vi em um blog mas não consigo acha-lo novamente para te mostrar.

    ResponderExcluir
  4. A proposito acabei de inserir um link em meu blog aqui para o dicas espero estar em breve entre os seus parceiros.

    Abração.


    Jack.

    ResponderExcluir
  5. Eu gostei muito dessa sua ideia tenho uma pergunta em alguns blogs tem a opção "clique aqui para copiar"

    Ou seja abaixo da caixinha tem o botão para clicar e copiar o codigo, como eu coloco esse botão no codigo textarea.

    ResponderExcluir
  6. Henrique
    estou procurando, mas por enquanto não achei como fazer funcionar no blog.

    ResponderExcluir
  7. VALEW vou ficar esperando, qualquer coisa se achar deixa um comentario no seu proprio post que eu recebo no meu e-mail.FALOW

    ResponderExcluir
  8. Fabiano
    Se vc quiser eu tenho em meu blog este cdg para que o usuario copie a postagem.

    Abração

    Jack

    ResponderExcluir
  9. Jack
    Já publiquei o código para mostrar a caixinha com link da postagem
    http://www.dicasparablogs.com.br/2009/06/caixinha-com-o-link-da-postagem.html

    e também com a postagem completa
    http://www.dicasparablogs.com.br/2008/10/copiar-postagem.html

    ResponderExcluir
  10. Olá!!
    Estou começando o meu blog agora e ainda sou leiga nesse assunto.
    Quando encontro um espaço como esse, tento aprender o máximo que posso. Ja tenho no meu blog a caixinha de link me, mas eu queria saber como é feito a caixinha linke me com slid.Com muito custo consegui fazer um slid com o album Picasa, mas não consigo coloca lo na caixinha.
    Me perdoe se não estou usando as palavras corretas, pq como ja disse sou totalmente leiga no assunto.Se puder me ajudar a fazer ficarei muito feliz.

    Ana

    ResponderExcluir
  11. overflow:hidden
    oculta a barra de rolagem, e como faz ela pra ela aparecer?
    um abç.

    ResponderExcluir
  12. L. Tadeu
    troque hidden por auto, isso faz aparecer quando necessário

    ResponderExcluir
  13. eu adorei eu estava procurando por isso, mas tem gente que coloca imagens no fundo, poderia me ajudar com isso?

    ResponderExcluir
  14. veja aqui sobre imagens de fundo
    http://www.dicasparablogs.com.br/search/label/Imagem%20de%20Fundo

    ResponderExcluir
  15. eu botei no meu blog, mas como faço para impedir que o leitor aumente o tamanho da caixinha (arrastando as linhas no canto inferior direito) e de editar o texto?

    ResponderExcluir
  16. Rodrigo G. Neves
    acho que não tem como impedir que o leitor altere o tamanho da caixa...

    mas não se preocupe com isso, afinal somente ele (leitor) verá isso, o importante é aparecer num tamanho bom para quem visita o site

    ResponderExcluir
  17. gostaria de fazer um banner para meu blog, mas ainda tenho dificuldades.

    ResponderExcluir
  18. PORTAL DO POLICIAL
    mas qual a dificuldade? fazer a imagem? se for veja nestes links abaixo lá tem diversas dicas de programas e sites para fazer um banner.

    Site para Fazer Imagens Online e Criar Banners com Efeitos
    .

    ResponderExcluir