Como colocar o Botão Abrir e Fechar CBOX em seu Blog

Olá pessoal! Vamos agora aprender a colocar no Blog o botão " abrir e fechar CBOX". Esse botão é bem interessante, pois ele deixa a CBOX oculta no Blog e quando o usuário clica no Botão abrir, a CBOX aparece. Então, você pode economizar mais espaço no seu Blog...






Para quem já conhece a ferramenta CBOX, sabe que ela ocupa um espaço bastante grande no Blog, né isto! Então, podemos resolver este pequeno problema utilizando o Botão abrir e fechar Cbox, é fácil de colocar e não requer nem uma alteração no HTML.

Como colocar botão Abrir e Fechar Cbox no Blog

1º Passo: Acesse o painel de edição do seu Blog, clique na opção Layout >> depois em "adicione um novo Gadget" >> em seguida na opção "HTML/JavaScript".

2º Passo: Agora, copie e cole o código do Botão no HTML/JavaScripta:


<center><img style="width: 180px; height: 83px;" src="http://img411.imageshack.us/img411/3563/1zp2jhi.png" alt="Cbox" border="0" /></center><center style="font-style: normal;"><div class="smallfont" style="margin: 0px 0px 2px;"><input style="margin: 0px; padding: 0px; font-size: 15px; width: 180px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Esconder&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Abrir CBOX &#39;; }" value="Abrir CBOX " type="button" /></div><div class="alt2" style="margin: 0px; padding: 6px;"><div style="display: none; "><div style="text-align: left;"><span class="Apple-style-span" style="font-size:medium;"><span class="Apple-style-span" style="font-family:'trebuchet ms';"> 



3º Passo: Adicione o código da sua CBOX logo abaixo do código do botão, em seguida, finalize salvando o novo Gadget.

Prontinho, o botão já foi adicionado agora é só acessar seu blog e vê como ficou.

Alterando o Botão 

Caso você prefira alterar a imagem do botão, basta fazer as seguintes alterações mostrada logo abaixo:

Alterar a imagem do Botão

• Para alterar a imagem, substitua a parte destaca em cor "Azul" no código pela a URL da imagem. Exemplo: "http://img411.imageshack.us/img411/3563/1zp2jhi.png"

Ajustar a Imagem:

Se a sua imagem tem as medidas diferente da imagem que utilizamos, ajuste o código para o tamanho da nova imagem fazendo as seguinte alterações:  

• Largura: Altere o seguinte valo  width: 180px; 

• Altura: Altere esta parte height: 83px 

Altere a largura do Botão:

• Altere o valor destaca em vermelho:  width: 180px