Follow Us @soratemplates

quarta-feira, 24 de outubro de 2012

Tabviews: vários gadgets em um!!!

Imagem encontrada em: Weheartit
Olá!!! Muito obrigada a todos vocês pelo carinho sempre! Ando super ocupada ultimamente e faz um tempo que não atualizo algumas redes sociais ou respondo as mensagens do e-mail aqui do blog, #sorry ;___;. Mas estou na ativa com frequencia aqui neh ^-^
Bem, hoje vou mostrar para vocês como usar Tabview, que permite uma grande economia de espaço em seu blog por possibilitar que vários gadgets fiquem juntinhos em um só. Eu vi isso em alguns blogs com templates em HTML do modelo clássico e sempre quis colocar aqui, até que encontrei no Vagabundia e no Ciudad Blogger (a quem vão os créditos) como fazer isso. Até já fiz, agrupando o We heart it e o app para Android do blog em um só.
Vou mostrar para vocês então como adicionar 2, 3 ou mais gadgets em HTML/JavaScript em um só ou 2, 3 ou mais gadgets de qualquer tipo em um só.

Tabview 1: Só para HTML
Se você deseja que gadgets em HTML/JavaScript fiquem juntos em um só, ou quer agrupar algum texto e html nas postagens, você pode colar esse código aqui aonde quiser que apareça:
<style>
#tabs {
  height: 100px; /* altura geral */
  margin:0 auto;
  position:relative;
  width: 180px; /* largura geral */
}
#tabs div {
  padding: 10px;
  -moz-border-radius: 20px;
}
#tabs h3 { /* titulos */
  color: #ff78b0;
background: #fee;
box-shadow:1px 2px 3px #fcc;
  cursor: pointer;
  display: block;
  font-size: 12px;
  font-weight: normal;
  font-family: 'Verdana';
  height: 20px;
  line-height: 20px;
  margin: 0;
  padding: 5px;
  text-align: justify;
  width: 50px;
  -moz-border-radius: 20px;
}
.tabcontent {  /* conteudo */
  display: block;
  height: 180px;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 40px;
  width: 100%;
}
#tabs:hover h3, #tabs:focus h3, #tabs:active h3 {
  z-index: 0;
}
#tabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent {
  opacity: 0;
  z-index: 0;
}
#tab1 .tabcontent { /* Personaliza a primeira tab */
  background-color: #fff;
box-shadow: 1px 2px 3px #fee;
border: 1px dashed #fcc;
border-radius: 5px;
  z-index: 2;
}
#tab1 h3 {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 3;
}
#tab1:hover h3, #tab1:focus h3, #tab1:active h3 {
  background-color: #fee;
  color: #fa0c6b;
  z-index: 4;
}
#tab1:hover .tabcontent, #tab1:focus .tabcontent, #tab1:active .tabcontent {
  opacity: 1;
  z-index: 3;
}

#tab2 .tabcontent { /* Personaliza a segunda tab */
  background-color: #fff;
box-shadow: 1px 2px 3px #fee;
border: 1px dashed #fcc;
border-radius: 5px;
  opacity: 0;
  z-index: 1;
}
#tab2 h3 {
  left: 130px;
  position: absolute;
  top: 0;
}
#tab2:hover h3, #tab2:focus h3, #tab2:active h3 {
  background-color: #fee;
  color: #fa0c6b;
  z-index: 4;
}
#tab2:hover .tabcontent, #tab2:focus .tabcontent, #tab2:active .tabcontent {
  opacity: 1;
  z-index: 3;
}
</style>
<div id="tabs">
  <!-- Primeira Tab -->
  <div id="tab1" class="tabbox">
    <h3>Cute</h3>
    <div class="tabcontent">
      Conteúdo da tab 1.
    </div>
  </div>
  <!-- Segunda Tab -->
  <div id="tab2" class="tabbox">
    <h3>Kawaii</h3>
    <div class="tabcontent">
      Conteúdo da tab 2.
    </div>
  </div>
</div>
É só editar algumas partes referentes à largura, altura, estilo dos textos, substituir o conteúdo pelo que desejar adicionar e outras coisas conforme vocês vão perceber. Note que os códigos se repetem, então para adicionar mais uma aba ou tab, basta adicionar um novo estilo com nome #tab3.tabcontent, em que você pode copiar o estilo das demais, e acrescentar <!-- Terceira Tab --><div id="tab3" class="tabbox">....</div> e assim por diante.

