Botões Expansíveis no Seu Blog

/**/ .texthidden {display:inline}.shown {display:block} /**/
/**/
.i2Style{
font:bold 12px Arial, Helvetica, sans-serif;
font-style:normal;
color:#fff;
background:#2288BB;/*Cor do fundo do Botão*/
border:0px solid #ffffff;
text-shadow:1px 1px 2px #333;
box-shadow:0px 0px 3px #000000;
-moz-box-shadow:0px 0px 3px #000000;
-webkit-box-shadow:0px 0px 3px #000000;
border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
-webkit-border-radius:8px 8px 8px 8px;
width:130px;
padding:8px 16px;
cursor:pointer;
margin:5px 5px 0px 5px;
}
.i2Style:active{
cursor:pointer;
position:relative;
top:2px;
}
.shown ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.shown li {
margin:5px 0; border-bottom:1px dotted #cccccc;
padding:0 0 2px 23px;
line-height:1.0em; list-style:none;
}
.shown li a {color:#5588aa;}
/**/
CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO Este hack é bem fácil e antigo.
Acho útil porque não exige um código javascript muito longo nem a necessidade de usar o JQuery para ser aplicado, além de ser bem simples.

Eu já havia postado sobre este hack aqui no TPV em 2008 indicando um post da minha colega Elke do Templates e Acessórios.
Mas resolvi fazer um post ensinando-o com mais detalhes para você entender melhor o que está fazendo em seu blog.

Utilizo este hack na página Links Úteis do meu outro blog o Farmacêutico Digital

Mesmo assim sugiro que antes de aplicar qualquer hack em seu blog SEMPRE faça o teste em um Blog de Testes.

É fácil, rápido e grátis ter um blog de testes. Assim você não corre o risco de ter problemas em seu blog principal, nem perder visitas.

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

1º Passo: Aplicar o Javascript dos Botões Expansíveis

Entre no seu blog: Vá em Modelo → Editar HTML

Se não souber como fazer:»Leia:Como Acessar o Editor de HTML do Blog e Ativar o Search

Copie o código Javascript e cole abaixo da tag do seu blog, ou seja, já deixe o código Java dentro do html do seu blog e quando quiser usar os botões expansíveis em gadgets HTML não precisará acrescentar esta parte dos códigos.
// document.write('