Menu em abas no Blogger - Organize seus Gadgets

Uma forma fácil de deixar seus Gadgets organizados é colocar um menu em abas, que além do mais diminui um pouco o espaço da sidebar, e deixa seu blog  com uma cara mais profissional.Tem blogs que são cheios de Gadget, é previsão do tempo,músicas,rádios,banners e outros, para organiza-los o menu é muito útil.veja abaixo como fazer no seu blog:


1. Acesse seu painel do Blogger
2. Vá em "Layout"->"Editar HTML"
Faça um backup antes de começar, se não tiver muita experiência tente em um blog de testes.
3.  Procure pelo código abaixo "Ctrl e F":
</head>
Antes do código acima, adicione o código seguinte:
<!-- JavaScript Menu em Abas -->
<script src='http://noticiaeblog.googlecode.com/files/abas.js' type='text/javascript'/>
4. Agora vamos adicionar CSS, procure código seguinte:
]]></b:skin>
Antes do código acima adicione o código abaixo:
/*--------Tabber ---------------------------------*/
#tabsidebar-wrapper{width: 400px;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 5px;}
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: #EEE;text-decoration: none;}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

O número em vermelho refere-se a largura do menu, ajuste essa largura de acordo com se Layout.

5. Agora vamos adicionar o menu a sidebar, procure pelo código abaixo:
<div id='sidebar-wrapper'>
6. Antes do código acima adicione 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-->
7.Salve as alterações e vá para "Layout"->"Elemento da página"

Você deverá ver um menu como esse da imagem

Adicione os Gadgets desejados e veja o resultado

Posted in: Blogs