Planeta Tutorial
Planeta Tutorial

Ola Visitante, Seja bem vindo(a) ao Planeta Tutorial, esta-mos em construção em breve estaremos prontos para lhe atender e fornecer-lhe tutoriais e dicas diversas para você aprimorar os seus conhecimentos e passar para outros. esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades. Vale também ressaltar que, Para você ter acesso aos links por ai , é necessário ser registrado, então se registre .
Se já tem uma conta no forúm,
Logue-se .
Painel de Usuario
http://planetatutorial.forumeiros.com/profile.forum?mode=viewprofile&u=-1Convidado
Mensagens: 0


Alterar
Ver
Tópicos e mensagens
Menu
Redes Sociais
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Translate
Últimos assuntos
» Regras da Área de pedidos
Ter 28 Jun 2011 - 17:31 por Admin

» Efeito Glow
Seg 27 Jun 2011 - 17:39 por Admin

» Efeito Brilho Suave nas fotos
Seg 27 Jun 2011 - 17:33 por Admin

» Arte geométrica com Photoshop
Seg 27 Jun 2011 - 17:31 por Admin

» Efeito Varinha Mágica no Photoshop
Sab 25 Jun 2011 - 15:20 por konan

» Montagem multicolorida com tintas e efeitos diversos
Sab 25 Jun 2011 - 15:18 por konan

» Linhas luminescentes no Photoshop
Sab 25 Jun 2011 - 15:17 por konan

» Segredos sobre design de site
Sex 24 Jun 2011 - 23:00 por konan

» Hardware para iniciantes, parte 5
Sex 24 Jun 2011 - 22:41 por konan

Estatísticas
Temos 26 usuários registrados
O último usuário registrado atende pelo nome de kaironborges

Os nossos membros postaram um total de 144 mensagens em 142 assuntos
Radio Jovem Pan
Relogio
Outubro 2018
SegTerQuaQuiSexSabDom
1234567
891011121314
15161718192021
22232425262728
293031    

Calendário Calendário

Visitou

Menu em Abas com JQuery

Ir em baixo

Diversos Menu em Abas com JQuery

Mensagem por Admin em Ter 21 Jun 2011 - 12:19







[Você precisa estar registrado e conectado para ver este link.]

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO




Vou ensinar como colocar em seu blog um menu muito bonito, simples e fácil de instalar.


Para visualizar este menu clique neste link: [Você precisa estar registrado e conectado para ver este link.]


Clique em Layout ► Editar HTML

OBS: Se o seu blog tem domínio próprio este menu não funciona.
Ele só funciona em blogs com blogspot no endereço.
Quase morri de tristeza quando ativei o domínio novo do TPV e o menu
parou de funcionar. Aí tive que tirar! Depois quebro a cabeça para
fazê-lo funcionar com um domínio próprio.
1º Passo:

» Instalar o CSS no seu template.

Cole o código abaixo acima da tag ]]>

Código:

[/b]
/*---- Tabbed Sidebar Widgets ---- */
.widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i37.tinypic.com/28iq9fm.gif) repeat-x scroll left bottom !important;/*img-tabcontentbg*/
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab  ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
}
.widget-tab  ul li:last-child {
    border-bottom:none;
}
.widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
}
.widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.tab-content  ul li a:hover {
    color:#a59c83;
}
.tab-content  ul li a:hover small {
    color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://i38.tinypic.com/2urpe01.gif) repeat-x scroll left top !important; /*img-tabtopbg*/
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;       
}
ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i34.tinypic.com/sf83a1.gif) repeat-x scroll left top; /*img-tabinactivebg*/
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
ul.tab-wrapper li:hover{
background:#FFFFFF url(http://i38.tinypic.com/2urpe01.gif) repeat-x scroll left top !important; /*img-tabtopbg*/
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;       
}
Imagens:
Tabcontentbg - Tabtopbg - Tabinactivebg - Tabinactivebg - (Sugestão)

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
♦ Clique em SALVAR MODELO.
2º Passo

» Instalar o JQuery e o Script em seu blog.

Cole abaixo da tag o código abaixo:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
Código:

