Twitter Delicious Facebook Digg Stumbleupon Favorites More

Tutorial - Como Instalar Sidebar Tab no Template

Fazendo umas pesquisas em alguns blogs, em especial o Meu Super Blog e o Dicas Blogger, descobri como inserir a sidebar tab no template que você está usando. É aquele menu lateral com três abas como na figura abaixo (exemplo do Usuário Compulsivo).

Eu ja havia postado aqui uma forma de sidebar tab para iniciantes e intermediários, que não precisa alterar nada no código HTML do blog. Não era fixo no template, era apenas colocado em uma nova gadget, porém, não era muito funcional nem tampouco profissional.

Esse que vou mostrar agora, é o mesmo daqueles tempaltes que ja vêm com esse recurso instalado. Consegui montar um passo-a-passo de como adiciona-lo ao seu blog. Então, vamos lá.

   

É o seguinte, para adionar no seu blog, siga o passo-a-passo:

1 - Vá ao código HTML do seu blog e clique em "Expandir modelo de widget". Abaixo das sequências de características das sidebars (depois daquelas que contem #sidebar 1{ etc... e antes das tags sobre Profiles, Blockquote, Comment e etcc., etendeu?), cole o seguinte código:

Exemplo: No meu template, eu colei depois de:

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

Então, faça como o descrito copiando e colando o código abaixo, formatando a largura da Ta View de acordo com a coluna (sidebar) do seu blog:

/*--------Tabber ---------------------------------*/
#tabsidebar-wrapper{
width: 375px; /* Mesma largura da Sidebar */
float: right;
border: 1px none #CCC;
margin-bottom: 15px;
}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {
border-bottom:2px solid #5B0;
margin-bottom: .3em;
padding: 0;
line-height:1.2em;
}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 0px;}
ul.tabbernav{
margin:0;
padding: 8px 0;
border-bottom: 1px solid #ccc;
}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a{
padding: 8px 0.5em;
margin-right:2px;
border: 1px solid #CCC;
border-bottom: none;
background: #fff;
text-decoration: none;
}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#369; background: #e6e6e6; border-color: #CCC;}
ul.tabbernav li.tabberactive a{
background-color: #e6e6e6;
color: #369;
border-bottom: 1px solid #e6e6e6;
}
ul.tabbernav li.tabberactive a:hover{
color: #369;
background: #e6e6e6;
border-bottom: 1px solid #e6e6e6;
}
.tabberlive .tabbertab {
background: #e6e6e6;
padding:5px;
border:1px solid #ccc;
border-top:0;
}

.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

2 - Agora, cole o código seguinte antes da tag </head>:

<!-- JavaScript Menu em Abas -->
<script src='http://pi0qqg.bay.livefilestore.com/y1pzujTC-NnsVpna7xTKKxk2oqK_xXox33_8y_NuoWuWFYBgDdqUYqso_r2FPHlEhpQL0ACpEZJSkwoDWiDk7VYPA/tabber.js?download' type='text/javascript'/>

Feito isso, salve o modelo.

 

3 - Apartir da tag <body> existe uma sequência de tags que identificam a estrutura do seu blog, onde ficam as colunas, etc... Aqui, vamos inserir o local onde ficará a sidebar tab (Tabber):

Então, encontre uma tag mais ou menos igual a esta:

<div id='main-wrapper'>
<b:section class='main' id='main' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

OBS.: É imposrtante colar abaixo de <b:section></div> em negrito acima.

Abaixo dela, cole o seguinte código:

<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>
</div></div><!-- Fim da tabsidebar-wrapper-->

 

Pronto! Agora vc tem um recurso bem interessante para seu blog. Dúvidas? Pergunte através dos comentários.

7 comentários:

Anônimo disse...

Muito bom esse tutorial, vou fazer alguns testes no meu blog.

Willian Coutinho disse...

OK Caio. Vai lá, boa sorte!

Unknown disse...

Estou neste momento a criar um blogue com abas! Mas tenho um pequeno problema! Como insiro postes nas diferentes abas?

Obrigado!

Willian Coutinho disse...

Quando você criar as abas e for em Layout - Elementos de página, verá os links de cada aba.
Clique em cada um e insira a widget.

Anônimo disse...

Olá Willian. Também funcionou em meu blog. Irei indicar o seu blog :) www.blogdojonathaan.blogspot.com

Anônimo disse...

eu fiz mas nao mudou nada no meu blog, o que fiz de errado?

Vinicius W. disse...

não consegui,fiz tudo certinho e não deu.... ¬¬¬¬

Postar um comentário

Envie um comentário!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates