BLOG GERENCIADO

Mostrando postagens com marcador dinâmica. Mostrar todas as postagens

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!

Assinar: Postagens ( Atom )

Como criar uma Caixa de Rede Social dinâmica

Caixa de Rede Social dinâmica

Instalação do Gadget

Conheça nossos serviços

Cadastre seu email e receba novidades

Pesquise no Google

Quem está no blog agora

Visitantes do blog

Andrew Silva