<script type=[color=#006080]"text/javascript"[/color]>
[color=blue]var[/color] [color=red]starttab=[b]0[/b];[/color]
[color=blue]var[/color] [color=red]endtab=[b]2[/b];[/color]
[color=blue]var[/color] [color=red]sidebarname=[b]"sidebar"[/b];[/color]
</script>
<script type=[color=#006080]"text/javascript"[/color] src=[color=#006080]"http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js"[/color]></script>
<!-- Fim JavaScript Menu em Abas JQuery-->
♦ Você pode também baixar o arquivo JavaScript: [Você precisa estar registrado e conectado para ver este link.] » Salvá-lo num bloco de notas com o nome com a extensão .js, hospedá-lo num site de sua preferência e substituir o endereço [Você precisa estar registrado e conectado para ver este link.] acima pelo seu endereço hospedado

♦ Clique em SALVAR MODELO.
OBS: Se você clicar em VISUALIZARseu menu não irá aparecer.
Antes de você Visualizar o seu blog entenda alguns pontos.

Veja as variáveis:
Código:

[color=red][b]var starttab=0;[/b]
[b]var endtab=2; [/b]
[b]var sidebarname="sidebar"; [/b]
[/color]
[Você precisa estar registrado e conectado para ver este link.]
» starttab e endtab → São as variáveis que indicam a quantidade de abas do seu menu.
Por exemplo:

  • starttab=0 e endtab=2 Significa que seu menu vai de 0 a 2 ► Terá 3 abas a nº 0, nº 1 e nº 2.
  • Se você quiser que o seu menu tenha 4 abas mude o endtab=2 para endtab=3
» sidebarname="sidebar" → Esta variável indica onde o seu menu vai ficar.
Por exemplo:

  • Se você quer que ele fique na sidebar do seu blog coloque o nome da id='sidebar'.
  • Se você quer que ele fique na outra sidebar do seu blog coloque o
    nome da id='newsidebar'.(Este exemplo se refere ao template de
    demonstração, cuja outra sidebar tem o nome 'newsidebar')
Se você manteve o nº2 para a variável endtab. Observe que os 3
primeiros gadjets da sua sidebar ficarão contidos no menu em abas automaticamente, o próximo ficará abaixo do menu.[Você precisa estar registrado e conectado para ver este link.]
Saiba onde colocar seu menu:

Veja o HTML abaixo, ele indica a
disposição da 1ª Coluna (sidebar-wrapper), 2ªColuna (main-wrapper) e
3ªColuna (newsidebar-wrapper).

Código:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Recentes' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Arquivo' type='BlogArchive'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Comentários Recentes' type='HTML'/>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
[Você precisa estar registrado e conectado para ver este link.]
» Para que o seu menu fique nas colunas laterais apenas coloque var sidebarname="[b]nome da id da sidebar";
.
• Que neste caso será da id='sidebar' ou id='newsidebar'.
• Para o seu blog: encontre o nome da id da coluna do seu blog e substitua.
Exemplo do Demoplate:
var sidebarname="sidebar" (1ªColuna) ou var sidebarname="newsidebar" (3ªColuna).

» Mas, se você quiser colocar o menu em cima dos posts como eu coloquei aqui. Crie uma nova section em cima da 2ªColuna:
Como?

Muito simples.
1º Você vai acrescentar a linha verde no local indicado abaixo ficando desta forma:
Código:

<div id='main-wrapper'>
[b]<b:section class='main' id='main1' showaddelement='yes'/>[/b]
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
[Você precisa estar registrado e conectado para ver este link.]

2º Em var sidebarname="sidebar"; você irá substituir a palavra sidebar por main1assim: var sidebarname="main1";

3º Coloque as gadgets que desejar na section main1 criada que seu menu em abas aparecerá automaticamente.

♦ Se você clicar em VISUALIZARseu menu NÃO irá aparecer.

♦ Para que você visualize-o precisará clicar em SALVAR MODELO.

E aí sim clicar em Suas alterações foram salvas.Visualizar blog


avatar
Admin
Fundador
Fundador

Respeito às regras : Respeito as regras 100%

Mensagens : 65
Reputação : 0
Data de inscrição : 31/05/2011

http://planetatutorial.forumeiros.com

Voltar ao Topo Ir em baixo

Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum