[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.

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.

Guia de Referência HTML e XHTML

Comforme pedido de um dos visitantes deste blog propôs, estou aqui publicando referente aos documentos que possuo um Guia de Referência em HTML, com as principais TAGS e Estruturas básicas, que no dia-a-dia precisamos para editar quaisquer tipo de código, sendo referência em outras linguagens, tais como:

• Inicio de Aprendizado no CSS, Javascript, XHTML;
• Inicio de tantas outras linguagens de programação para a WEB.

Indice:

Template básico
CSS media
Tipos de META
Listas
Sintaxes
Geral
Links
Estrutura
Frames
HEAD
Tabela: tags
Listagem
FORM - Formulários
Carcteres Especiais mais utiliado
Tabela: Template
Tipos de input

---

Legendas:
/ = Barra de fechamento de tags
tag = nome da tag
atributo = nome do atributo a ser inserido
? = atributo a ser inserido
* = Em HTML não é necessário fecha-lo
* = Em XHTML pode-se fechar com uma barra dentro da mesma Tag: />

Template: Este é um template básico de construção de qualquer site.

Para o Índice

<html>
<head>
<title></title>
Meta tags...
CSS...
Javascript...
</head>
<body>
Conteúdo da página
</body>
</html>

CSS Media

Para o Índice

all
handheld
print
projection
screen

Tipos de META

Para o Índice

http-equiv
name

Listas

Para o Índice <ol>
<li>
</li>
</ol>
<ul>
<li>
</li>
</ul>

Sintaxes do HTML e XHTML, vale lembrar que o blogger utiliza o padrão XHTML, que fecha obrigatóriamente as Tags

Para o Índice

Básico - Isto é uma demostração de como inserir as tags no seu documento

HTML: <tag></tag>
XHTML: <tag></tag>

Com Atributos:

HTML: <tag atributo="?"> ou <tag atributo="?">conteúdo</tag>
XHTML: <tag atributo="?"/> ** ou <tag atributo="?">conteúdo</tag>, no XHTML este segundo método é usado apenas nas tags que contenham conteúdo.

**Existe uma pequena diferença nos dois observe que no HTML as tags não são obrigatóriamente fechadas como no caso do XHTML que é feito o fechamento das tags, dá mais trabalho, mas compensa, pois os navegadores gastam tempo procurando fechamento de tags.

Geral

Para o Índice <body> Parte visível da página
<head> Parte não visível da página
<html> Cria uma página HTML
<title>Dá título à página

Links

Para o Índice <img src="URL">* Mostra uma imagem
<a href="#?">Link para uma âncora na página
<a href="URL">Link para outra página
<a href="URL#?">Link para uma âncora em outra página
<a href="mailto: EMAIL">Link de email

Estrutura

Para o Índice

<br>* Break Row - Quebra de linha
<code>Listagem de código
<div> Estrutura de formato ou bloco de texto
<hr> Linha horizontal
<p> Parágrafo
<pre> Texto pré-formatado
<span> Formatação in-line
<strong> ou <b> Texto em negrito
<sub> Texto em _Subescrito

<sup> Texto em ^Sobreescrito
<em> Texto em itálico
<h1>..<h6>Cabeçalhos da página de h1 à h6

FRAMES

Para o Índice <frame> Define um Frame simples
<frameset>Documento Frame, documento HTML com alguns frames
<iframe> Frame in-line, pode-se colocar em qualquer local da página

HEAD - Cabeçalho

Para o Índice

<link rel="stylesheet" href="?" type="text/css">* CSS externo onde ? significa URL da CSS
<script language="Javascript" type="text/javascript"> Javascript in-line
<script src="?" type="text/javascript">* Javascript externo
<style type="text/css"> Declaração de Stilo em CSS
<meta http-equiv="content-type" content="?"; charset="?">* Informação Meta-Tag

Tabela - Tags

Para o Índice <caption> Capitulo da Tabela
<table> Define uma Tabela
<tbody> Corpo do elemento <table>, o mesmo que<body> em <html>
<tfoot> Rodapé da tabela
<thead> Seção de cabeçalho da tabela
<tr> Insere uma linha
<th> Celulas do cabeçalho
<th colspan=”?”> ? = Número de colunas usado pela célula de cabeçalho
<td> Insere uma Célula
<td colspan=”?”> ? = Número de colunas usado pela célula
<td rowspan=”?”> ? = Número de linhas usado pela célula

Listagem

Para o Índice<dd> Definição
<dl> Lista de definição
<dt> Termo de definição
<ol> Lista ordenada
<ul> Lista não-ordenada

<li> Item em uma lista

FORM - Formulários

Para o Índice <form> Define um formulário
<fieldset> Grupo de formulários relativos
<option>Item de menu em uma caixa de seleção
<select> Menu Drop-Down
<textarea>Área de texto, multi linha
<input type="?">* Elemento do formulário

Caracteres especiais mais utilizados

Para o Índice&nbsp; Spaço em branco, equivale a um "SPACE"
&quot; Aspas "
&amp; "E" comercial &
&lt; Maior >
&gt; Menor <

Tabela - Template

Para o Índice <table>
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
</td>
</tr>
</tfoot>
</table>

Template de tabela com todas as seções incluidas: Cabeçalho <thead>, Corpo <tbody> e Rodapé <tfooter>

Tipos de Input

Para o Índice Estes comando são utilizados em <input type="AQUI">

button
checkbox
file
hidden
image
password
radio
reset
submit
text

Bom Chego ao fim deste guia e agradeço caso encontrem algum erro, mandem um comentário sobre o mesmo.
Logo, Guia de Caracteres especiais...
Aproveitem e assinem o nosso FEED http://feeds.feedburner.com/indiceblogger

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.