Tutorial: Ícones do blog lado a lado
terça-feira, janeiro 31, 2012Atendendo a pedidos, hoje vou ensinar como colocar os ícones das redes sociais lado a lado, como no meu perfil. Para ver o tutorial, clique em Leia Mais.
Vá em Design > Elementos da Página > Adicionar um Gadget > HTML/JavaScript
Copie e cole o código a seguir:
‹p style='float: left; margin-right: 10px;'›‹a href='LINKDASUAREDE' target='_blank'››img border='0' src='LINKDAIMAGEMDOICONE'/›‹/a›‹/p›
Entenda:
FLOAT: ele determina a posição do seu objeto no HTML. Você pode alterar left por right (esquerda por direita) ou ao contrário.
MARGIN-RIGHT: determina o espaçamento de um ícone e outro. Você pode alterar o 10px - quanto maior os pixels (px) maior o espaçamento. E pode alterar o right por left (direita por esquerda), ficando margin-left.
LINKDASUAREDE: altere 'LINKDASUAREDE'. Não remova o apóstrofe! É só colocar o link da página que você quer que abra. Ex: twitter, facebook, etc.
LINKDAIMAGEMDOÍCONE: altere sem remover o apóstrofe, o procedimento é o mesmo do LINKDASUAREDE, porém você coloca a URL da imagem.
Importante: Para acrescentar mais ícones é só copiar o primeiro código para todos e colar um embaixo do outro, alterando o link da rede e da imagem do ícone.
Vou deixar aqui alguns ícones para vocês usarem, para baixar é só clicar na imagem:
Espero que o tutorial tenha ajudado, qualquer dúvida deixe nos comentários e até o próximo post!
FLOAT: ele determina a posição do seu objeto no HTML. Você pode alterar left por right (esquerda por direita) ou ao contrário.
MARGIN-RIGHT: determina o espaçamento de um ícone e outro. Você pode alterar o 10px - quanto maior os pixels (px) maior o espaçamento. E pode alterar o right por left (direita por esquerda), ficando margin-left.
LINKDASUAREDE: altere 'LINKDASUAREDE'. Não remova o apóstrofe! É só colocar o link da página que você quer que abra. Ex: twitter, facebook, etc.
LINKDAIMAGEMDOÍCONE: altere sem remover o apóstrofe, o procedimento é o mesmo do LINKDASUAREDE, porém você coloca a URL da imagem.
Importante: Para acrescentar mais ícones é só copiar o primeiro código para todos e colar um embaixo do outro, alterando o link da rede e da imagem do ícone.
Vou deixar aqui alguns ícones para vocês usarem, para baixar é só clicar na imagem:
36 comentários
boa heim, adorei a dica!
ResponderExcluirLindo seu blog viu, muito fofo, parabéns mesmo!
Estou seguindo vc, se vc Tiver um tempinho passa lá no meu eu ficarei muuuuito feliz em ter vc lá no meu cantinho!
xoxo
http://www.dforaparadentro.blogspot.com/
@Jana_DFPD
Achei digno o tutorial, é super útil porque todo blog precisa de um menu para manter-se organizado! Parabéns pela postagem Jaque!!
ResponderExcluirAntes de Sonhar
Gostei da dica, ah e obrigado por passar lá no blog! Seu blog é lindo! http://fashiomg.blogspot.com
ResponderExcluirAh, muito legal. Não é difícil, mas eu fiz direto pelo Gadgets texto, sabe? acho mais rápido...
ResponderExcluirAh, eu tô querendo bater minha meta de 350 seguidores e gostaria que você me seguisse, pode ser? estou seguindo aqui como Gislaine Alves
jeito-inedito.blogspot.com
Ei, Jaque... tenho uma duvida. :s Onde sei qual o link da imagem ? :q heouaehaeouhae Outra cooisa, o do weheartit do seu perfil foi você quem fez ? :s No mais, gostei do tutorial! (:
ResponderExcluir@TheBluberry Para pegar o link da imagem, você pode hospedá-la em algum site, recomendo o Tinypic ou o Photobucket. Ou caso a imagem já esteja hospedada, você pode clicar com o botão direito do mouse e selecionar Copiar URL/Link da imagem.
ResponderExcluirQue blog mais CUTE CUTE *-*
ResponderExcluirGostei mesmo!! Já estou seguindo, espero que possa retribuir :)
Ah! Tá rolando um sorteio de ADESIVOS DE PAREDE lindissimos!
Confira lá! Um beeeijo ♥
shoesandtears.blogspot.com
@Jaque Huuuum, entendi! Vou tentar... obrigada! :o
ResponderExcluirE Jaque, sem querer abusar... mas lembra que vc me falou como colocar coisas no menu do blog, que era só criar páginas e tals ? :b
Então, ele não ta mais ficando na barra horizontal, só na lateral. Sabe me dizer porque ? :s
Obrigada mesmo, Jaque! :c
Ah sempre que eu fazia isso, eu colava os ícones na área da postagem e na área Editar HTML eu copiava o HTML. Bjs.
ResponderExcluirai que bom que te ajudou fico muito feliz!
ResponderExcluirxoxo
http://www.dforaparadentro.blogspot.com/
Adorei o tutorial Jaque. Vai me ajudar bastante. *-*
ResponderExcluirBeijos, Nathy.
http://naahthaliaa.blogspot.com/
ótima dica, fica bem mais facil com as imagens ali.
ResponderExcluirbeijos :*
Batom e Salto Alto
Tenho vários salvos aqui no pc mas sempre dá preguiça ou falta tempo de colocá-los. Obrigada pelo tuto ;D
ResponderExcluir@TheBluberry Te deixei um recadinho lá no blog ;)
ResponderExcluirLegal o tutorial *-*
ResponderExcluirhttp://perfeitateen.blogspot.com/
Amei essas dicas vou ver se consigo colocar lá no Blog! Só não sou muita boa nisso :/ rs
ResponderExcluirÓtimo post Jaque, sucesso pro seu Blog e pra você flor, você merece :d
oi linda!! vc ensina ótimas dicas aqui heim!! adorei!! parabéns pelo blog! já virei seguidora e estou fuçando aqui! rsrsr me visite tb! será muito bem vinda! bjuus
ResponderExcluirwww.sualindaa.blogspot.com
Jaque parabéns pelo tutorial, ficou ótimo! ;}
ResponderExcluirBeijos!!
Ann;
Vinte & Poucos
Ah, fica bem mais organizado assim... O meu está só o link, sem as imagens, preguiça de arrumar... rs
ResponderExcluirBeijos
http://livrosebatons.blogspot.com/
Nossa , muito bom o tutorial .. util e mt mt bem explicado!
ResponderExcluirMal cheguei no seu blog e já tenho ceeerteza que ele é mt mt bom ! Por isso .. já estou te seguindo! rs
www.i-tudo-i-tudo.blogspot.com
ah ! e eu gostaria muito de ser seguida por voce , lá no blog *-*
Não canso de falar como sou apaixonada pelo seu blog <3
ResponderExcluirE moleskines são um amor mesmo né, lindinhos!
beijos jaque
http://slashedme.blogspot.com/
Acabei de conhecer o teu blog e já ganhei uma super dica de presente *.*
ResponderExcluirTeu blog é super show, adoreeeeei :)
O meu blog é este aqui: http://rafaribeiiro.blogspot.com/
Espero a tua vistinha por lá, beijão ;*
Olha, eu estou apaixonado no seu Blog, sério, paixão a 1ª vista, o melhor artigo, super simples, super bem editado, as cores das letras, o jeito de mostrar os códigos, tô fã, queria ajuda para adicionar isto no meu Blog (http://vaidadederme.blogspot.com.br/). mas uma vez afirmo que este espaço é incrível Jaque, já estou lhe seguindo no Twitter.
ResponderExcluirGostaria de mais uma ajuda: Como você consegue colar seu banner usando todo espaço das extremidades do Blog? Se você entrar no meu vai ver que o meu banner só consegue ir até onde vai as margens das postagens, se eu colocar uma imagem maior, ele vai cortar, por exemplo: Se eu definir que meus textos juntamente com minha barra lateral terá 1020 px, o banner assim também será, o seu não, o seu pegou d fora a fora, estou maravilhado! Você como fazer isso? Afinal usamos a mesma plataforma!
Abraços.
Edu Marques
:e jaque desculpe perguntar !
ResponderExcluirEu sou nova em html e eu não sei onde coloca o gadget de html !
Por favor,me ajude ?
www.limaoealecrim.blogspot.com
@Jamilly Costa o gadget de HTML fica aqui:
ResponderExcluirDesign > Elementos da Página > Adicionar um Gadget
Vai abrir uma nova janela cheia de opções. Você vai achar uma assim: HTML/JavaScript é só clicar e adicionar o código.
Jaque vc já me ajudou tanto, só uma perguntinha, quando uso esse código coloco o antes de começar a sequencia de ícones, porém eles não ficam centralizados pois o comando "FLOAT" anula a centralização, se eu retirar essa parte do código nada funciona, ou seja, eu gostaria de colocar um espaçamento maior entre meus ícones sem que eles ficassem para direita ou esquerda, e sim todos centralizados!
ResponderExcluir@Edu Marques Se não der para colocar o código entre '< center >' você vai ter que ficar arrumando o 'float' até ficar do jeito que você quer =/
ResponderExcluirOlá segui tudo e selecionei os ícones do twitter e do face para testar, apareceu la no meu blog , mas o do face ficou bem maior do q o do twitter o q sera q fiz de errado?
ResponderExcluirMuito lindo e interessante seu blog, já estou seguindo
bjos
Rúbia
Não consigo colocar o icone do facebook do mesmo tamanho que os outros porque?
ResponderExcluirAh sim , obrigada pela dica Jaque
ResponderExcluirbjos
Obg viu, já fazia tempinho que estava preocurando um tutorial disso. Me ajudou mto. ^^
ResponderExcluirhttp://improviisada.blogspot.com.br/
adorei o tutorial, super util, amei o blog, seguindo c:
ResponderExcluirbjs.
http://window-soul.blogspot.com.br/
AIiii muitoo obrigada!
ResponderExcluirDeu certinho!!!
http://lookando.blogspot.com
adorei!!
ResponderExcluirhttp://rosaemorena.blogspot.com.br/
Obrigada, meu bem! Foi bastante simples e útil!
ResponderExcluirOlá, Jaque! Muito obrigada pelo tutorial, super me ajudou lá no meu blog. ^-^
ResponderExcluirBjinhos
http://fromjulieta.blogspot.com/
Os comentários desse blog são moderados, portanto só serão publicados após aprovação. Comentários com propagandas, divulgações e comentários pedindo para seguir não serão aprovados. Deixe o link do seu blog caso queira que eu retribua algo. Obrigada.