Links úteis
Fala aí gente, aqui é o Anon e hoje venho trazer mais um tutorial pra vocês! Bem, hoje estarei ensinando a como fazer uma dessas
Primeiramente, o que é uma skin com troca de abas? Clique aqui e descubra. Estou me referindo àquele "menu" em que você seleciona um formato e trocam os links de download... enfim, vamos logo!
Bom, pra esse tutorial preparei uma skin que iremos usar (ficou BEM estranha, mas o importante é aprender):
Vejamos como vamos fatiá-la agora para usar:
Comecemos agora criando os devidos estilos na folha de CSS (não vou me aprofundar em explicações sobre isso, você deve saber):
/* Batatas radioativas mutantes
----------------------------------------------- */
.base{
background:url(Imagem da base da skin)no-repeat;
width:470px;
height:252px;
}
.screen img{
width:198px;
height:118px;
margin:3px 0 0 4px;
}
.numero-epi{
font-family:Impact;
color:#ccc;
font-size:21px;
margin:-130px 0 0 210px;
}
.infos{
font-family:Arial;
color:#fff;
font-size:13px;
width:258px;
margin:0 0 0 210px;
}
.aba1{
margin:22px 0 0 4px;
}
.aba2{
margin:-32px 0 0 64px;
}
.aba3{
margin:-32px 0 0 124px;
}
.fundo1{
background:url(Fundo infos. da aba 01)no-repeat;
width:456px;
height:92px;
font-family:Arial;
color:#fff;
text-shadow:#000 0px 1px 0px;
font-size:13px;
padding:4px 0 0 4px;
margin:-4px 0 0 6px;
}
.fundo2{
background:url(Fundo infos. da aba 02)no-repeat;
width:456px;
height:92px;
font-family:Arial;
color:#fff;
text-shadow:#000 0px 1px 0px;
font-size:13px;
padding:4px 0 0 4px;
margin:-4px 0 0 6px;
}
.fundo3{
background:url(Fundo infos. da aba 03)no-repeat;
width:456px;
height:92px;
font-family:Arial;
color:#fff;
text-shadow:#000 0px 1px 0px;
font-size:13px;
padding:4px 0 0 4px;
margin:-4px 0 0 6px;
}Estudo do código:
.base----------Referente à área geral da skin
.screen--------Referente à área da imagem demonstrativa
.numero-epi----Referente à área "Episódio XXX"
.infos---------Referente à área de informações gerais
.aba1----------Referente à área da primeira aba (vermelha)
.aba2----------Referente à área da segunda aba (azul)
.aba3----------Referente à área da terceira aba (laranja)
.fundo1--------Referente à área de informações da primeira aba (vermelha)
.fundo2--------Referente à área de informações da segunda aba (azul)
.fundo3--------Referente à área de informações da terceira aba (laranja)
Até aqui não tem nada de diferente de uma skin comum, apenas que tem estilos a mais. Agora vamos à parte que complica (risos).
"_Mas Anon, o que tem de tão complicado assim?"
Bom, na verdade eu não considero mais complicado, apenas é uma parte que exige bastante atenção.. as únicas coisas mais "diferentes" que têm nesta skin é que iremos fazer o uso frequente da propriedade "display: block;", "display: none;" e um script:
<img onclick="document.getElementById('aba1-01').style.display='block'; document.getElementById('aba2-01').style.display='none';
document.getElementById('aba3-01').style.display='none';" src="Imagem da aba" />
O código completo a ser utilizado na postagem fica assim (Todas as devidas explicações após ele, não vá usando sem ler antes) :
<div class='base'>
<div class='screen'>
<img src='IMAGEM DEMONSTRATIVA'/></div>
<div class='numero-epi'>
Episódio XXX</div>
<div class='infos'>
Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo</div>
<div class='aba1'>
<img onclick="document.getElementById('aba1-01').style.display='block'; document.getElementById('aba2-01').style.display='none';
document.getElementById('aba3-01').style.display='none';" src="http://i.imgur.com/UBxuX.png" /></div>
<div class='aba2'>
<img onclick="document.getElementById('aba1-01').style.display='none'; document.getElementById('aba2-01').style.display='block';
document.getElementById('aba3-01').style.display='none';" src="http://i.imgur.com/mtztA.png" /></div>
<div class='aba3'>
<img onclick="document.getElementById('aba1-01').style.display='none'; document.getElementById('aba2-01').style.display='none';
document.getElementById('aba3-01').style.display='block';" src="http://i.imgur.com/vqQ0D.png" /></div>
<div id="aba1-01" style="display: block;">
<div class='fundo1'>
<b>Arroz:</b> Com frango
<b>Suco:</b> De frutas
<b>Sei lah:</b> UUUUU
<b>Babuinos:</b> Mutantes
</div>
</div>
<div id="aba2-01" style="display: none;">
<div class='fundo2'>
<b>Arroz:</b> Com frango²
<b>Suco:</b> De frutas²
<b>Sei lah:</b> UUUUU²
<b>Babuinos:</b> Mutantes²
</div>
</div>
<div id="aba3-01" style="display: none;">
<div class='fundo3'>
<b>Arroz:</b> Com frango³
<b>Suco:</b> De frutas³
<b>Sei lah:</b> UUUUU³
<b>Babuinos:</b> Mutantes³
</div>
</div>
</div>Estudo do código
Vejamos esta parte:<img onclick="document.getElementById('aba1-01').style.display='block';
document.getElementById('aba3-01').style.display='none';" src="Imagem da aba1" /></div>
<div class='aba2'>
<img onclick="document.getElementById('aba1-01').style.display='none';
document.getElementById('aba3-01').style.display='none';" src="Imagem da aba2" /></div>
<div class='aba3'>
<img onclick="document.getElementById('aba1-01').style.display='none';
document.getElementById('aba3-01').style.display='block';" src="Imagem da aba3" /></div>
Vejamos que a cada nova aba é necessário estruturarmos todo este código com uma única variação, sendo ela o uso de "display: block;" na aba a ser selecionada... vou tentar exemplificar como funciona:
Ao selecionar a aba 1 (com o uso do display: block; a aba 2 e 3 ficam desativadas (com o uso de display:none;)
Quantidade de abas
Este é um ponto de suma importância ser abordado... vou demonstrar a "variação de linhas" com relação a quantidade de abas:document.getElementById('aba1-01').style.display='block'; document.getElementById('aba2-01').style.display='none';"
document.getElementById('aba1-01').style.display='block'; document.getElementById('aba2-01').style.display='none';
document.getElementById('aba3-01').style.display='none';"
document.getElementById('aba1-01').style.display='block'; document.getElementById('aba2-01').style.display='none';
document.getElementById('aba3-01').style.display='none';
document.getElementById('aba4-01').style.display='none';"
E assim sucessivamente (lembrando logicamente que a repetição daquele código vareia de acordo com a quantidade de abas.
Demonstração de um código de 4 abas:
<img onclick="document.getElementById('aba1-01').style.display='block';
document.getElementById('aba2-01').style.display='none';
document.getElementById('aba3-01').style.display='none';
document.getElementById('aba4-01').style.display='none';" src="Imagem aba 1" /></div>
<div class='aba2'>
<img onclick="document.getElementById('aba1-01').style.display='none';
document.getElementById('aba2-01').style.display='block';
document.getElementById('aba3-01').style.display='none';
document.getElementById('aba4-01').style.display='none';" src="Imagem aba 2" /></div>
<div class='aba3'>
<img onclick="document.getElementById('aba1-01').style.display='none';
document.getElementById('aba2-01').style.display='none';
document.getElementById('aba3-01').style.display='block';
document.getElementById('aba4-01').style.display='none';" src="Imagem aba 3" /></div>
<div class='aba4'>
<img onclick="document.getElementById('aba1-01').style.display='none';
document.getElementById('aba2-01').style.display='none';
document.getElementById('aba3-01').style.display='none';
document.getElementById('aba4-01').style.display='block';" src="Imagem aba 4" /></div>
Lembrando que as classes "aba1", "aba2", "aba3" e "aba4" indicam apenas o posicionamento (que é definido pela folha de CSS), portanto, a parte que você deve prestar ateção é a em negrito.
Agora vamos a um ponto IMPORTANTÍSSIMO! Para cada episódio a ser postado numa mesma página você terá de usar sempre um código "diferente"...
EXEMPLO:
<div class='base'>
<div class='screen'>
<img src='IMAGEM DEMONSTRATIVA'/></div>
<div class='numero-epi'>
Episódio XXX</div>
<div class='infos'>
Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo</div>
<div class='aba1'>
<img onclick="document.getElementById('aba1-01').style.display='block'; document.getElementById('aba2-01').style.display='none';
document.getElementById('aba3-01').style.display='none';" src="IMAGEM DA ABA 1" /></div>
<div class='aba2'>
<img onclick="document.getElementById('aba1-01').style.display='none'; document.getElementById('aba2-01').style.display='block';
document.getElementById('aba3-01').style.display='none';" src="IMAGEM DA ABA 2" /></div>
<div class='aba3'>
<img onclick="document.getElementById('aba1-01').style.display='none'; document.getElementById('aba2-01').style.display='none';
document.getElementById('aba3-01').style.display='block';" src="IMAGEM DA ABA 3" /></div>
<div id="aba1-01" style="display: block;">
<div class='fundo1'>
Conteúdo a ser exibido na aba 1
</div>
</div>
<div id="aba2-01" style="display: none;">
<div class='fundo2'>
Conteúdo a ser exibido na aba 2
</div>
</div>
<div id="aba3-01" style="display: none;">
<div class='fundo3'>
Conteúdo a ser exibido na aba 3
</div>
</div>
</div>
<div class='base'>
<div class='screen'>
<img src='IMAGEM DEMONSTRATIVA'/></div>
<div class='numero-epi'>
Episódio XXX</div>
<div class='infos'>
Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo Pão com ovo</div>
<div class='aba1'>
<img onclick="document.getElementById('aba1-02').style.display='block'; document.getElementById('aba2-02').style.display='none';
document.getElementById('aba3-02').style.display='none';" src="IMAGEM DA ABA 1" /></div>
<div class='aba2'>
<img onclick="document.getElementById('aba1-02').style.display='none'; document.getElementById('aba2-02').style.display='block';
document.getElementById('aba3-02').style.display='none';" src="IMAGEM DA ABA 2" /></div>
<div class='aba3'>
<img onclick="document.getElementById('aba1-02').style.display='none'; document.getElementById('aba2-02').style.display='none';
document.getElementById('aba3-02').style.display='block';" src="IMAGEM DA ABA 3" /></div>
<div id="aba1-02" style="display: block;">
<div class='fundo1'>
Conteúdo a ser exibido na aba 1
</div>
</div>
<div id="aba2-02" style="display: none;">
<div class='fundo2'>
Conteúdo a ser exibido na aba 2
</div>
</div>
<div id="aba3-02" style="display: none;">
<div class='fundo3'>
Conteúdo a ser exibido na aba 3
</div>
</div>
</div>Agora uma coisa bem interessante... como poder escolher qual aba será exibida por primeiro? Semples, pra determinar qual irá aparecer por primeiro basta apenas usar style='display: block' na aba desejada. Exemplo:
Porém, o style="display: block;" só deve aparecer uma única vez
Acho que é "só isso", com certeza ficaram algumas dúvidas, então peço POR FAVOR que comentem colocando uma demonstração para que seja possível eu analisar o seu código e corrigir seu erro ;D
Mesmo se não for por dúvidas, COMENTEM, porque cansei de receber pedidos desse tutorial.
Comentários do autor
Bem, só pra dar uma esclarecida agora nuns assuntos, não tem nada a ver com o conteúdo do tutorial, mas, enfim...1 - Não vou fazer um teplate "fodão" pra você
2 - Não vou fazer só um design "fodão" pra você
3 - Eu não vendo layouts (além de eu não ser tão bom eu não tenho formas viáveis de receber o pagamento)
4 - Eu não vou programar um layout pra você
5 - Não vou programar sua skin (já fiz um tutorial pra isso).
6 - Eu "trabalho" apenas com blogger, portanto, não sei nada de outras linguagens que o blogger não envolva.
E por ultimo, de agora em diante vou ser pau no c* com todos e ignorar qualquer um que ficar me pedindo layout. Dúvidas são bem vindas.