[CSS] Dica Webdesigner - Ajudando nas novas postagens

Eu me vi várias vezes criando postagens e buscando as formatações de outros posts para o novo, abrindo páginas quando não me lembrava mais onde estavam os códigos, páginas que de vez em quando não eram as que eu queria (isso pode ser constrangedor para pessoas com internet lenta como eu).

Quando se escreve um blog com muito conteudo e poucas formatações, não é muito necessário se pensar muito no quesito velocidade, quantidade de códigos repetidos, dentre outros que interfiram na navegabilidade do seu trabalho, site ou blog seja lá qual for temos de sempre pensar em o melhor para o visitante e não para nós mesmos.

Com este pensamento resolvi criar um padrão para minhas formatações em
CSS e aprimorei de uns tempos para cá as minhas investidas.

Peço ajuda dos amigos que entendam do que estou escrevendo aqui, que comentem e alimentem este post, já que será de grande valia para muitos bloggers ou outros.

Dicas para Guardar suas formatações padrões:
Com o template definido, há várias formatações que serão usadas muitas vezes na maioria das postagens, nestas sugiro que:

1. crie um arquivo HTML e insira nele todo código CSS que tem no teu blog (apenas os que ficam no template ).
2. Faça cada formatação com o nome do código junto da formatação para cada bloco de código, ou seja desenhe-os para que possa vê-los com o respectivo nome de formatação.
3. Após finalizado, imprima a(s) folha(s) com os estilos já desenhados.

Este procedimento faz com que o seu trabalho na edição e formatação de design do seu blog ou site se torne muito mais rápido, quando se tem muitos códigos como referência, uma "mão na roda".

Mas quando se usa as formatações poucas vezes em poucas postagens sugiro que:

• Salve/imprima os códigos com ou sem a formatação "desenhada" para auxiliar na procura;
• SEMPRE, sempre mantenha os códigos de formatação nas postagens com o uso da tag <style> , isso faz com que o código rode apenas quando se está com a postagem carregada, ou seja, de que adianta um código CSS no teu template sem uso? Apenas a demora para carregar a página.

Não sei se repararam mas estou falando de css e não tenho nenhuma implementação de design aqui, justamente para mostrar que sem o css, o mundo não é nada... (ô bicho mentiroso)

Por enquanto é isso.
Alguma dica? Manda ai! Ajuda a implementar né?
Gostou? Comenta e manda pros teus amigos.
Um abraço!

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.

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.