sábado, 25 de junho de 2011

Gadget botões de redes sociais fixo na tela

image Outro gadget desenvolvido por min! :) Este trata-se de um menu vertical de redes sociais que fica do lado do seu blog. Criei este gadget porque visitei muitos blogs que tinha esse menu, e com eu adoro desafios resolvi desafiar minha inteligência pra desenvolvir uma barra desse tipo, embora não seja lá tãaao difícil fazer um.
Você pode ver uma demostração clicando aqui.
Para criar esse menu eu usei:
  • HTML
  • CSS
  • CÓDIGOS DOS BOTÕES.
Juntei tudo e deu no que de.
Para colocar em seu blog, apenas acesse o ‘Editar HTML’ do mesmo e procure pela seguinte linha:
<div id='content-wrapper'>
Abaixo dessa linha cole o código abaixo:
<div style='width: 71px; position: fixed; text-align: center; margin-left: -87px; padding: 12px; background: url(http://codigosblogger.webs.com/Gadgets/Menu%20fixo%20de%20redes%20sociais/fundo.png); height: 226px;'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<div style='padding-left:10px'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='true' show_faces='true' width='100'/></div>
<p/>
<!-- Inclua esta tag na seção head ou logo antes da tag de fechamento da seção body -->
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
  {lang: &#39;pt-BR&#39;}
</script>
<!-- Inclua esta tag onde desejar que o botão +1 seja exibido -->
<g:plusone size='tall'/>
</div>
Depois veja como visualize e salve!

Marcadores: , , , , , ,

22 Comentários:

Às 25 de junho de 2011 11:21 , Blogger Dav7 disse...

na página de demo não da para tirar as minhas dúvidas, que são as seguintes:

- essa barra aparece apenas quando abrimos a página de cada post ou aparece na home?

- se o leitor for fazendo scroll a barra acompanha a página ou está fixa ao pé do título?

Espero pelas respostas já que estava interessado em colocar uma barra dessas nos meus blogs :)

 
Às 25 de junho de 2011 11:38 , Blogger Códigos Blogger disse...

A barra aparece na home, nas postagens, em qualquer lugar do blog.

A barra é fixa, sendo assim, quando a rolamos a página, ela permanece em seu local sem desaparecer ao rolar a página.

 
Às 25 de junho de 2011 13:08 , Blogger Dav7 disse...

já percebi como funciona, e está engraçado!

se estiver na home page ele envia para as redes sociais o link do blog, se estiver na página de um post, ele envia para a rede o link só do post :)

 
Às 30 de junho de 2011 11:04 , Blogger Wlisses Freitas® disse...

Mais uma ótima dica, mas eu tenho uma dúvida: Nos botões, por exemplo o tweete, vai compartilhar a pagina que estiver aberta junto a url ou somente a das postagens?

Aguardo resposta.

Abraço e sucesso.

 
Às 30 de junho de 2011 11:25 , Blogger Códigos Blogger disse...

@Wlisses Freitas® Olá, respondendo a sua pergunta, ele vai compartilhar a url da página atual. Por exemplo, se você estiver na home, ele vai compartilhar a url principal. Se estiver em uma postagem, ele vai compartilhar a url da postagem assim como os demais botões.

 
Às 12 de julho de 2011 17:26 , Blogger Gospel Parkour disse...

Apenas uma dica, quando é colocado esse widget ele bloquea os links que estão a 400px de distância devido ao botão do Facebook utilizar no plano de fundo essa distância, pelo menos aconteceu isso nos meus 2 blogs, e a solução foi diminuir para 100px a distância na linha de código do botão "like", é só alterar o widht para 100px que dará certo.

Espero ajudar alguém. Obrigado e se puderem acessem www.gospelparkour.com

 
Às 12 de julho de 2011 22:47 , Blogger Códigos Blogger disse...

@Gospel Parkour Opa! Obrigado por colaborar, já fizemos a alteração.

 
Às 30 de julho de 2011 11:02 , Blogger Apocalink disse...

Muito obrigado mano, é uma trmenda dificuldade achar essa dica.

 
Às 3 de agosto de 2011 03:55 , Blogger GORDO disse...

Muito boa dica!

 
Às 5 de agosto de 2011 11:22 , Blogger keyzen costa disse...

http://portalmarajo.blogspot.com/

 
Às 11 de agosto de 2011 14:38 , Blogger Renan Castro disse...

Muito bom, esse é o melhor gadget para vc que quer ganhar mais visitas no seu blog. Procurei por vários, e alguns travam algumas funções de sua página, mas este não. Recomendo a todos. Parabéns pelo post.

Meu blog é o Leitura Games, oferece um arsenal geek de informações sobre eventos, campeonatos, cinema, games, tecnologia e muito mais! Visite.

 
Às 16 de agosto de 2011 16:51 , Blogger Norman Lima disse...

alguém ai expert, poderia verificar se o gadget está funcionando perfeitamente no meu blog.
http://sinkillerwebzine.blogspot.com/

 
Às 8 de setembro de 2011 09:18 , Blogger Códigos Blogger disse...

*Só aparece nas páginas de postagens
*É Fixo, movimenta-se quando a página é rolada.

 
Às 4 de dezembro de 2011 12:18 , Blogger ADM-nx2 disse...

amigo no html do meu template nao tem essa linha ----> div id='content-wrapper'

oqe faço.??

 
Às 5 de dezembro de 2011 14:05 , Blogger Códigos Blogger disse...

Teste procurar somente por: content-wrapper
Se encontrar algo, compare com o que tinha que ser procurado. Se for parecido, continue o tutorial.

Ou também tente procurar por:
div id="content-wrapper"

 
Às 6 de dezembro de 2011 18:34 , Blogger Lucas Lima disse...

Aonde tem esse gadget com share junto. Com aquelas outras opções embutidas?

 
Às 7 de dezembro de 2011 09:19 , Blogger Códigos Blogger disse...

Lucas, ve se isso serve:

(copie e cole na barra de endereço + enter)

http://www.cblogger.net/2011/09/torre-fixa-de-botoes-de.html

 
Às 9 de dezembro de 2011 18:32 , Blogger Lu Rodrigues disse...

Este comentário foi removido pelo autor.

 
Às 9 de dezembro de 2011 18:33 , Blogger Lu Rodrigues disse...

Puxa... no meu blog não aparece o face, dá pra consertar?!

Desde já obrigada e parabéns pelo excelente site!!

http://lu.blogue.me/

 
Às 21 de dezembro de 2011 17:52 , Blogger Jayr disse...

Ei mas da uma dica ai, fica onde?
No meio no começo no fim ????

 
Às 22 de dezembro de 2011 08:46 , Blogger Códigos Blogger disse...

Jayr, geralmente fica no meio.

 
Às 12 de janeiro de 2012 11:06 , Blogger Izaque disse...

Olá é bem legal sim mas tem algum código igual ao do seu site ? os botões acompanham a pagina sim mas eu queria com um efeito agradeço desde já

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial