Como criar uma Caixa de Rede Social dinâmica

Unknown 19:11 blog , dinâmica , Gadgets , rede social 14 comentários

Caixa de Rede Social dinâmica

Neste artigo, vamos trazer um Gadget de Redes Sociais, para que você possa inserí-las em seu blog.

O que você acha de inserir um elegante e moderno gadget de redes sociais en seu blog ?

Hoje em dia, ter seu conteúdo ligado às Redes é fundamental para fazer o blog crescer. Existem várias Redes Sociais, mas as que ainda tomam conta do mercado na web são o Google Plus, o Facebook e o Twitter.

É necessário que se ofereça ao leitor a possibilidade de compartilhar o conteúdo do seu blog nas Redes, assim como é necessário para o blogueiro inserir seu conteúdo em Redes Sociais, para que seus artigos sejam socialmente amigáveis.

Pensando nisso, nós do BG, trouxemos um Gadget para inserir em seu blog compatível com qualquer templete do Blogger. Além de dinâmico, também é moderno, e acompanha as tendências da web.

Instalação do Gadget

Para inserir este Gadget de Rede Social dinâmico, siga os seguintes passos:

Acesse o menu do seu blog, em seguida selecione modelo e editar HTML. Dentro do código fonte do seu blog, aperte CTRL+F e busque pela tag ]]></b:skin> Ao localizá-la, insira o código abaixo:

<---/* widget social windows 8 By bloggerenciado.blogspot.com. */--->  .seconds{  text-align:right;  color:#000;  font-size:10px;  }  .supportive a:active{position:relative;top:1px}  .widget-item-control a{display:none;}      .widget-item-control a{display:none;}      #supportive{width: 300px;      float: left;margin-top: -10px;}      #supportive li{list-style-type:none; position:relative; cursor:pointer; padding: 0 !important;}     #supportive .facebook, .googleplus, .rss, .twitter{      position: relative;      -moz-transition: all 0.4s ease-in-out;      -webkit-transition: all 0.4s ease-in-out;      -o-transition: all 0.4s ease-in-out;      transition: all 0.4s ease-in-out;      z-index: 5;      display: block;      float: left;      margin: 1px;}      #supportive .icon{}      #supportive .facebook{margin-top: 2px; width: 148px;      height: 150px;      background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDs-x_2-U7Yu5JoMzE9wVK-huRjw-6E3bEIA9zbeUKebdUg51_Y-b7VynLkf7IQa_Q7GITUyubijloKFQmnToKQ5p56R6Zce3c-IUQDAzYaYUqBAQaUAcC-1cdc43n3oUZ17Ra10tX6zQ/h120/facebook.png") no-repeat center center;}     #supportive .twitter{width: 148px;      height: 74px;      background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA_fuKAs9A_TeWbiznckuzrtC0zn3OmV_CpEOTUG4uj7BTm3WISNuqDelpkuouUrQqcs4_2X7MjoZqvKaLRii_nbaPAD2mOBXPx9uIbXlY8Fnea0kOEt88QXDROmf-aftR1BaqfFxwpRKP/s1600/Twitter.png") no-repeat center center;}     #supportive .googleplus{width: 148px;      height: 74px;      background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6nl8v5LtFRSoLxz6KWFrQh7kth-nxKwm4mj0H4Wipvdy3mfWLPp0ybEIRqri3UwUXCb-UX7qGSjmfWSrjkCrk3nHXgg5rSf1Fw1dgL8FBhYkZF0hid38we3BHuqXofPowHlR8hIShYRhK/s1600/google+plus.png") no-repeat center center;}     #supportive .rss{ width: 299px;      height: 74px;      background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh48J0KmdqZwCPL7XDv6obkhXnKU5LMNkn1OMXok1su60WpL8h8cNv-6rQvfxiwRjqt-tZ9raXJJ7mOhniaSWfLCl9qRxb0RgwScAxj1TIo5vOtSbEn35gW_0kJthRrXsEWq-fi7i6DvNcM/s1600/rss.png") no-repeat center center;}     #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out; -webkit-transform: rotate(-10deg);       -moz-transform: rotate(-10deg);         -o-transform: rotate(-10deg);        -ms-transform: rotate(-10deg);            transform: rotate(-10deg);      -webkit-transition: all 0.1s ease-in-out;}      #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6dMFbbqUAFfgNo8PoRWoq-o5KIDuWZEXjiGpNnvif5FYl0Rfy44kXthRTIjSTJ8j4tV6MBroLfNNE3zuNfoYHehuS5pRjBUSJQJ8Q0j486dIBUFZ3fRdCLXYOcrT3x3EdH04Zawi6n-g/h120/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;     -webkit-transition: all 0.1s ease-in-out;}      #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHLu6F-Pc4eL1428eQOXUMG5KMhoaqrECqMAgobYRnu99xWKEQTR-Jx1hrgrggtjIcrYhjTZXgiDHsyypQjDpLA0gAOVpj4fIugZlkigk97vDelS_Wykqz5hAmnl4fujm7RW2nOCcoHhE/h120/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;     -webkit-transition: all 0.1s ease-in-out;}      #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2iKRlhDtJosjfNDpMgHxzb4laJCEz6tHpCt7ZYlvuYVQ54dysYl74WeX97DA-9zkVuNfb11fOivWeXuaNOKhOdgjKe-6aU13leq3f6PAjdAiJ_IowZnS_tgEEndOWPfjhe-J1xjygE0I/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;     -webkit-transition: all 0.1s ease-in-out;}  <---/* widget social windows 8 By www.personalizaroblogger.com.br */--->

Após ter inserido o css do Gadget de Rede Social dinâmico no código fonte do seu blog, salve. Agora, vamos ao segundo passo:

No menu do seu blog, clique na aba layout. Escolha uma área para inserir seu Gadget:

Selecionando o local do Gadget de rede social dinâmico

Selecione a opção HTML/Javascript:

Configurando o Gadget de rede social dinâmico

Na área que irá se abrir, insira o código da caixa de auto seleção abaixo:

Faça as devidas alterações nas URL's das Redes Sociais para as suas, salve e clique em visualizar modelo.

Agora você tem um elegante e moderno Gadget de Rede Social dinâmico!

14 comentários :

JLSILVA09/07/2013, 11:58
Parabéns!
Seu blog é ótimo!
Sou iniciante e seu blog tem me ajudado muito.
ResponderExcluir
Respostas
Unknown16/08/2013, 16:37
cara o meu bugou me ajuda ae fourfire01
ResponderExcluir
Respostas
Unknown17/08/2013, 16:52
bugou de que forma amigo? explica o aconteceu com seu Gadget para que eu possa te ajudar amigo!!
ResponderExcluir
Respostas
Unknown01/09/2013, 01:19
Oi amigo, gostaria deu uma ajudinha.
No meu não editar HTML não aparece ]]> e nem < body > que estava precisando para configurar outra coisa. Poderia por gentileza me dizer porque e como faço pra resolver isso? Desde já obrigado e parabéns!
ResponderExcluir
Respostas
Unknown01/09/2013, 03:52
amigo qual a plataforma que você usa em seu blog se for blogger use ctrl+f e coloque ]]> e de um enter que irá aparecer caso não consiga achar procure manualmente pelo código de estilo css da seguinte maneira essa tag está em verde ]]> e logo acima dela esta em azul uma sequencia de comandos é depois dessa sequencia de comandos e acima desta tag ]]> que você deve colocar o código css do Gadget acima qualquer duvida me comunique que eu irei ajudá-lo abraço e obrigado pela visita.
ResponderExcluir
Respostas
Unknown14/09/2013, 19:15
Olá tudo bem?
Bom queria muito adicionar as minhas redes sociais, mais não consegui.
eu uso o Blogger, e já segui as instruções que você deu, mais nao aparece nada..
mais desde já, obrigado !
ResponderExcluir
Respostas
Unknown17/09/2013, 13:37
qual está sendo sua dificuldade ?
ResponderExcluir
Respostas
Unknown10/10/2013, 21:28
colocou o código da primeira caixa acima descrita no tutorial ela é o estilo css que faz dar a funcionalidade basta colocar os códigos contidos dentro da primeira caixa antes da tag ]]> e pronto o código da segunda caixa é o html basicamente a estrutura (corpo) deve ser colocada em um gadget mas tambem pode ser colocada em uma postagens pagina estática ou dentro do próprio código fonte do template. abraço amigo
ResponderExcluir
Respostas
Literárias21/10/2013, 18:17
Não estou conseguindo achar nada que comece com isto ]]>
Sabe me dizer mais ou menos onde fica?
Grata desde já!
Abraços
ResponderExcluir
Respostas
Anônimo07/03/2014, 23:08
olá amigo,fiz tudo do jeito que está ai na sua postagem,mas,só a fan page do facebook não funcionou,vc pode me ajudar.Espero sua resposta.
obrigado
ResponderExcluir
Respostas
Unknown28/04/2014, 18:31
O meu não achou no editor essa tag que vc pede pra digitar =/
ResponderExcluir
Respostas
Unknown28/04/2014, 20:20
Olá Gleyse, a tag ao qual você se refere é esta ] ] > < /b:skin > citada no tutorial acima ?
se for siga os passos novamente caso não seja especifique a sua dúvida.

Abraços Andrew Silva do BG.
ResponderExcluir
Respostas
Tudo sobre seu Filme23/03/2015, 21:50
Ola andrew....finalmente descobri o que esta acontecendo no meu blog. Tenta me ajudar. Qualquer postagem, ao compartilhar no facebook, pede confirmação. Quando recompartilho a partir do face agora, dá erro. Tentei de tudo, desde botões diferentes, feedburner, encurtar o link. Mas enfim descobri uma coisa: fiz um blog para testes, e nele postei os mesmos botões, e para minha surpresa, funcionou. Como eu faço? O problema está , provavelmente com algum script...
ResponderExcluir
Respostas

Adicionar comentário

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.

Assinar: Postar comentários ( Atom )

Como criar uma Caixa de Rede Social dinâmica

Caixa de Rede Social dinâmica

Instalação do Gadget

14 comentários :

Conheça nossos serviços

Cadastre seu email e receba novidades

Pesquise no Google

Quem está no blog agora

Visitantes do blog

Andrew Silva