Tabview 2: Para qualquer Gadget
Mas para que vários gadgets fiquem juntos em um só, sejam eles em HTML ou não, tipo arquivos, tradutor, postagens populares, seguidores, estatísticas ou qualquer um do Blogger, faça o seguinte...
1 - Acesse Modelo-Editar HTML e procure por ]]></b:skin>. Quando encontrar, cole isso aqui antes dele:
.tabviewnav {
margin:0;
padding:3px 15px; /* Se o modelo que usar não for feito pelo Designer do Blogger troque 15px  por 0 */
font-size:21px;
font-weight:italic;
font-family: 'Monotype Corsiva';
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#FFCCFF;
box-shadow: 1px 2px 3px #fee;
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#FF3399;
text-shadow: 1px 2px 3px #fff;
}
.tabviewnav li a:hover {
color:#FFCCCC;
background:#FF6699;
opacity: .3;
    filter:alpha(opacity=30);
text-decoration:none;
box-shadow: 2px 2px 2px 2px #fee;
text-shadow: 1px 2px 3px #fff;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:pink;
color:#FF3399;
}
.tabviewcont .tabviewtab {
padding:5px;
border:2px solid pink;
background:url(http://1.bp.blogspot.com/-uTuEeKPdCB0/UBwJuS1azMI/AAAAAAAACyY/bf5o62_6csA/s1600/bg.gif) repeat;
 opacity: .5;
    filter:alpha(opacity=50);
box-shadow: 2px 2px 2px 2px #fee;
border-radius:0 0 5px 5px;
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border:2px solid pink;
margin:0 5px;
padding:2px 0 5px 0;
}
Esse código acima é que vai dar a aparência que você quiser; destaquei as partes mais legais para personalização, que se referem a cores de fundo, dos textos, background e opacidade, que vai deixar seu gadget bem clarinho. Aí pode ser alterados as bordas, sombras, arredondamentos...enfim, o que vocês quiserem ^-^
2 - Procure por </head> e quando encontrar cole esse script acima dele:
<script src='http://db.tt/sRgIZkDC' type='text/javascript'/>
3 - Procure por <div class='column-right-inner'> ou <div id='sidebar-wrapper'> e quando encontrar cole isso aqui logo abaixo:
<div class='tabview'>
<b:section class='tabviewtab' id='Gadget1' maxwidgets='1'/>
<b:section class='tabviewtab' id='Gadget2' maxwidgets='1'/>
<b:section class='tabviewtab' id='Gadget3' maxwidgets='1'/>
</div>
4 - Visualize; por enquanto não aparece nada de diferente. Acesse a área Layout e veja que agora existem mais 3 gadgets acima da opção normal de adicionar um gadget, assim:
Adicione nessas opções um novo gadget normalmente, escolhendo na lista oferecida pelo Blogger qualquer um que desejar. Se quiser adicionar mais de 3 gadgets é só acrescentar no código do passo 3, antes de </div>, isso aqui <b:section class='tabviewtab' id='Gadget4' maxwidgets='1'/>. Quantos gadgets acrescentar vai depender da largura de sua sidebar.
É isso :3 Espero que tenham gostado e mil beijinhus para todos!!!!

23 comentários:

  1. Como sempre, seu post me ajudou muito e acredito que a todos nós!
    xoxo :)

    ResponderExcluir
  2. Adorei!
    Eu tava usando um widget em tabs mas n era nem de longe tão fofo como o seu :)

    bjãoo linda

    ResponderExcluir
    Respostas
    1. O seu estava lindo também Giza ^^
      Muito obrigada e beijus<3

      Excluir
  3. Muito bom o código Roberta. Tem dias que estou lutando para diminuir o gadget de seguidores mas não consigo. Você tem alguma dica? Pensei até em colocar essa opção que você deu no post, mas não consigo de jeito nenhum pegar o codigo do gadget dos seguidores :/

    Mas enfim, obrigada!!

    ResponderExcluir
    Respostas
    1. Esse código pode ser encontrado no Google Friend Connect; lá você pega o html e edita tudo, desde as cores até largura, altura, quantos avatares por linha e tal. Para mudar só as cores você pode fazer tudo em layout.
      E ainda se quiser personalizar só ele pelo HTML do seu template pode também, mas acho que é para a área geral, ainda não tentei. No post do blog Cherry Bomb chamado "Personalizar cada gadget da sidebar" mostra como fazer isso ^^
      Espero que te ajude :3

      Excluir
    2. Obrigado Roberta, mas acontece que eu já tentei entrar no site do Google Friend Connect e nao encontro o codigo dos seguidores :/ parece que o site nao funciona mais.. ta diferente de como era antes.

      Excluir
    3. Na verdade, ele foi descontinuado pelo Google; pensei que era só para quem não usava o blogger, mas parece que é para todos :/
      Tente então personalizar o gadget mesmo com o tutorial do Cherry Bomb.

      Excluir
  4. Rô me ajuda? Como você configurou os comentários do seu blog pra ser visível só depois de aprovado? Não consigo encontrar opção no meu :S

    ResponderExcluir
    Respostas
    1. É só acessar Configurações - Postagens e Comentários, e na opção Moderação de Comentários deixar marcada a opção Sempre.
      Beijinhus e muito obrigada ^^

      Excluir
  5. *-*
    valeu por seguir meu blog :3

    ResponderExcluir
  6. Eu adorei o tutorial, e é super simples e muito útil.bjs
    no-planetaroom

    ResponderExcluir
    Respostas
    1. Que bom que gostou!
      Fico muito feliz :3
      Beijus...

      Excluir
  7. Gostei muito do seu blog porque de facto tem dicas bem úteis para nossos cantinhos :)

    Estou a seguir querida! :D Beijinho*

    ResponderExcluir
    Respostas
    1. Muito obrigada e seja sempre bem vinda :3
      Beijus...

      Excluir
  8. Que blog mais lindo é esse??? ameiiii <3
    Obrigado pela visitinha =D
    Ja estou seguindoooo =P
    Bjinhos doce no <3

    ResponderExcluir
  9. *o* que lugar mais lindo!
    Fico ate sem graça de entrar aui ! Mas achei super fofo!
    ha aui está o link dos meus blogs só não repara eles são bem simples
    http://morangoblu.blogspot.com.br/
    http://koreanlove1.blogspot.com.br/
    :D

    ResponderExcluir
    Respostas
    1. Muito obrigada e seja bem vinda!!!
      Com certeza seus blogs são fofos também, assim que puder vou visitar :3
      Beijinhus e obrigada uma vez mais de coração!!

      Excluir
  10. adorei o tutorial.
    http://duringthefifteenyears.blogspot.com.br/

    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