COMO ADICIONAR MAIS DE UMA IMAGEM NO GADGET
(google)
------------------
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;"> </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 = 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 ♥
3) Caso queira uma altura e largura ajustada acrescente após a url de sua imagem o seguinte código:
height= "0" width= "0"
Obrigada pela ajuda :) muito útil
ResponderExcluirOi Luan! Tudo bom?
ResponderExcluirÓ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!
Bem legal a sua ideia de criar um tutorial que ajude na personalização de blogs! Com certeza vai ajudar muita gente, amei :D
ResponderExcluirE parabéns pelo blog, seu layout é lindíssimo!
Beijosss
http://bookspoison.blogspot.com.br/
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 ^^
ResponderExcluirPudera o seu blog ser tão perf* Vou tentar aplicar esta técnica :D
ResponderExcluirhttp://theliterarybusiness.blogspot.pt/
Quero colocar as colunas do blog em imagem, mas ainda não fiz isso. Quero imagens originais.
ResponderExcluirÓtimo tutorial! Para quem está iniciar até algo simples se torna complicado.
Abraço!
Oie, Luan!
ResponderExcluirComo 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/
Oii, tudo bem?
ResponderExcluirMuito bom esse tutorial, mas ainda mão separo as colunas do blog...
Bjs
http://a-libri.blogspot.com.br
OLÁ LUAN!
ResponderExcluirMeu 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!
Olá Luanzinho do meu coração, você está bem? <3. kkkkkkkkkk.
ResponderExcluirAdorei 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.
OI COISA DO MEU CORE ~SQN~ TO SIM E TU?
ExcluirClaroooooo 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
OIEE LUAN ♥
ResponderExcluirGENTE, 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
Oi Luan!
ResponderExcluirMuito legal a dica, sempre tem pessoas que tem dúvidas sobre isso.
Beijos!
Books and Movies
www.booksandmovies.com.br/
Adorei o post! Tenho certeza que ele ajudou muitas pessoas que não sabem mexer com HTML.
ResponderExcluirSeu blog está lindo *-*
beijos
http://www.under-the-stair.com/
Amei o post, era o que eu tava precisando rsrs vou testar no meu blog.
ResponderExcluirOlha 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 =]
ResponderExcluirlovereadmybooks.blogspot.com.br
Ooooi, Luan!
ResponderExcluirPoxa, que bacana. Tutoriais assim são sempre úteis, tenho certeza que irá servir para várias pessoas :P
Beijão
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 :)
ResponderExcluirAbraços
www.dezenoveprimaveras.com.br
OIEXXXX CAROLINA.
ExcluirPois é 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 (:
Olá, LUAN!
ResponderExcluirTudo 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
Oi, Lu!
ResponderExcluirMais 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 :*
Nossa que tutorial demais, bem legal mesmo, nossa achei demais, mas meu blog é mais legal. Tchau.
ResponderExcluirKinhé coisin do talis çrçrrçrç
Excluir