Formulário de contato

Nome

E-mail *

Mensagem *

22 de mai de 2016

Selo link-me com botão e caixinha customizáveis para Blogger

Para glória do Senhor Jesus!

Vou ensinar hoje como ter o selo link-me com botão e caixinha. Você ainda poderá customizar, nas cores da sua preferência, tanto o botão como a caixinha.

Entre na página Layout do seu blog (no Blogger), e cole em um novo gadget HTML/JavaScript o código seguinte:

<div style="text-align:center;"><img src="ENDEREÇO URL DA IMAGEM DO SELINHO DO SEU BLOG" /></div>
<div style="text-align:center;">
<form method="POST" action="https://www.blogger.com/add-widget">
<input name="widget.title" value="Eu leio:" type="hidden" />
<textarea name="widget.content" style="display:none;">&lt;div style="text-align:center;"&gt;&lt;a href="ENDEREÇO URL DO SEU BLOG"&gt;&lt;img src="ENDEREÇO URL DA IMAGEM DO SELINHO DO SEU BLOG"/&gt;&lt;/a&gt;&lt;/div&gt;
</textarea>
<input name="go" value="ADICIONE-ME" type="submit" style="background: #eeeeee; border-radius: 2px; border: 1px solid #cccccc; color: #777777; cursor: pointer; font-size: 11px; line-height: 1.2em; padding: 5px;margin:5px 0 8px 0; text-decoration: none; text-transform: uppercase;" /></form></div>
<div style="text-align:center"><textarea style="width:180px;background:#f7f7f7;border: 4px double #ccccc;border-radius:2px;">&lt;div style="text-align:center;"&gt;&lt;a href="ENDEREÇO URL DO SEU BLOG"&gt;&lt;img src="ENDEREÇO URL DA IMAGEM DO SELINHO DO SEU BLOG"/&gt;&lt;/a&gt;&lt;/div&gt;
</textarea></div>


Marcado com vermelho, verde e laranja estão as cores em hexadecimais usados para o fundo, borda e texto do botão respectivamente. Marcado com amarelo e azul, estão as cores em hexadecimais do fundo e borda da caixinha respectivamente. Você pode mudar usando outras cores hexadecimais.

Antes de salvar, faça as respectivas substituições com endereço URL da imagem e do blog. Cuidado para não apagar nenhuma aspa sequer além do texto devido na hora da substituição, para perfeito funcionamento do código.

Ficará conforme o exemplo abaixo:

(Aproveite e leve meu selo para seu blog. Será uma honra, e você estará me ajudando a divulgar meu trabalho!)

O que é um endereço URL, Meri Pellens? Fácil. Por exemplo, o endereço URL deste blog é: http://atijesus.blogspot.com.br/. Obviamente, no lugar do texto ENDEREÇO URL DO SEU BLOG, você deve colocar o endereço do seu blog com o http:// na frente. Para obter o endereço URL da imagem do selinho, é só ir onde você hospedou a imagem, clique nela com botão direito do mouse e selecione Copiar endereço da imagem, ou algo semelhante, depende do navegador.

É isso.
Beioka!
Gratidão
Author Image

Meri Pellens
Cristã, mãe e blogueira com necessidades físicas especiais. Aprendiz e amante viciada de xadrez, busco viver cada dia como único, valorizando todos os momentos com olhos fitos no Senhor. Amo trabalhar com blogs e artes digitais.

10 comentários:

  1. Bem interessante, mas o meu blog é wordpress. Que peninha. bjs

    ResponderExcluir
  2. (h)Uma bela partilha com as devidas explicações.
    Uma boa semana de paz e alegrias amiga.
    Bjs

    ResponderExcluir
  3. Oi Meri,
    Adorei a aula, mas sou muito medrosa para mexer na interface do blog sozinha.
    Bjs
    gosto-disto

    ResponderExcluir
  4. Meri, eu adorei a aula querida!
    E vou aplicar no meu blog agora pois há um tempo que estou doida para renovar a minha caixinha com o banner!
    Uhuuuu, aqui a gente só encontra ajuda de peso querida!
    Muito obrigada!!!
    Tenha uma semana liiinda!
    Beijinhos!!!

    ResponderExcluir
    Respostas
    1. Fui lá ver, Adriana. Ficou ótimo! (h) (h) (h)
      Bjk!

      Excluir
    2. Querida Meri, quando vi seu artigo enlouqueci...rsrs
      No intervalo do trabalho, rapidamente consegui fazer o banner,seguindo as suas instruções! :))))
      Você viu como ficou lindinho lá no blog? rsrs
      Agora vim aqui buscar o seu selo para incluir no meu banner rotativo de blogs amigos que fica no rodapé.
      Eu já tinha o seu blog como indicação de leitura, colocado do lado direito dos artigos! Mas agora reforcei com o seu lindo banner também!
      Ficou lindo!!!
      Beijos e mais uma vez obrigada querida!!!

      Excluir
    3. Meri, voltei...rsrs
      Vim buscar o código do seu blog no rodapé! :))
      Eu peguei o que você colocou de exemplo acima e saiu a florzinha rosa!
      Mas agora estou levando o novinho em folha! ;)
      Beijos e um feriado maravilhoso querida!
      Mais uma vez, obrigada! :))))))

      Excluir
    4. Menina, vc salvou meu selo. Eu tinha esquecido de mudar o link da imagem no código do post. :o
      Valeu, amiga! (y) (f)
      Bjk... :*

      Excluir
  5. Merita! vc sabe q vc eh minha guru de blogger. adoro suas dicas!
    Meri, vc nao usa o linkwithin? aquele q indica outros posts, com fotinha.
    tentei usar no blog anterior mas nao funcionou mais...
    era bom, pq fazia o povo ler outros posts, ne.
    se instalar algo parecido no seu, ensina a gente, se puder?
    bjao

    ResponderExcluir
    Respostas
    1. Oi, Alexandre!
      O meu "Posts relacionados" é outro, pois já veio instalado no template original. Mas sei como contornar o bug do linkwithin. Vou já começar o post.
      Bjk! (f)

      Excluir