Muito pesquisei, e encontrado foi com Elke,
e merecidamente,
fonte e créditos:
http://templateseacessorios.blogspot.com/
2010/11/menu-em-abas-efeito-jquery.html
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI
/*Tab-Sidebar --------------------------------------------------*/
.widgets{
background:#fff;
float:left;
margin: 1px 0 10px 20px;
width:320px;}
ul.tabnav{
margin:0;
padding:0;
width:310px}
.tabnav li{
border: 1px solid #590100;
display:inline;
float:left;
list-style:none;
margin: 1px 1px 1px 1px;
padding: 2px 1px 0px 1px}
.tabnav li a{
background:#590100;
color:#fff;
display:block;
font-size:88%;
font-family:Arial, Tahoma, Verdana;
font-weight:bold;
margin:2px 2px 0 2px;
outline:none;
padding:4px 3px 1px 3px;
text-transform:uppercase}
.tabnav li a:hover,
.tabnav li a:active,
.tabnav li.ui-tabs-selected a{
background:#fff;
color:#333;
text-decoration:none}
.tabdiv{
border: 1px solid #590100;
background:#ffffff;
padding:0 0 0 5px;
margim: 0 0 0 20px;
}
.tabdiv h2{
display:none}
.tabdiv ul{
list-style:none;
padding:5px 0px}
.tabdiv li{
border-bottom:1px dashed #590100;
line-height:1.35em;
margin:2px 0 2px 0;
padding:0 0 2px 3px}
.tabdiv li a:link,
.tabdiv li a:visited{
overflow: hidden}
.tabdiv li a:hover {
text-decoration:none}
.ui-tabs-hide{
display:none}
Agora acima <div id='sidebar-wrapper'> de cole o próximo código:
<div class='widgets' id='tab-sidebar'>
<ul class='tabnav'>
<!-- ALTERE AQUI OS TÍTULOS DA SIDEBAR EM ABAS -->
<li class='tab1'><a href='#tab1'>Destaques</a></li>
<li class='tab2'><a href='#tab2'>Comentários</a></li>
<li class='tab3'><a href='#tab3'>Arquivo</a></li>
</ul>
<div class='clear'/>
<div class='tabdiv' id='tab1'>
<b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Postagens populares' type='PopularPosts'/>
</b:section><!-- /end sidebar-tabs-1 -->
</div> <!-- /end tab1 -->
<div class='tabdiv' id='tab2'>
<b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>
<b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'/>
</b:section> <!-- /end sidebar-tabs-2 -->
</div> <!-- /end tab2 -->
<div class='tabdiv' id='tab3'>
<b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>
</b:section> <!-- /end sidebar-tabs-3 -->
</div> <!-- /end tab3 -->
<div class='clear'/>
</div> <!-- /end tab-sidebar -->
Agora abaixo de: ]]></b:skin> cole o próximo código.
Vá até o HTML de seu blog e antes de ]]></b:skin> cole o código abaixo.
" Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI"
Agora acima de
<div id='sidebar-wrapper'>
cole o próximo código:
<div class='widgets' id='tab-sidebar'>
<ul class='tabnav'>
<!-- ALTERE AQUI OS TÍTULOS DA SIDEBAR EM ABAS -->
<li class='tab1'><a href='#tab1'>Destaques</a></
<li class='tab2'><a href='#tab2'>Comentários</a></
<li class='tab3'><a href='#tab3'>Arquivo</a></li>
</ul>
<div class='clear'/>
<div class='tabdiv' id='tab1'>
<b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Postagens populares' type='PopularPosts'/>
</b:section><!-- /end sidebar-tabs-1 -->
</div> <!-- /end tab1 -->
<div class='tabdiv' id='tab2'>
<b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>
<b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'/>
</b:section> <!-- /end sidebar-tabs-2 -->
</div> <!-- /end tab2 -->
<div class='tabdiv' id='tab3'>
<b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>
</b:section> <!-- /end sidebar-tabs-3 -->
</div> <!-- /end tab3 -->
<div class='clear'/>
</div> <!-- /end tab-sidebar -->
Agora abaixo de:
]]></b:skin>
cole o próximo código.
Templates e Acessórios
|Clique Aqui e Leia Mais| ►
e merecidamente,
fonte e créditos:
http://templateseacessorios.blogspot.com/
2010/11/menu-em-abas-efeito-jquery.html
Menu em abas efeito Jquery
Vá até o HTML de seu blog e antes de ]]></b:skin> cole o código abaixo. |
| DEMO |
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI
/*Tab-Sidebar --------------------------------------------------*/
.widgets{
background:#fff;
float:left;
margin: 1px 0 10px 20px;
width:320px;}
ul.tabnav{
margin:0;
padding:0;
width:310px}
.tabnav li{
border: 1px solid #590100;
display:inline;
float:left;
list-style:none;
margin: 1px 1px 1px 1px;
padding: 2px 1px 0px 1px}
.tabnav li a{
background:#590100;
color:#fff;
display:block;
font-size:88%;
font-family:Arial, Tahoma, Verdana;
font-weight:bold;
margin:2px 2px 0 2px;
outline:none;
padding:4px 3px 1px 3px;
text-transform:uppercase}
.tabnav li a:hover,
.tabnav li a:active,
.tabnav li.ui-tabs-selected a{
background:#fff;
color:#333;
text-decoration:none}
.tabdiv{
border: 1px solid #590100;
background:#ffffff;
padding:0 0 0 5px;
margim: 0 0 0 20px;
}
.tabdiv h2{
display:none}
.tabdiv ul{
list-style:none;
padding:5px 0px}
.tabdiv li{
border-bottom:1px dashed #590100;
line-height:1.35em;
margin:2px 0 2px 0;
padding:0 0 2px 3px}
.tabdiv li a:link,
.tabdiv li a:visited{
overflow: hidden}
.tabdiv li a:hover {
text-decoration:none}
.ui-tabs-hide{
display:none}
Agora acima <div id='sidebar-wrapper'> de cole o próximo código:
<div class='widgets' id='tab-sidebar'>
<ul class='tabnav'>
<!-- ALTERE AQUI OS TÍTULOS DA SIDEBAR EM ABAS -->
<li class='tab1'><a href='#tab1'>Destaques</a></li>
<li class='tab2'><a href='#tab2'>Comentários</a></li>
<li class='tab3'><a href='#tab3'>Arquivo</a></li>
</ul>
<div class='clear'/>
<div class='tabdiv' id='tab1'>
<b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Postagens populares' type='PopularPosts'/>
</b:section><!-- /end sidebar-tabs-1 -->
</div> <!-- /end tab1 -->
<div class='tabdiv' id='tab2'>
<b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>
<b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'/>
</b:section> <!-- /end sidebar-tabs-2 -->
</div> <!-- /end tab2 -->
<div class='tabdiv' id='tab3'>
<b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>
</b:section> <!-- /end sidebar-tabs-3 -->
</div> <!-- /end tab3 -->
<div class='clear'/>
</div> <!-- /end tab-sidebar -->
Agora abaixo de: ]]></b:skin> cole o próximo código.
<script src='http://www.google.com/jsapi'/>
<script>
google.load("jquery", "1.3.1");
google.load("jqueryui", "1.5.3");
</script>
<script type='text/javascript'>
//<![CDATA[
// <!-- Tab Sidebar -->
$(document).ready(function() {
$('#tab-sidebar> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
//]]>
</script>
<script>
google.load("jquery", "1.3.1");
google.load("jqueryui", "1.5.3");
</script>
<script type='text/javascript'>
//<![CDATA[
// <!-- Tab Sidebar -->
$(document).ready(function() {
$('#tab-sidebar> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
//]]>
</script>
:::::::::::::::::::
Menu em abas efeito Jquery
Vá até o HTML de seu blog e antes de ]]></b:skin> cole o código abaixo.
|
| DEMO |
" Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI"
::::::::::::::::::::
/*Tab-Sidebar ------------------------------
.widgets{
background:#fff;
float:left;
margin: 1px 0 10px 20px;
width:320px;}
ul.tabnav{
margin:0;
padding:0;
width:310px}
.tabnav li{
border: 1px solid #590100;
display:inline;
float:left;
list-style:none;
margin: 1px 1px 1px 1px;
padding: 2px 1px 0px 1px}
.tabnav li a{
background:#590100;
color:#fff;
display:block;
font-size:88%;
font-family:Arial, Tahoma, Verdana;
font-weight:bold;
margin:2px 2px 0 2px;
outline:none;
padding:4px 3px 1px 3px;
text-transform:uppercase}
.tabnav li a:hover,
.tabnav li a:active,
.tabnav li.ui-tabs-selected a{
background:#fff;
color:#333;
text-decoration:none}
.tabdiv{
border: 1px solid #590100;
background:#ffffff;
padding:0 0 0 5px;
margim: 0 0 0 20px;
}
.tabdiv h2{
display:none}
.tabdiv ul{
list-style:none;
padding:5px 0px}
.tabdiv li{
border-bottom:1px dashed #590100;
line-height:1.35em;
margin:2px 0 2px 0;
padding:0 0 2px 3px}
.tabdiv li a:link,
.tabdiv li a:visited{
overflow: hidden}
.tabdiv li a:hover {
text-decoration:none}
.ui-tabs-hide{
display:none}
Agora acima de
<div id='sidebar-wrapper'>
cole o próximo código:
<div class='widgets' id='tab-sidebar'>
<ul class='tabnav'>
<!-- ALTERE AQUI OS TÍTULOS DA SIDEBAR EM ABAS -->
<li class='tab1'><a href='#tab1'>Destaques</a></
<li class='tab2'><a href='#tab2'>Comentários</a></
<li class='tab3'><a href='#tab3'>Arquivo</a></li>
</ul>
<div class='clear'/>
<div class='tabdiv' id='tab1'>
<b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Postagens populares' type='PopularPosts'/>
</b:section><!-- /end sidebar-tabs-1 -->
</div> <!-- /end tab1 -->
<div class='tabdiv' id='tab2'>
<b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>
<b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'/>
</b:section> <!-- /end sidebar-tabs-2 -->
</div> <!-- /end tab2 -->
<div class='tabdiv' id='tab3'>
<b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>
</b:section> <!-- /end sidebar-tabs-3 -->
</div> <!-- /end tab3 -->
<div class='clear'/>
</div> <!-- /end tab-sidebar -->
Agora abaixo de:
]]></b:skin>
cole o próximo código.
<script src='http://www.google.com/
<script>
google.load("jquery"
google.load("jqueryui&
</script>
<script type='text/javascript'>
//<![CDATA[
// <!-- Tab Sidebar -->
$(document).ready(function() {
$('#tab-sidebar> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
//]]>
</script>
<script>
google.load("jquery"
google.load("jqueryui&
</script>
<script type='text/javascript'>
//<![CDATA[
// <!-- Tab Sidebar -->
$(document).ready(function() {
$('#tab-sidebar> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
//]]>
</script>
::::::::::::::::::::::::
fonte:
Templates e Acessórios
 | de | Templates e Acessórios <templateseacessorios2@gmail.com> | |
| para | brandaodasilvaedilene@gmail.com | ||
| data | 12 de novembro de 2010 19:21 | ||
| assunto | Templates e Acessórios | ||
| enviado por | feedburner.bounces.google.com | ||
| assinado por | google.com | ||
Postagens
