1 de dez. de 2010

Menu em abas com botões diferentes e efeito JQuery

DEMO




















Para colocar sua sidebar em forma de tabela com efeito 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














Código em vermelho representa a largura do menu







/*Tab-Sidebar --------------------------------------------------*/
.widgets{
background: #ccc;
float:left;
margin: 10px 0px 0 10px;
width:318px;
}

ul.tabnav{
margin:0;
padding:0;
width:318px;
}

.tabnav li{
background: #fff;
display:inline;
float:left;
list-style:none;
margin: 1px 0px 1px 1px;
padding: 2px 0px;
}

.tabnav li a{
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:#ccc;
color:#333;
text-decoration:none;
}
.tabdiv{
border: 2px solid #ccc;
background: #fff;
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 #808080;
line-height:1.35em;
margin:2px 0 2px 0;
padding:0 0 2px 3px}

.tabdiv li a:link,.tabdiv li a:visited{
overflow: hidden;
font-size: 15px;
color:#808080;
}

.tabdiv li a:hover {
text-decoration:none}

.ui-tabs-hide{
display:none}

Agora depois de:

]]></b:skin>

Cole este próximo código


<!--Tabsidebar-->
<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>

Agora procure por:

<div id='sidebar-wrapper'>

E antes dele cole:


<div class='widgets' id='tab-sidebar'>
<ul class='tabnav'>

<!--  ALTERE AQUI OS TÍTULOS DA SIDEBAR EM ABAS  -->
<li class='tab1'><a href='#tab1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJYkE_BUxwIfQ1KD8KMlteyMnA7OfWYb35O91qO9ocnv-eUwVRv9DR2QjfaYKXFGujT9mk7wzRgo2Bv8mpe6BZL0MLWKGM27YmOK44ZCxTmKHR4qnFNk_CHKmSxUso5SAc0cagMf4__0/s1600/Copy.png'/> </a></li>
<li class='tab2'><a href='#tab2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCgqT0M7er4YSKOP5k2kh6kUI4H8WuxKkttLcKJdIdiHo6aiQIyZXM8NYSX7xlOpHTTcLQEB9zwcRqyyUW-eLHJr00dmOT2FEuo6ZnyvsSoVmxMmJokRWN0SBLj9EsY2Kg6MSAVhJU1EM/s1600/Favourites.png'/></a></li>
<li class='tab3'><a href='#tab3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNMfMyaARx7UHep9-lKFtkIRInpDFPofG9rU0ejso6Z6U7IrI4XHI2lUlG64ryc2_7z8hjPM2Y8E7dLde10K6I20LIR4Cc5UcQZmLPYKufVFgFuipDAtGvDfE7RGe4dkaoJpkcwjgxPgc/s1600/Yellow+tag.png'/></a></li>
<li class='tab4'><a href='#tab4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfq98kylKD0S7NdZld3YwHwNVQST2jy0k-YGZO4hyphenhyphenCpSCtfmIURaHbfWC6K8rFTxcRSbFmQMsHCmrtHASAZvSQcYH-RWBCVwaDZWZPUZJnKZIFShoqNaLKh5oHHIOepsX4OoGtNMoUK6k/s1600/Comment.png'/></a></li>
<li class='tab5'><a href='#tab5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9cET2D5uIwqrqJPB2Aw9DBSeyRkFrwljiObksdMhWTuw4Kzl1tpQJL6LZh646O1hjxb3dhYeiKuSPq0I0xwBolWcfODStnWv1IexJx-bmSl5ceB67c8Ov0OEwA5QHpieyw6LCNhAhQ0k/s1600/Text.png'/></a></li>
<li class='tab6'><a href='#tab6'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh64tqqw0RC7cRhOg2RL_dRbyndtsJWFY1EXEu9nA4e8WtiaSYNG_J1sOZm1DFJfHUXZDWJKLP57ULNw4vYRRYaD4iuciSzp4sQZAXc1PLgHshHfVN6kyv28LPPyNy9p273MFNR0EEvGLI/s1600/E-mail.png'/></a></li>
<li class='tab7'><a href='#tab7'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLoi0bc_BLECHdwH3yLKmTjgPm8pWz6H7agsvf1Ff-2eCody0Dfnpe3tmjwiBLOy-I9r-VIDQU64ykbQqk0BFZIKW6uLnQ9gjIBYe_hLMv8gUsjq3YW1iQK7-vLV1qmszBjnRygf14ETY/s1600/Folder.png'/></a></li>
<li class='tab8'><a href='#tab8'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi89CODpUSBCZCOMX95wflVln9K33F7JedX2elm5nlEqVzyWcqrXPpJyu7zq0oAMaIFDHHk3b16jGU_wSx0uN00_1lCWZfOEd9xu1t5HVPLGsdJOua_Wb9TXi4jfqBvgHny-74_KxlAFwU/s1600/Diagram.png'/></a></li>
<li class='tab9'><a href='#tab9'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4Oy1Lf6TgrMPRnAfGgwZ70qiEiz03AbwXQ7tipLRyfO-xd0WSUufksnDISXwaqVLs3ejQSvSemqQYK5cTCbWQxWLuHo1nXhCM0OnbeecflePttDcBzNLOCJrB415CKIAKu9IieYty-0/s1600/Blog.png'/></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='PopularPosts2' 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='BlogList123' locked='false' title='Minha lista de blogs' type='BlogList'/>
</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='Label2' locked='false' title='Labels' type='Label'/>
</b:section> <!-- /end sidebar-tabs-3 -->
</div> <!-- /end tab3 -->

