Reino Kawaii

O gadget virá com essas três abas; basta passar o mouse sobre elas para ver seus conteúdos.

 #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: