12 de nov de 2010

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='PopularPosts11' 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='Gadget11' 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='BlogArchive2' 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(&quot;jquery&quot;, &quot;1.3.1&quot;);
google.load(&quot;jqueryui&quot;, &quot;1.5.3&quot;);
</script>
<script type='text/javascript'>
//<![CDATA[
// <!-- Tab Sidebar -->
$(document).ready(function() {
$('#tab-sidebar> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
//]]>
</script>

2 comentários:

  1. Amiga gostei estava procurando, e vc me presenteou, valeu mesmo.
    Abraços forte

    ResponderExcluir
  2. elke
    adorei a explicação,

    ...enviei-lhe um e-mail


    desde aquele dia ja foi
    ok
    bjus
    linda
    te adoro!

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube