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 {Terminamos o 1º Passo!
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;
}
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>
Pronto, espero que tenham gostado, até a próxima!
11 Comentários
Eu gostei deste gadget com as redes sociais. O efeito é simples mas elegante. Parabéns.
18 de junho de 2012 às 05:29Olá 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:29Muito bom esse gadget, parabéns, ele foi bem feito!
18 de junho de 2012 às 05:53Olá Pablo! Que bom que gostou do Gadget, obrigado pelo elogio e volte sempre, Até mais! Abraços!
18 de junho de 2012 às 05:53Muito bom o gadget. gostei muito do efeito dele.
25 de junho de 2012 às 19:17Olá Herlan! Que bom que gostou do Gadget amigo! Obrigado também pela a participação! Até mais!
26 de junho de 2012 às 14:18Abraços e Fica com Deus!
Tem como adicionar o Google+ ?
23 de julho de 2012 às 22:21Sim Vanda, mas você teria que encontrar uma imagem .png para adicionar o código HTML e CSS!
24 de julho de 2012 às 07:50Abraços, qualquer outra coisa conta-te me por E-mail :D
Obrigada =)) Valeu!!
3 de agosto de 2012 às 13:39Olá Caio, gostei desse gadget, muito organizado e útil!,
16 de março de 2014 às 16:30Abraços!.
Olá Bruno, fico muito agradecido e contente em saber que o gadget foi útil para você, obrigado pela preferência :P.
17 de março de 2014 às 00:39Abraços.
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!