<div class='tabdiv' id='tab4'>
<b:section class='sidebar-tab' id='sidebar-tabs-4' preferred='yes'>
<b:widget id='HTML122' locked='false' title='Últimos comentários' type='HTML'/>
</b:section> <!-- /end sidebar-tabs-4 -->
</div> <!-- /end tab4 -->

<div class='tabdiv' id='tab5'>
<b:section class='sidebar-tab' id='sidebar-tabs-5' preferred='yes'>
<b:widget id='PageList2' locked='false' title='Páginas' type='PageList'/>
</b:section> <!-- /end sidebar-tabs-5 -->
</div> <!-- /end tab5 -->

<div class='tabdiv' id='tab6'>
<b:section class='sidebar-tab' id='sidebar-tabs-6' preferred='yes'>
<b:widget id='HTML103' locked='false' title='Email' type='HTML'/>
</b:section> <!-- /end sidebar-tabs-6 -->
</div> <!-- /end tab 6-->

<div class='tabdiv' id='tab7'>
<b:section class='sidebar-tab' id='sidebar-tabs-7' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arquivo do blog' type='BlogArchive'/>
</b:section> <!-- /end sidebar-tabs-7 -->
</div> <!-- /end tab 7-->

<div class='tabdiv' id='tab8'>
<b:section class='sidebar-tab' id='sidebar-tabs-8' preferred='yes'>
<b:widget id='Followers2' locked='false' title='Seguidores' type='Followers'/>
</b:section> <!-- /end sidebar-tabs-8 -->
</div> <!-- /end tab 8-->

<div class='tabdiv' id='tab9'>
<b:section class='sidebar-tab' id='sidebar-tabs-9' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Inscrever-se' type='Subscribe'/>
</b:section> <!-- /end sidebar-tabs-9 -->
</div> <!-- /end tab 8-->


<div class='clear'/>
</div> <!-- /end tab-sidebar -->

12 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Olha o aparece no meu.
    "Mais de um item encontrado com o id: HTML2. Os IDs de itens devem ser únicos e exclusivos."
    Pode me ajudar?

    ResponderExcluir
  3. lha o que aparece no meu.
    "Mais de um item encontrado com o id: HTML2. Os IDs de itens devem ser únicos e exclusivos."
    Pode me ajudar?

    ResponderExcluir
  4. @Versilluz o que acontece é que vc já possui um widget com o endereço "HTML2". Para que isso pare de ocorrer, basta vc procurar por HTML2 e substituir o 2 por 122, ok ? Tente, verá que da certo. Beijos

    ResponderExcluir
  5. Poxa amiga, o menu agora ficou todo abaixo das postagens. acho que o menu é mais largo que a coluna.

    ResponderExcluir
  6. @Versilluz basta diminuir a largura. Sinalizei no código, o que está na cor vermelha.

    ResponderExcluir
  7. Oi Elke, gostei desse menu, estou passando para dizer que seu blog está lindo como sempre, e desde já (como ando muito sem tempo e vou viajar!) feliz natal e próspero ano novo pra vc e sua familia.
    Abraços sinceros, Jess.

    ResponderExcluir
  8. Oi, óh eu de novo. Tudo bem com você?
    Elke, Os ícones estão mais largo que a coluna. tem como diminuí-lo só um pouquinho pra ficar certinho? a largura que você sinalizou eu acertei. Beijo. Saúde e paz.

    ResponderExcluir
  9. Elke me ajude coloquei o menu no meu blog e o slide parou de funcionar meu blog é esse www.camilaejulia.com desde já obrigado!

    ResponderExcluir
  10. Renato, disfaça. Infelizmente scripts podem entrar em conflito e anular um ao outro. Você deverá escolher um dos dois para ter no blog. Vou procurar uma solução para isso. Beijos.

    ResponderExcluir
  11. @Elke di BarrosEncontrei a solução escolhi o Template Gorjuss de sua autoria lá tem o slide e o menu em abas com figuras obrigado Elkeeeeee!!!

    ResponderExcluir
  12. Oi Elke
    deu tudo certinho até esta parte
    div id='sidebar-wrapper
    não encontrei

    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