In Tutoriais

Slide Colorido: Gadget 3 em 1

Olá! Bom, inaugurando minha volta, hoje vou mostrar como usar aquele gadget 3 em 1 que usei aqui no blog no layout anterior, para colocar Facebook, Google+, Tweets. Os créditos vão ao Ciudad Blogger.
É super útil, bem bonitinho e prático, porque reduz a quantidade de gadgets (ou widgets) na sidebar, aceita HTML e você pode personalizá-lo como quiser. Parece complicado, mas não é, só ter cuidado na hora de adicionar os códigos. Vamos lá!
Preview:
O gadget virá com essas três abas; basta passar o mouse sobre elas para ver seus conteúdos.
1. Acesse seu modelo - Editar HTML - e cole isso antes de </b:skin>:

 #aba1 {
position:fixed;
top:100px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#aba2 {
position:fixed;
top:240px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1003;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#aba3 {
position:fixed;
top:380px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#aba1:hover, #aba2:hover, #aba3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
} 

2.Visualize para ver se tudo está normal e salve; ainda não haverá alterações no seu layout. Agora, vá em Layout e adicione um novo gadget HTML/JavaScript contendo os seguintes códigos:
-Esse primeiro é para a primeira aba.
 <div id='aba1'>
<img src='URL-DA-IMAGEM-PARA-ABA-1' style='float:left;'/>
<div style='background: #COR-DE-FUNDO-DA-ABA-1; height:0px; margin-left:38px;padding: 5px;border-radius: 0px 0px 0px 10px;'>
CÓDIGO DA LIKEBOX DO FACEBOOK OU ALGUM CÓDIGO HTML
</div></div> 

Note que você precisa inserir a URL de uma imagem, que será a aba mostrada; no final do post deixei algumas para vocês, como modelo, pode usar ok? Em background, defina uma cor em HTML para plano de fundo do gadget, seria ideal que fosse da mesma cor da imagem da aba (use o conta gotas (Seletor de Cores) do Photoshop, do Pixlr, ou de algum editor de sua preferência, para capturar a cor e ver em HTML). Height se refere a altura do gadget, que você deverá definir. Em código da likebox ou código html, você irá adicionar o HTML que quiser ou o código da caixa de sua fan page. Para adicionar a like box, acesse: Like Box. Esse tutorial poderá ajudar caso não saiba como pegar o seu código.

3.Para a segunda aba, você pode simplesmente adicionar um HTML:
 <div id='aba2'>
<img src='URL-DA-IMAGEM-PARA-ABA-2' style='float:left;'/>
<div style='background: #COR-DE-FUNDO-ABA-2; height:0px; margin-left:38px;padding: 5px;border-radius: 0px 0px 0px 10px;'>
ADICIONE O QUE QUISER AQUI
</div>
</div> 

Ou o código que mostra seus leitores no Google+:
 <div id='aba2'>
<img src='URL-DA-IMAGEM-PARA-ABA-2' style='float:left;'/>
<div style='background: #COR-DE-FUNDO-ABA-2; height:0px; margin-left:38px;padding: 5px;border-radius: 0px 0px 0px 10px;'>
<div class="g-plus" data-action="followers" data-height="180" data-href="https://plus.google.com/NUMERO DO SEU GOOGLE PLUS" data-source="blogger:blog:followers" data-width="240">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'pt'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div> 

As personalizações são mais ou menos as mesmas da aba 1; só que se for adicionar o Google+, você deve pegar os números que aparecem na URL do seu Google Plus e substituir no local indicado no código acima.

4.Finalmente a aba 3:
 <div id='aba3'>
<img src='URL-DA-IMAGEM-PARA-ABA-3' style='float:left;'/>
<div style='background: #COR-DE-FUNDO-ABA-3; height:0px; margin-left:38px;padding: 5px;border-radius: 0px 0px 0px 10px;'>
CÓDIGO DA TIMELINE DO SEU TWITTER OU OUTRO HTML QUE PREFERIR
</div>
</div> 

Se for usar para mostrar seus tweets, pegue o código no seu Twitter em Widgets. Também as personalizações são mais ou menos as mesmas da aba 1.
E por falar em abas, aqui estão os 15 modelos:
         
        
      
Espero que gostem. Bjus...

Related Articles

2 comentários:

  1. Que bom que voltou.
    Esse tutorial ajuda bastante,eu não sabia fazer isso.

    Sarang Cute

    ResponderExcluir
  2. Estava procurando por esse tutorial faz um tempão, muito obrigada!
    diveinthis.blogspot.com

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart