Como criar uma área de texto expandível

Nesta postagem veremos como criar uma área de texto expandível, que é um trecho de texto oculto na postagem, que é mostrado ao ser clicado um link. Veja aqui um exemplo:

 

Lorem ipsum usu an fabellas senserit, wisi errem accommodare nec eu. Mel soleat sadipscing accommodare (ler mais)

at, quo tibique corpora te, mea ea saperet fabellas gloriatur. Ne duo menandri vituperata. Sensibus intellegat et nam.

Este efeito de texto é extremamente útil em postagens longas, com bastante texto, pois evita a sobrecarregação do visual em seu blog e permite que você ponha quanto texto quiser sem encher demais a página. Também é muito fácil de ser adicionado o efeito; basta prestar atenção às instruções dadas abaixo. Então, vamos por passos, para facilitar...

1. Como sempre, acesse o seu painel do Blogger. Vá para a página de edição Layout e a seguir para a sub-página Editar HTML.

2. Clique em Baixar Modelo Completo. Agora, busque nesta página (usando as teclas CTRL + F) o código </head> .

3. Depois de achado o </head>, cole exatamente em cima dele, o seguinte código:

<style>

.texto_oculto {
display:none;
}
.texto_mostrado
{display:inline;
}
</style>

<script type='text/Javascript'>
function expandir_texto (linkid) {var texto_expandivel = document.getElementById(linkid);if (texto_expandivel.className=='texto_mostrado') { texto_expandivel.className='texto_oculto';} else { texto_expandivel.className='texto_mostrado'; }}
</script>

4. Salve as alterações no template.

5. Agora, vá para a postagem onde você deseja aplicar o efeito e clique em Editar HTML que fica junto à Escrever. Cole na postagem o código a seguir:

Lorem ipsum usu an fabellas senserit, wisi errem accommodare nec eu. Mel soleat sadipscing accommodare <a href="javascript:expandir_texto('NOME_AQUI')">(ler mais)</a><div class="texto_oculto" id="NOME_AQUI">at, quo tibique corpora te, mea ea saperet fabellas gloriatur. Ne duo menandri vituperata. Sensibus intellegat et nam.</div>

E agora, preste bastante atenção, pois se você fizer algo errado aqui o código não irá funcionar.

Substitua o primeiro trecho do código que está mostrado em verde pelo texto normal, sem o efeito aplicado.

Substitua o segundo trecho em verde, (ler mais), pelo texto do link. Será este trecho que ativará a área expandível.

E agora troque o terceiro trecho mostrado em verde para todo o texto que ficará oculto, só sendo mostrado quando clicarem em (ler mais).

Finalmente, modifique o trecho em vermelho, NOME_AQUI, para o nome do elemento. Os dois trechos em vermelho devem ser iguais, e em maíusculas. Não dê espaço entre as palavras do nome, e sim utilize a underline. Agora você pode publicar a postagem e ver o efeito.

Nota - Não tente ver se o efeito está funcionando clicando em Visualizar, pois ele não funciona na visualização.

Como centralizar o cabeçalho

A postagem de hoje será bem curtinha. Vou mostrar como centralizar o texto do cabeçalho de acordo com o pedido de um leitor. Para fazer isto há um jeito muito simples que se consegue editando o HMTL do template. Então, faça o seguinte:

1. Após entrar em sua conta no Blogger entre na página Layout -- Editar HTML.
2. Busque este trecho de código: #header h1 { . (Use a busca de página com as teclas CTRL + F)
3. Logo abaixo deste código cole isto: text-align: center; .
4. O resultado ficará assim:
#header h1 {
text-align: center;
5. Salve as alterações e visualize o blog a seguir. Você verá o título de seu blog centralizado no cabeçalho, direitinho.

Abraços e bom final de semana! ;)

Como ocultar um elemento de página

Do mesmo modo que muitas vezes queremos ocultar a navbar do blogger (ver aqui), as vezes seria conveniente que pudessemos ocultar um simples elemento de página (ou gadget), que não mais queremos, mas que pode vir a ser útil depois. Para isso existe um meio muito fácil utilizando-se de códigos CSS. Vejamos como fazer isso em três passos simples.

Digamos que você quer ocultar o gadget de seu Perfil do blogger, na barra lateral. Proceda assim:

1. Vá para a página LAYOUT -- EDITAR HTML. Agora, procure pelo nome do gadget que você quer ocultar (no caso, o seu Perfil). Por exemplo, "Quem sou eu". Para procurar utilize as teclas CTRL+F e digite o nome, como mostrado na figura abaixo.
   
2. Você encontrará o título nesta linha: <b:widget id='Profile1' locked='false' title='Quem sou eu' type='Profile'/>. Então, copie o id do perfil; neste caso, como você vê, o id é Profile1.
3. Agora busque a tag ]]></b:skin> e cole imediatamente antes dela o código #Profile1 { display:none; }. O resultado ficará algo assim:
   
   Naturalmente, se o gadget a ser oculto for outro você deverá modificar o nome Profile1 para o ID do gadget que você deseja ocultar. Então, salve as alterações e confira o seu blog.

Para remover a barra de navegação do blogger (blogger navbar)

Opções para a barra de navegação - falta o botão EXCLUIR. Àqueles que não sabem, a Blogger Navbar, ou barra de navegação do Blogger, é aquela barrinha que aparece sobre o cabeçalho dos blogs (veja a figura abaixo), com um campo para pesquisa do blog, um link para o blogger e algumas outras opções.

A principal utilidade desta barra para os visitantes é que fornece o campo para pesquisa no blog; ora, o campo de pesquisa pode ser facilmente adaptado à barra lateral de seu blog e após isso a barra não tem grande utilidade. Na página ELEMENTOS DE PÁGINA da opção LAYOUT da edição de seu blog (ver imagens abaixo) você pode modificar o visual da barra escolhendo entre quatro opções; no entanto, não lhe é dado remover a barra, como nos outros elementos de página. O único modo de remover a barra é, portanto, pela edição de HTML. Para fazer isto, que é bem simples, vá para o painel de sua conta no blogger, entre na página LAYOUT de seu blog, acesse a sub-página EDITAR HMTL e busque a tag ]]></b:skin>⁽¹⁾ . Logo antes desta tag cole o seguinte código: #navbar { display:none; }. Procendendo-se corretamente o resultado será esse:

---

Imagens:

Barra de navegação na página ELEMENTOS DE PÁGINA.

Como achar uma tag na edição de HTML.