quarta-feira, 8 de janeiro de 2014

Como colocar menu no blog

Os blogs são páginas extremamente dinâmicas, pois o conteúdo gira muito rápido, principalmente por causa do formato da interface: as publicações mais recentes aparecem no topo, escondendo as mais antigas.
Essa organização por vezes faz com que um post superinteressante seja deixado para trás e isso irrita profundamente qualquer dono de blog. Para resolver essa situação e aproveitar melhor o conteúdo da página, a inserção de um menu pode ajudar a deixar os textos principais em destaque e sempre à mão do leitor. Confira os passos deste tutorial para saber como fazer isso.

Utilize um menu para organizar o conteúdo do blog

1. Para começar, faça o login no Blogger e escolha o blog que você deseja alterar;
2. Acesse as opções adicionar do blog e selecione o item “Layout”;
Blogger: como criar um menu para o seu blog
3. Quando o layout da página for aberto, em várias partes dela aparece a opção “Adicionar um Gadget”. Escolha em qual desses lugares você quer colocar o menu e clique sobre a função indicada;
4. Ao fazer isso, o Blogger abre uma lista de gadgets para você inserir. Dentro da divisória “Noções básicas”, escolha o item “HTML/JavaScript”;
Blogger: como criar um menu para o seu blog
5. Assim que esse gadget for escolhido, uma tela de edições é aberta. No campo nomeado como “Conteúdo”, insira o seguinte código:
<div id=”menu”>
<ul>
<li><a href=”link1″ title=”titulo1″>Pessoal</a></li>
<li><a href=”link2″ title=”titulo2″>Telefonia</a></li>
<li><a href=”link3″ title=”titulo3″>Viagem</a></li>
<li><a href=”link4″ title=”titulo4″>Ensino</a></li>
<li><a href=”link5″ title=”titulo5″>Barbadas</a></li>
</ul>
</div>
6. Onde está escrito “link 1”, “link 2” e assim por diante, coloque o endereço da página ou do post que você quer linkar. Após “título 1”, onde está escrito “>Pessoal<” neste caso, digite o nome que o menu vai receber. Para este tutorial, colocamos o título “Tecnologia” para servir como exemplo, mas você pode utilizar o qual quiser;
Blogger: como criar um menu para o seu blog
7. Ao terminar as edições, clique em “Salvar”. Quando você for redirecionado novamente para a página do Blogger, clique em “Salvar organização” para que as mudanças sejam aplicadas no blog;
Blogger: como criar um menu para o seu blog
8. A partir de então, é possível visualizar um novo menu na página do seu blog. Utilize-o para organizar melhor o conteúdo da página e para dar destaque maior aos posts que você considera mais importantes.
Blogger: como criar um menu para o seu blogAmplia

terça-feira, 7 de janeiro de 2014

Botão imput: Mostrar/Ocultar texto

Se seu texto estiver muito grande e não há jeito de resumi-lo, coloque um botão que esconde o texto, ou qualquer conteúdo. Clicando nele o texto se abre.

Demonstração:

<div class="pre-spoiler">
<input id="xs" value="Leia Mais" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Abrir Texto ';}" type="button"> </div>
<div>
<div class="spoiler" style="display: none;">
Seu conteúdo escondido vem aqui!</div>
</div>
Coloque este código em um gadget de HTML/JAVASCRIPT, ou no HTML da postagem.
A parte em vermelho do código representa o conteúdo que ficará escondido e depois será mostrado.
Em roxo, é o texto do botão enquanto o conteúdo ainda não foi aberto. 
Em verde, é o texto do botão para esconder o texto enquanto ele estiver aberto.
Em azul, é o texto do botão quando o conteúdo está escondido e já foi aberto