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&...)

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.

Alterar o title dos links de navegação (older e newer link)

Postagem redigida em 27 de Dezembro de 2009

Alguns links no blogger dão até medo de passar o mouse, tal como os links de navegação para postagens anterior e próxima.

Pensando nisto criei um script para retirar a monotonia dos links de navagação, um script simples de se implantar, quase tudo gerado automaticamente e com apenas uma modificação no HTML principal.

Vantagem:
A vantagem é a de o visitante "ler" para qual postagem ele vai se clicar no link, veja abaixo uma imagem com os links em ação:

Para o script funcionar corretamente você deverá de agora em diante dar nome às postagens (no titulo, em edição) corretamente, já que o script lê o endereço do blog para gerar o título (title em HTML), sempre pensando no script e claro, no visitante!

Vamos lá!

Insira seu URL como demostrado:

http://indiceblogger.blogspot.com

Apenas, sem barras, sem ano, sem mês, enfim apenas o endereço principal.

---

 

Copie o que está dentro da Box acima ^
Vá em editar HTML >
Cole dentro da TAG <header> e antes do fechamento </header>
Salve

MARQUE a caixa de "Expandir modelos de widgets" >
Localize as linhas de old-link e newer-link:

old:

<a class='blog-pager-older-link'

newer:

<a class='blog-pager-newer-link'

Insira este trecho nas linhas old e newer:

onmouseover='javascript:mostratitulo()'

resultado:

<a class='blog-pager-newer-link' onmouseover='javascript:mostratitulo()'

e

<a class='blog-pager-newer-link' onmouseover='javascript:mostratitulo()'

Visualize e salve

Log de correção e implantação:

• Corrigido os erros de implantação;
• Correção de código 'extra-source';
• Bug-Fix de páginas de pesquisa e iniciais (imagem).
1. Bug corrigido onde aparece apenas o texto principal do link em páginas de pesquisa no blogger.
2. Texto que aparecia antes da correção do bug.

Script para mostrar a data como calendário

Script para mostrar a data como calendário

Script para exibir a data como um calendário(imagem acima^, existem várias. A principal razão de se usá-lo é para usar apenas na primeira postagem, éretirado da segunda, em diante, entrada publicada no dia. Este script utiliza a hora secundária (clique aqui para saber mais).

Antes de executar os procedimentos a seguir salve seu modelo.

1. Modifique o Configurações > Formatação > Formato de data para Domingo, 7 de Junho de 2009

2. Vá em Layout > Editar HTML e expanda a caixa Expandir Modelos de Widgets.
3. Insira ou modifique o seguinte código CSS antes de ]] >< /b:skin >

.date {
width: 60px;
height: 68px;
padding: 0 10px 0 0;
float: left;
margin:0;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaOWikHQfbspDKXZHB9jtyzSRqkr0BoYinM_m-Mj2Mwug5eZm_aLYtbPgfsHOTDKi3iVKWxivSEz8oL3YMTt6vgdKIGJLz_vu-CHYpvnxaaQeEbgcsu_wHWjw3xnvRgYWY6oEpC4j86Us/s1600/date_button_template.gif') no-repeat;
}

.date_d {
    display:block;
    margin-top:5px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
    }

.date_m {
   display:block;
   margin:0;
   color: #fff;
   text-align:center;
   font-weight: bold;
   font-size: 16px;
   }

*”date” é o calendario, “date_d” é o día e “date_m” é o mes. Pode modificar os valores de acordo com as suas preferências e de sua imagem de fundo claro se souber CSS =).

4. Busca o seguinte código no seu modelo:

<div class='post hentry uncustomized-post-template'>

5. Insira o código

<div class='date'>
<script type='text/javascript'>
var timestamp = "<data:post.timestamp/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>

<div class='date_m'><script type='text/javascript'>document.write(date_mmm);</script></div>
<div class='date_d'><script type='text/javascript'>document.write(date_dd);</script></div>

</div>

* onde estiver com aspas duplas altere para: & quot; tudo junto
6. Salve.

Variantes

Se quiser colocar a data antes do mes na imagem apenas troque as div de lugar: date_d e depois date_m

Se quiser colocar o ano insira o código como mostrado a seguir com as modificações de data antes do mês:

<div class='date_d'><script type='text/javascript'>document.write(date_dd);</script></div>

<div class='date_m'><script type='text/javascript'>document.write(date_mmm);</script><script type='text/javascript'>document.write(date_yyyy);</script></div>

É isso ai aproveite!
Encontrou dúvidas? deixe sua questão.

Como utilizar textarea

Tutorial: como utilizar TextArea

O comando <textarea> no Html é muito utilizado para dar links em forma de texto ou colocar algum relatório ou texto com varios caracteres, tais como os regulamentos, declaração de privacidade, termos e outros assuntos do site.Aqui falarei um pouco para aquelas pessoas que não sabem utiliza-los,colocando algumas dicas de formatação em css e javascript.

Foi utilizado aqui algumas formatações:

Area de textoUtilize < e > para fazer as tags, </ e > para fecha-las.Usamos no exemplo: <textarea...> e </textarea>

Código

<textarea style="border-color:blue; background:#00441c; color:yellow;">Area de texto</textarea>

Em styleestamos definindo o tipo de stilo que é a linguagem CSS.border-color:blue; definimos a cor da borda azul em inglêsbackground:#00441c; definimos a cor de fundo esverdeado em código Hexadecimal.Em color:yellow; definimos a cor do texto amarelo em inglês.
Implemente com:

Rows='X'

Onde x equivale ao total de Linhas

Cols='X'

Onde x equivale ao total de Colunas

Colocando o select():

Iremos agora utilizar uma tecnologia muito usada que é o select(), que seleciona todo o conteúdo dentro da textarea.Passe o mouse sobre o textarea abaixo para ver o efeito.Area de texto

Código

<textarea onfocus="this.select()" onmouseover="this.focus()" style="border-color:blue; background:#00441c; color:yellow;">Area de texto</textarea>

Isto foi possivel apenas inserindo dois novos códigos:onfocus="this.select()" e onmouseover="this.focus()".

onmouseover="this.focus()":

onmouseover = quando o mouse estar em cima;this = (n)este;focus() = pegar foco;

onfocus="this.select()":

onfocus = quando pegar o foco;this = (n)este;select() = Selecionar.

Quando chamamos a instrução obtemos o foco do objeto que é o conteúdo da textarea e selecionamos.Agora é só copiar =D
*Observando que estes estilos em CSS e javascript podem ser utilizados para outras Tags.