COMO ADICIONAR MAIS DE UMA IMAGEM NO GADGET

30 de janeiro de 2015
(google)

https://lh6.googleusercontent.com/-Q8j3kkQOIpY/T3ZK-AFXoaI/AAAAAAAAOCw/l1rCI2xBQM0/s53/Emoticons%2520Japones%25C3%25AAs%2520-%2520Pequenos%2520%252813%2529.gif
Heeey, gentes bonitas! Tudo Ótimo?
------------------
Olha só, mas um tutorial aqui no blog, ai meu Deus ! Então gentes, cá estou eu, para mostrar a vocês mais um código bem simples. Vejo que alguns blogs ainda não tiveram oportunidade em deixar pelo exemplo as colunas do blog ou também suas editoras parceiras, para quem não conhece o que é gadget, vai aí uma demonstração:

Uma ao lado da outra, bonito não é mesmo?

Através do exemplo, já sabemos muito bem o que é essa ''barrinha'' que fica ao lado das postagens do blog. Agora iremos para o código! Um jeito fácil e simples.

 SIM'BORA MEU POVO!
1) Vá direto para LAYOUT > ADICIONAR GADGET > HTML/JAVASCRIPT
2) Após isso, você acrescenta o seguinte código:

<a href="LINK" style="-webkit-transition: color 0.7s ease-out; background-color: transparent; color: #84aab1; font-family: Euphemia; font-size: 13px; line-height: 22px; text-align: -webkit-center; text-decoration: none; transition: color 0.7s ease-out;" title="NOME"><img src="IMAGEM" style="border: none; position: relative;" /></a><span style="background-color: transparent; font-size: 13px; line-height: 22px; text-align: -webkit-center;">&nbsp;</span>

ATUALIZADO

<a href="LINK DA IMAGEM" title= "TÍTULO DA IMAGEM">< img src= "LINK DA IMAGEM"></a>
Os três primeiros são para completar seu layout: o primeiro é o link do site que você deseja, o segundo é o nome (se você tiver tooltip ele irá aparecer) para quem não sabe o que é, veja no Carolice este tutorial, em terceiro a URL de sua imagem desejada. E esse em tom vermelho é se você quiser uma cor para O SEU FUNDO, (exemplo O MEU É TRANSPARENTE, mas se quiser pode ser branco, azul ou vermelho) caso não saiba como é cores em HTML veja este site

3) Caso queira uma altura e largura ajustada acrescente após a url de sua imagem o seguinte código:

height= "0" width= "0"

Height = Altura | Width = Largura. Onde está em 0 é o número da sua largura e altura, bom eu costumo usar o height "70"e retiro o número 0 do width.

Pronto, agora você já pode usar todas as suas imagens bonitas em apenas um gadget lado a lado. Gostaram? Qualquer erro é só gritar ou avisar nos comentários! Espero ter ajudado vocês
Abraços e beijos! Fiquem com Deus!
  Nos Acompanhe nas Redes Sociais:

