Resumo de conteudo antes, depois ou alterar objeto pela propriedade innerHTML do JavaScript

Este tutorial vai ensinar como inserir um pequeno quadro com o resumo ou descrição da postagem ativa (visitante dentro da postagem).
Eu troquei uma parte do conteúdo (Acima do post) por um conteúdo de texto para saber exatamente o que irá conseguir quando concluir este tutorial, claro que esta modificação não se prende apenas àquela parte do template, podendo ser inserida onde bem entender.
É necessário um leve entendimento de HTML para localizar os campos.

A partir de agora, estarei implementando JAVASCRIPT em minhas explicações, alguns já viram algumas de minhas postagens incluindo cálculos internos de tamanho de texto, elementos dinâmicos entre outros.
Antes de mais nada, gostaria de salientar que não tenho todas as competências no JAVASCRIPT e, que tudo que eu postar envolvendo javascript foi testado.

Iniciaremos com um breve trecho de um livro chamado: "Curso de programação em Javascript e HTML dinâmico" - de Rafael Feitosa, que fala sobre a propriedade innerHTML que iremos usar como base:

"Outra propriedade muito útil para o DHTML é o innerHTML. Esta propriedade só existe em elementos que têm conteúdo (<div>, <span>, <td>, <p> são exemplos disto). Elementos como <img> ou <br> não tem conteúdo, deste modo, os objetos que os representam não possuem propriedade innerHTML.

O valor desta propriedade é o código HTML que está dentro do elemento representado pelo objeto. Se lermos o seu valor ficamos sabendo o conteúdo HTML do elemento, e se o modificarmos estaremos alterando o conteúdo do elemento."

Com esta definição temos como intuito a solicitação do conteúdo de um determinado elemento, neste exemplo que eu apliquei em meu próprio blog, percebe-se que eu utilizei como alvo um objeto do tipo <div> que nada mais é que uma divisão de área.

De acordo com o texto a solicitação visa a leitura e a alteração do objeto(no nosso caso <div>), neste tutorial é possível implementar a forma mais adequada, seja ela uma ou outra, vejamos:

Iniciaremos criando um gadget de html vazio, anotar o id no código HTML do gadget que foi criado no template e criar uma postagem para testes no teu próprio blog, para chegar ao meu exemplo neste blog;

Criar um gadget de html vazio:

Vá em Painel > Design > Elementos da página e selecione "Adicionar um Gadget"

e selecione HTML/JavaScript na tela que aparecer
Copie e cole em 'Conteúdo':
<span style='display:none;'></span>
Clique em "Salvar".

Posicione o mouse em cima do link de Editar do gadget que acabou de ser criado("HTML/JavaScript")
Em seguida anote o ID do elemento como na imagem (...&widgetId=Header1&...)
Pegando a ID do elemento
Se fosse como demostrado na imagem acima nossa id será Header1, mas no nosso caso pode variar.

Limite o objeto Header1 criado(Clique aqui para saber como, opção #1 de "Determinar Limitar"), para que Mostre apenas nas páginas de postagens;

Inserir o bloco de código Javascript em uma postagem:

Vá em Postagem > Nova postagem
Em seu código de postagem, ou seja, quando estiver escrevendo uma postagem, mude para o modo de edição html, insira o código JavaScript em qualquer parte da postagem:
<script type='text/javascript'>
<!--

-->
</script>
Entendendo o código:
A primeira linha mostra o inicio de um pequeno trecho de script, sendo texto e javascript como base;
A segunda linha delimita navegadores antigos a mostrarem seu conteúdo;
A terceira linha em branco, o código que utilizaremos será inserido;
A quarta linha fecha a delimitação;
A quinta linha finaliza o bloco de script.
Escolha o método de modificação e insira a propriedade innerHTML na 3ª linha:

Modificação completa do conteúdo:

document.getElementById("Header1").innerHTML = "<br/>Insira seu resumo, seu indice ou detalhes da postagem aqui<br/>";

Inserção antes do conteúdo:

var temp1 = document.getElementById("Header1").innerHTML;
document.getElementById("Header1").innerHTML = "<br/>Insira seu resumo, seu indice ou detalhes da postagem aqui<br/>";
document.getElementById("Header1").innerHTML += temp1;

Inserção após o conteúdo:

document.getElementById("Header1").innerHTML += "<br/>Insira seu resumo, seu indice ou detalhes da postagem aqui<br/>";

No meu caso foi utilizado o método de inserção (nº 1) que altera todo o conteúdo.
O HTML6 do código abaixo é o ID de um dos meus objetos ( o objeto que está acima do post ) desta página que neste caso é a [...]id="Header1">[...]
No meu caso o código final é este:

<script type='text/javascript'>
<!--
document.getElementById("HTML6").innerHTML = "<br/>Este texto é um exemplo de inserção da propriedade innerHTML do Javascript<br/> e este recurso pode ser <a href='http://indiceblogger.blogspot.com/2010/09/resumo-de-conteudo-antes-depois-ou.html'>conferido aqui</a>";
-->
</script>
Agora crie um resumo onde quiser, quando quiser, basta pegar o id do objeto e utilizar um dos métodos.
Toda vez que for criar uma postagem e querer que apareça o resumo ou indice utilize o mesmo código, apenas altere o que desejar.
Não esqueça de compartilhar este tutorial com seus amigos.
Caso encontre algum erro, queira fazer críticas ou elogios ou até contribuir com uma dica, deixe um comentário.

Caso queira mais notícias, novidades, tutoriais para personalizar seu blog, assine nosso RSS: http://feeds.feedburner.com/indiceblogger
Aguarde que você receberá todas as atualizações.

Share this

Related Posts

Previous
Next Post »

3 comentários

comentários
10/11/2010 13:36 delete

Olá!

Desculpa minha ignorância, mas mesmo usando esses exemplos não consegui o que queria...

Já uso um hack para colocar um resumo na página inicial e o link do "leia mais" (no meu caso "veja na íntegra), mas queria que na página principal eu pudesse escrever o texto do resumo ao invés do hack cortar de acordo com o número de caracteres..

Testei o 1º exemplo que citou, e na página principal até funcionou, mas aí quando entrava na postagem completa ela estava vazia...

O que estou fazendo de errado?


Muito obrigado!!

Reply
avatar
14/11/2010 23:26 delete

Barrabáz

O que pretende pelo que eu entendi, é inserir um outro texto no lugar do texto do teu template né?

Caso sim, vou ver o que posso fazer, já que envolve um pouco de mais de complexidade, do que havia escrito.

Caso seja outra coisa, favor re-escrever.

Vale também lembrar que no meu blog não funcionou, o que realmente eu queria, justamente por não ter pegado a limitação.
E, por motivos maiores(faculdade) não estou com tempo hábil para atualizar o blog como o de costume, porém assim que tiver tempo, com certeza estarei criando/melhorando e ajudando mais blogueiros... Espero que entenda.

No caso de mais alguma dúvida por favor envia ai.

ah, e quanto a sua ignorância: "Ninguém nasce sabendo", ou seja, melhor ser ignorante curioso, do que ser ignorante preguiçoso.
Um abraço.

Reply
avatar
28/11/2010 15:56 delete

Valeu Daniel!

O que eu tento fazer é colocar um texto resumido ("texto 1") na página principal e um outro texto ('texto 2") ao clicar no link da postagem..

Ainda não consegui.. rs

Reply
avatar

Todos os comentários serão moderados, aguarde a publicação.

Outros assuntos ou solicitações pessoais devem ser feitas por meio do formulário de contato.