Criar barra de ferramentas para o footer do Blogger 2

Agora vamos colocar os elementos na barra. Você já viu a primeira parte Aqui, e viu que apareceram duas barras em "Elementos de página"

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.

1-Na barra de cima ficarão os elementos ocultos, os elementos que só aparecerão quando o visitante clicar.

2-Na barra de baixo ficarão os elementos onde o visitante irá clicar, PORTANTO, você deverá colocar 2 vezes cada elemento como no exemplo.

Clique em "Adiconar um gadget" e adicione o que quiser nas duas barras como mostra a imagem em HTML/Javascript.

O primeiro widget a colocar (e esse é obrigatório) é o de nome "ICO TOLLS", note que este só será colocado 1 vez, e na na barra de baixo.


Depois vá colocando os outros widgets, mas sempre assim, em cima e em baixo. O de cima escreva "Conteúdo" antes da palavra.

Pronto, acrescentou tudo o que queria ? Então a aparência deverá ser mais ou menos assim.











No meu caso coloquei Twitter, Feed e Comentários. Note que há o mesmo conteúdo nas duas barras, porem, na barra de cima adicionei a palvra" CONTEÚDO" para diferenciar as duas na hora de colocar o código.


Agora no HTMl de seu blog procure pelo código:
]]></b:skin>
e depois dele cole o código abaixo trocando o código na cor verde pelo endereço de sua imagem.

<script type='text/javascript'>
//<![CDATA[
var toolOpen = "";
function ftool(cual) {
var cualmostrar = document.getElementById(cual);
if (cualmostrar.style.display == 'block') {
cualmostrar.style.display='none';
toolOpen = "";
} else {
if (toolOpen != "") { document.getElementById(toolOpen).style.display='none'; }
cualmostrar.style.display='block';
toolOpen = cual;
}
}
function togglebarra() {
var labarradiv = document.getElementById('footertools-barra');
var labarraimg = document.getElementById('icotoggle');
if(labarradiv.className == "footertools-barra-max") {
labarradiv.className = "footertools-barra-min"
labarraimg.src="ENDEREÇO DA IMAGEM MAIS";
} else {
labarradiv.className = "footertools-barra-max"
labarraimg.src="ENDEREÇO DA IMAGEM MENOS";
}
}
//]]>
</script>

Salve

Abaixo algumas imagens. Salve em seu pc e depois hospede-as em um site. AQUI outros botões.

Agora, procure o último código
</div> em seu blog. Acima você verá um código parecido com este, só que claro, com os títulos que você deu a seus widgets. Anote o número do HTML de cada um, você irá precisar.




*Código na cor azul representa o título dos widgets
*Código na cor vermelha representa o endereço do widget.


<div id='footertools-contenedor'>
<b:section id='tool-container'>
<b:widget id='HTML6' locked='false' title='Conteudo de feed' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Conteudo comentarios' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Conteudo Twitter' type='HTML'/>
</b:section>
</div>

<div class='footertools-barra-max' id='footertools-barra'>
<b:section id='footertools-barra-inner'>
<b:widget id='HTML5' locked='false' title='Feed' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Comentarios' type='HTML'/>
<b:widget id='HTML1' locked='false' title='Twitter' type='HTML'/>
<b:widget id='HTML7' locked='false' title='Ico Tools' type='HTML'/>
</b:section>
</div>



Bom, agora o que você terá que fazer é ver o seu blog. Note que estará tudo aberto, as tabelas ocultas. Vá clicando no pequeno ícone de ferramentas do Blogger ( )e vá colando os códigos abaixo.

*Atenção: Não se esqueça de substituir os números do HTML pelos números dos HTML dos seus widgets, aqueles que vc escreveu a palavra "Conteúdo" antes.






No widget Feed colocamos este código:

<a id="feed" href="javascript:ftool('HTML6')"><img src="ENDEREÇO DA IMAGEM FEED" /></a>

No widget Comentários colocamos este código:

<a id="comentarios" href="javascript:ftool('HTML4')"><img src="ENDEREÇO DA IMAGEM COMENTARIOS" /></a>

No widget Twitter colocamos este código:

<a id="twitter" href="javascript:ftool('HTML2')"><img src="ENDEREÇO DA IMAGEM TWITTER" /></a>

No widget Icotools colocamos este código:

<a href="javascript:togglebarra()"><img id="icotoggle" src="ENDEREÇO DA IMAGEM MAIS" /></a>

Atenção, que no widget  "Ico Tools" depois de colocar este código dentro do  widget, volte no HTML do blog e acima de
]]></b:skin>
Cole este próximo código substituindo o número 7 pelo número do HTML do seu 'Ico Tools':

#HTML7{
position: absolute;
right: 0;
}

Agora vamos para a terceira e última parte, onde esconderemos o conteúdo.

Créditos: Vagabundia