23 comentários:

  1. Oi Luan! Tudo bom?

    Ótima dica de layout! Ainda não tenho um gadget separando as categorias assim com imagens, mas pretendo fazê-lo quando tiver um número maior de posts no meu blog. Só uma dúvida, o código acima é usado para cada uma das imagens, não é?

    Parabéns pelo blog!
    Abraço!

    ResponderExcluir
  2. Bem legal a sua ideia de criar um tutorial que ajude na personalização de blogs! Com certeza vai ajudar muita gente, amei :D

    E parabéns pelo blog, seu layout é lindíssimo!
    Beijosss
    http://bookspoison.blogspot.com.br/

    ResponderExcluir
  3. Acho show esses tutoriais! Tenho muita dificuldade pra lidar com essas coisas, especialmente porque tudo tem código :o Parece uma caixinha de mistérios que eu ainda não consigo abrir sem ajuda. Muito bem explicado seu tutorial ^^

    ResponderExcluir
  4. Pudera o seu blog ser tão perf* Vou tentar aplicar esta técnica :D
    http://theliterarybusiness.blogspot.pt/

    ResponderExcluir
  5. Quero colocar as colunas do blog em imagem, mas ainda não fiz isso. Quero imagens originais.
    Ótimo tutorial! Para quem está iniciar até algo simples se torna complicado.

    Abraço!

    ResponderExcluir
  6. Oie, Luan!
    Como vago pelos confins da blogosfera desde 2008, aprendi muita coisa que não esqueci até hoje. Eu sei de algumas coisas que seria legal compartilhar com as pessoas, mas tenho preguiça de fazer tutoriais. Quem sabe mais pra frente?
    Agora só tem uma coisa que eu vi aqui e não sei: o efeito hover de quando clicamos nos ícones da coluna. Amei como ficou! Vou já tentar usar no blog hahaha (sempre creditando, claro!)
    Com carinho,
    Celly.

    http://melivrandoblog.blogspot.com/

    ResponderExcluir
  7. Oii, tudo bem?
    Muito bom esse tutorial, mas ainda mão separo as colunas do blog...
    Bjs

    http://a-libri.blogspot.com.br

    ResponderExcluir
  8. OLÁ LUAN!

    Meu amigo esse post foi uma resposta dos céus às minhas preces! Mas eu ainda não consegui me adaptar ao código HTML rsrs Deixarei salvo aqui em meu computador esse post e COM CERTEZA estarei na espera por muitos outros! MUITO OBRIGADO!

    Abraços literários!

    ResponderExcluir
  9. Olá Luanzinho do meu coração, você está bem? <3. kkkkkkkkkk.
    Adorei este código e esta dica. Mas pelo que eu me lembro eu que te dei este código seu safado kkkkkkkk u.u Mas eu perdoo rum.
    Acho muito bacana este código porque eu acho muito útil. E claro espero mais dicas e tutorias neste cangaço kkkkkkkkkkk.
    Enfim, beijos e muito sucesso queridinho <3.

    ResponderExcluir
    Respostas
    1. OI COISA DO MEU CORE ~SQN~ TO SIM E TU?
      Claroooooo que não eu tinha te pedido um para não deixar com BACKGROUND e também deixar a imagem com uma largura e altura bacana, mas a sua ficou muito grande <3 Ai graças a deus eu fui mexendo em uns troços aqui e foi! Ai que maravilha hUAHAUAAU.
      Beeeijos e sucesso para tu também kALJDFÇSDAJASD

      Excluir
  10. OIEE LUAN ♥
    GENTE, VOCÊ ME SALVOU! Faz uma vida que eu venho tentando fazer isso no blog, mas consegui que nada... Muito obrigada \0/
    MilkMilks
    http://shakedepalavras.blogspot.com.br

    ResponderExcluir
  11. Oi Luan!
    Muito legal a dica, sempre tem pessoas que tem dúvidas sobre isso.

    Beijos!
    Books and Movies
    www.booksandmovies.com.br/

    ResponderExcluir
  12. Adorei o post! Tenho certeza que ele ajudou muitas pessoas que não sabem mexer com HTML.
    Seu blog está lindo *-*

    beijos
    http://www.under-the-stair.com/

    ResponderExcluir
  13. Amei o post, era o que eu tava precisando rsrs vou testar no meu blog.

    ResponderExcluir
  14. Olha eu sinceramente tenho que confessar que gostei bastante do tutorial, mas eu já sabia fazer isso. Mas muitos ainda não sabem e acho uma boa vocês colocarem tutoriais para ensinar algumas pessoas que mesmo tendo blog a bastante tempo, ainda não sabe algumas coisas do HTML. É muito legal isso. Espero ainda poder ver muitas coisas por aqui para poder aprender. PARABÉNS pela coluna =]

    lovereadmybooks.blogspot.com.br

    ResponderExcluir
  15. Ooooi, Luan!
    Poxa, que bacana. Tutoriais assim são sempre úteis, tenho certeza que irá servir para várias pessoas :P

    Beijão

    ResponderExcluir
  16. Legal você disponibilizar esse tutorial, muita gente não sabe como fazer. Só achei ele um pouco complicado e grande demais, o que eu utilizo é bem menor e tem o mesmo efeito :)
    Abraços

    www.dezenoveprimaveras.com.br

    ResponderExcluir
    Respostas
    1. OIEXXXX CAROLINA.
      Pois é o que eu uso é esse e apesar de ser ''complicado'' é bem útil, não é mesmo? O ruim é que eu só estou aprendendo o básico de HTML e os que aprendo trago para vocês (:

      Excluir
  17. Olá, LUAN!
    Tudo bom ou tudo ótimo?
    Eu tive que me matar muito pra aprender ~coisas de html~, até porque não sou rica COMO MUITAS PESSOAS PENSAVAM e não estou disposta a pagar 8410365210 reais em um layout feito sob encomenda. Não sou a rainha desses códigos, quem dera, mas aprendi o básico do básico e consegui fazer um layout decente. Gostei do código, eu mesma uso um mais simples se não me embolava toda, HUAHUAHAU, mas adorei o tutorial! Qualquer dia eu te chamo pra perguntas umas coisinhas sobre html que tenho dúvia ~EU ME APROVEITANDO~!
    Beijos.
    Memórias de Leitura - memorias-de-leitura.blogspot.com

    ResponderExcluir
  18. Oi, Lu!
    Mais um tuto muito útil \õ/ Tô adorando ver essa variedade de assuntos aqui no seu cantinho...

    Te indiquei em uma tag no meu blog: http://www.procurei-em-sonhos.com/2015/02/tag-liebster-award.html
    Beijinhos :*

    ResponderExcluir
  19. Nossa que tutorial demais, bem legal mesmo, nossa achei demais, mas meu blog é mais legal. Tchau.

    ResponderExcluir

グラスホッパー (gafanhoto), se gostou da postagem e está passando para comentar aqui, desde já, muito obrigado, e lembre-se, boas inspirações! ❤