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 iciantes 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,não era muito funcional nem tanpouco 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:
/*--------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.
1 comentários:
Muito bom esse tutorial, vou fazer alguns testes no meu blog.
26 de janeiro de 2009 às 17:15Postar um comentário