29 de ago de 2009

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

7 comentários:

  1. Onde encontro esse Icon Tolls ou Icon Tools??? e como ponho essa widget lá no blogger????
    tava fazendo mas tive que parar por que não acho essa widget em lugar algum no google,a unica coisa que acha lá é um extrator de icones para windows chamado Icon Tools só isso...

    ResponderExcluir
  2. Poxa, me ajuda vai, não to conseguindo....faço tudo mas falta esse tal de Ico Tools, não sei que widiget é esse ou como cria ele..me ajuda, me explica melhor, a barra é tão bonita poxa, eu realmente queira ela tambem.

    ResponderExcluir
  3. Fernanda, o Ico Tools está em seu blog, onde eu pedi para você colocar. Leia com atenção e siga o passo a passo que vc vai conseguir. Veja que coloquei mais uma imagem para te mostrar como ficará em seu blog. Beijos

    ResponderExcluir
  4. Aaaaa obrigada,vou tentar e depois falos e consegui fazer tudo certinho.

    ResponderExcluir
  5. segui de forma a não acontecer qualquer erro, porém, ao tentar salvar ele diz : "O modelo é inválido porque a tag 'div' aparece dentro da tag 'head'.".. oque faço?

    ResponderExcluir
  6. Como Você Colocou Aquela Barra Preta Em Cima Do Seu Blogger ?

    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