Gadget Redes Sociais para blogger

► +A +/- -A
Olá Amigos leitores! Hoje vamos dando inicio a mais um tutorial, neste tutorial vamos aprender a como adicionar ao eu blog um Gadget de redes sociais ao seu blog, dentre eles estão Feed, Twitter, e Facebook! Nele está introduzido uma transparência bem leve junto com uma transição, então vamos ao tutorial!


1º Passo - Instalando o CSS

1. Faça o o login no Blogger.
2. Em seguida, no menu suspenso clique em Modelo.
3. Depois Clique no Botão Editar HTML.
4. Pressione CTRL+F e procure por:

]]></b:skin>


5. E acima da tag citada acima, adicione o seguinte código:


.sidebar .sidctn .redes-lateral {
margin:0 0 15px 0;
overflow:hidden;
text-align:center;
}
.sidebar .sidctn .redes-lateral a {
background:url(https://lh6.googleusercontent.com/-9mPv4Bn37T0/T9vVx4KXKOI/AAAAAAAAAgU/4EOOBjCzVHk/s753/sprite.png) no-repeat;
display:block;
margin:0 10px;
width:58px;
height:55px;
display:inline-block;
 *display:inline;
zoom:1;
opacity:1;
-webkit-transition: all 0.3s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.3s ease;transition: all 0.4s ease;
}
.sidebar .sidctn .redes-lateral a:hover {
opacity:0.7;
}
.sidebar .sidctn .redes-lateral a.twitter-lateral {
background-position: -456px -108px;
}
.sidebar .sidctn .redes-lateral a.facebook-lateral {
background-position: -368px -108px;
}
.sidebar .sidctn .redes-lateral a.rss-lateral {
background-position: -542px -108px;
Terminamos o 1º Passo!

Ultimo passo - Utilizando as redes sociais ao blog

1. No menu do Blog, clique em Layout
2. Em seguida clique em Adicionar um Gadget
3. Escolha a opção HTML/JavaScript
4. Dê um título ao Gadget
5. E no campo do Gadget adicione o seguinte código HTML:

<div class="sidctn">
<div class="redes-lateral">
<a href="URL da sua página do Twitter" target="_blank" class="twitter-lateral no-text" title="Twitter"></a>
<a href="URL da sua página do Facebook" title="Facebook" target="_blank" class="facebook-lateral no-text"></a>
<a href="http://feeds.feedburner.com/SEUFEED" target="_blank" class="rss-lateral no-text" title="FEED Rss"></a>
</div></div>
O código destacado de Vermelho Será aonde você substituirá pela URL da sua página do Twitter, depois a o código destacado de azul você deverá substituir pela sua página do Facebook, em seguida mude e coloque o nome do Seu Feed no código destacado de laranja.

Pronto, espero que tenham gostado, até a próxima!
► Postagens Relacionadas:

11 Comentários

João Almeida disse...

Eu gostei deste gadget com as redes sociais. O efeito é simples mas elegante. Parabéns.

18 de junho de 2012 às 05:29
Caio Vinicius disse...

Olá João, que bom que gostou, ficamos grato! Pois é o efeito é bem simples, mas moderno e elegante! Obrigado pelo comentário, até mais!

18 de junho de 2012 às 05:29
Pablo disse...

Muito bom esse gadget, parabéns, ele foi bem feito!

18 de junho de 2012 às 05:53
Caio Vinicius disse...

Olá Pablo! Que bom que gostou do Gadget, obrigado pelo elogio e volte sempre, Até mais! Abraços!

18 de junho de 2012 às 05:53
Herlan Santos disse...

Muito bom o gadget. gostei muito do efeito dele.

25 de junho de 2012 às 19:17
Caio Vinicius disse...

Olá Herlan! Que bom que gostou do Gadget amigo! Obrigado também pela a participação! Até mais!
Abraços e Fica com Deus!

26 de junho de 2012 às 14:18
Vanda Ferreira disse...

Tem como adicionar o Google+ ?

23 de julho de 2012 às 22:21
Caio Vinicius disse...

Sim Vanda, mas você teria que encontrar uma imagem .png para adicionar o código HTML e CSS!
Abraços, qualquer outra coisa conta-te me por E-mail :D

24 de julho de 2012 às 07:50
Vanda Ferreira disse...

Obrigada =)) Valeu!!

3 de agosto de 2012 às 13:39
Bruno Bezerra disse...

Olá Caio, gostei desse gadget, muito organizado e útil!,
Abraços!.

16 de março de 2014 às 16:30
Caio Vinicius disse...

Olá Bruno, fico muito agradecido e contente em saber que o gadget foi útil para você, obrigado pela preferência :P.
Abraços.

17 de março de 2014 às 00:39

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!