Retirar o "Leia Mais" das Páginas Estaticas

Depois que o Blogger implementou o recurso de Páginas Estáticas, muitas pessoas estão utilizando este novo recurso para criar postagens fixas no blog de forma bem simples.
Com a criação de páginas estáticas, temos a possibilidade de criarmos páginas fixas, sem data,que geralmente são usadas para: "contato", "sobre", "parcerias" etc.
Ocorre que algumas pessoas me consultaram por terem encontrado dificuldades em relação às Páginas Estáticas, quando utilizado o Hack "Leia Mais" de postagens resumidas automaticamente, no blog.
Por padrão, ao usarmos o Hack "Leia Mais", por se tratar de um script, o efeito se aplicará automaticamente à todas as postagens no blog, inclusive nas Páginas Estáticas.
Neste sentido, nas Páginas Estáticas, aparece apenas o Link do "Leia Mais", mas ao clicarmos nele, a postagem não irá se expandir.
Porém, existe uma maneira de "burlarmos" isso, fazendo com que o "Leia Mais" não se aplique e nem apareça nas Páginas Estáticas. Com isso você poderá continuar utilizando o seu Hack "leia mais" e suas paginas estáticas normalmente.
Desta forma, veremos neste artigo,como manter o Hack "Leia Mais" de resumo de postagens automático, simultâneamente às páginas estáticas, fazendo que o código consiga distinguir as Páginas Estáticas das demais páginas.

Publiquei um tutorial que explica como instalar o Hack "Leia Mais" de resumo automático.(Leia o tutorial para entender do que se trata)
No 2º passo do tutorial do Hack Leia Mais, note que existe um código onde você deverá fazer uma substituição.
Caso você já tenha seguido o tutorial anterior e já fez a substituição do código explicado no 2º passo, SUBSTITUA todo ele por este outro código contido neste arquivo.txt

Pronto, suas páginas estáticas já criadas não aparecerão com o link do "leia mais", pois este recurso não se aplicará às páginas estaticas.

ATENÇÃO: se você veio aplicar este efeito pela primeira vez, é necessário que você leia o artigo sobre o Hack 'Leia Mais' antes de prosseguir com este tutorial.

Continue Lendo»

A propriedade CCS Text

Continuando a série: Aprendendo CSS e HTML no Blogger, hoje vamos conhecer as A propriedade CSS Text.
A propriedade "Text" trata das transformações e atributos aplicados a textos.

Conhecer esta propriedade é peça chave na hora de estilizar ou editar seu layout no Blogger.

Neste artigo, serão discutidas as propriedades:
● text-ident
● text-align
● text-decoration
● text-transform
● letter-spacing
● word-spacing
● line-height

Text-ident:Indentação de texto

Esta propriedade permite que você aplique um recuo à primeira linha de um parágrafo, dentro de um elemento.
Os valores que podemos utilizar, são similares aos que utilizamos para imagens.
Exemplo:

seletor {text-indent: 30px;}

Utilizando a propriedade acima, o texto no elemento que você classificou, ficará assim:

Texto com recuo de 30px

Se quiser que seja aplicado à todos os paragrafos do post:

.post p {text-indent: 30px;}

Este efeito só aparecerá nos trechos que estiverem entre <p> e </p>

Text-align:Alinhamento de textos

Esta propriedade permite que os textos sejam alinhados à esquerda (text-align:left), à direita (text-align:right) ou no centro (text-align:center). E temos ainda o valor justify (text-align: justify), que permite o alinhamento justificado, que faz com que o texto contido em uma linha se estenda tocando as margens esquerda e direita.
Você pode aplicar esta propriedade no CSS do seu template, de forma que seja reconhecida e aplicada a todos os elementos aos quais você estipulou.
Exemplo:

.post h3 {text-align: center;}
.post-body {text-align: justify;}

No exemplo acima, os titulos das postagens se apresentarão alinhados ao centro, e no corpo dos posts, seus textos se apresentarão com alinhamento justificado.

Text-decoration:Decoração de textos

Esta propriedade permite adicionar ou retirar efeitos e decoração em textos, que podem ser: sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto etc.
Para a decoração do texto você pode atribuir as seguintes variaveis:

text-decoration: underline; ->sublinhado

text-decoration: line-through; ->Texto com linha em cima

text-decoration: overline; -> sobrelinhado

text-decoration: blink; -> pisca

text-decoration: none; -> sem decoração ou efeito

O Internet Explorer(maldito IEca!)e o Opera, não suportam a propriedade blink. Para que alguns efeitos sejam reconhecidos, pode-se aplicar propriedades específicas para cada uma delas, ajustando o valor true(verdadeiro) ou false(falso):

this.style.textDecorationNone='true | false';
this.style.textDecorationUnderline='true | false';
this.style.textDecorationOverline='true | false';
this.style.textDecorationLineThrough='true | false';
this.style.textDecorationBlink='true | false';

Text-transform:Transformação de textos

Esta propriedade permite transformações no formato caixa-alta ou caixa-baixa do texto.
Para utilizar a propriedade de transformação de textos, você pode atribuir as seguintes variaveis:
text-transform: none; -> sem efeito
text-transform: capitalize; -> Primeira Letra Das Palavras Maiúsculas
text-transform: uppercase; -> TODAS AS LETRAS MAIUSCULAS
text-transform: lowercase; -> todas letras minúsculas

A propriedade text-shadow, permite aplicação de sombras no texto, mas só é visivel em alguns navegadores. Sobre esta propriedade, leia este artigo.

letter-spacing:Espaço entre letras

Esta propriedade permite definir o espaço entre os caracteres, ou seja, altera o espaço entre as letras.
seletor {letter-spacing: valor;}
Exemplo:

Espaçamento entre letras

Aplicando espaçamento de 3px entre letras à todos os textos marcados com <p>

p {letter-spacing: 3px;}

Word-spacing:Espaço entre palavras

Esta propriedade serve para determinar a distância ou o espaçamento entre as palavras.
seletor {word-spacing: 20px;}
Exemplo:

Espaçamento entre palavras

line-height:Espaço entre palavras

Esta propriedade permite controlar o espaço que existe antes e depois de uma linha de texto, especificando a altura total de uma linha de texto.

seletor {line-height: valor;}

Exemplos:

Texto com line-height: 2px

Texto com line-height: 2px

Texto com line-height: 1.8em

Texto com line-height: 1.8em

Texto com line-height: 150%

Texto com line-height: 150%

Aplicando espaçamento de 3px entre linhas à todos os textos marcados com <p>

p {line-height: 3px;}

Continue Lendo»

Aplicar estilos às Páginas Estáticas

Desde que o Blogger implementou este recurso, muitos usuários passaram a utilizá-lo, porém, a grande maioria se depara com a dificuldade de fazer com que suas páginas estáticas se apresentem de forma diferente das demais páginas, já que, por padrão, as páginas estáticas se apresentam de forma semelhante às páginas de postagens.
A única diferença é que as páginas estáticas não aparecem a data, o que facilita ao usuários, já que a maioria, antes da ativação deste recurso, tinha que criar um post e fazer um macete colocando uma data bem antiga.
Infelizmente, ainda não há uma maneira "oficial" de aplicarmos estilos a elas, entretanto, podemos aplicar estilos CSS para que as páginas apresentem maior largura, sem sidebar, sem footer, ou o que você achar que não deva aparecer em suas páginas estáticas.
Neste tutorial você verá como proceder para deixar as suas páginas estáticas estilizadas de acordo com sua preferência.
Vale lembrar que, antes de mais nada, você deverá saber Como criar Páginas Estáticas no Blogger, para somente depois, aplicar os estilos.
É necessário também que você saiba a medida exata da largura que você quer que sua página estática tenha, caso queira que ela se apresente de forma mais larga, ocupando toda a área do #main-wrapper, por exemplo.

Vá em Layout >> Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e coloque-o antes de </head>

<!-- Estilos das páginas estáticas Inicio -->
<b:if cond='data:blog.pageType == "static_page"'>
<style>
.blog-pager, #blog-pager, .post-footer, .feed-links, .sidebar, #sidebar-wrapper,#comments, #footer-wrapper { display:none;}
#main-wrapper{width: 950px; float:none; margin: 0 auto;}
</style>
</b:if>
<!-- Estilos das páginas estáticas Fim -->

Entendendo o código:
No código acima, todos os elementos que se encontram na 1ª linha não aparecerão nas páginas estáticas. Tudo o que você quiser OCULTAR em suas páginas estáticas, deverá estar contido no código, as classes(#) ou id(.) e sempre separarando os elementos por vírgulas. O comando "display:none" serve para ocultarmos elementos.

Note que no código, as páginas estáticas se apresentarão da seguinte forma:
sem coluna sidebar(#sidebar-wrapper), sem links de navegação postagens antigas e recentes(.blog-pager,#blog-pager), sem links de feed ou postagens ATOM(.feed-links), sem coluna footer(#footer-wrapper), sem rodapé na postagem(.post-footer) e ocupará uma largura total de #main-wrapper(width: 950px)
Não esqueça que você deve editar a largura de acordo com a largura do seu template.

Caso queira, acrescente mais elementos para ficarem ocultos em suas páginas estáticas, de acordo com os elementos contidos em seu template, mas sempre incluindo-os na 1ª linha, separando cada elemento por vírgula.

O resultado pode ser visto no meu menu, basta clicar em "Sobre" ou "Tutoriais Blogger" e confira.

Continue Lendo»

Efeito Sombra nos Textos

A propriedade text-shadow nos permite criar sombras no texto, variando a posição e a cor da sombra.
O uso deste efeito é viável por estar funcionando em navegadores modernos, que aceitam os padrões de W3C.

A aplicação deste efeito em titulos e cabeçalhos é bem comum, e é o mesmo efeito que eu apliquei aos títulos dos posts, aqui no blog.
O único problema é que esta propriedade não está disponível em todos os navegadores.
Funciona perfeitamente no Firefox, Safari, Chrome e Opera.



Para o Internet Explorer existe um filtro que faz algo semelhante.
Exemplos:

filter:progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,strength=13, direction=310);}

filter:progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5); }

A propriedade text-shadow é muito simples e possui quatro parâmetros:
text-shadow: PositionX >> PositionY>> Efeito Blur>> Escala de cores.

seletor {text-shadow:2px 3px 8px #000;}

2px -> é a distância horizontal (X)
3px -> é a distância vertical (Y)
8px -> é o efeito Blur (efeito borrado)
#000 -> é a cor da Sombra

1. Aplicar o efeito diretamente no post:

Segue alguns exemplos para aplicação em textos e abaixo de cada exemplo o código referente.

Sombra Text-Shadow

Código:

<div style="background:#E6E6FA; color:#4682B4; text-shadow: 1px 1px 0px #000;">Texto Aqui</div>

Sombra Text-Shadow

Código:

<div style="background:#2E8B57; color:#000; text-shadow:-1px -1px 2px #ff0;">Texto Aqui</div>

Sombra Text-Shadow

Código:

<div style="background:#fff; color:#000; text-shadow:5px 5px 5px 000;">Texto Aqui</div>

Para aplicar o efeito em textos no post basta colar o código referente à propriedade, no corpo da postagem, através da aba "editar html".
(Edite distância e cores da sombra)

Código:

<div style="background:#xxx; color: #xxxxx; text-shadow: 2px 3px 4px #000;">Texto Aqui</div>

Faça testes e brinque com os efeitos e cores que você pode aplicar.

2. Aplicar o efeito no CSS do template:

Podemos também acrescentar o efeito à folha de estilo no template, para que seja aplicada
1º passo - Vá em Layout >> Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e cole-o ACIMA de ]]></b:skin>

.Sombra-text {
text-shadow: 2px 3px 4px #000; /*--- Edite  ---*/
color: # F0C2D1;  /*--- Edite cor ---*/
font-size: 30px;  /*--- Edite tamanho da fonte ---*/
}

2º passo - Sempre que quiser aplicar o efeito sombra em algum texto, no modo "Editar HTML" da postagem, acrescente a seguinte linha:

<p class="sombra-text">
Texto Aqui
</p>

3. Aplicar o efeito sombra nos Títulos dos Posts:

Procure no corpo do HTML do seu blog, o código de comando do Título do Post, que geralmente é .post h3 ou .post-title, dependendo do modelo do seu template.
E acrescente logo abaixo as seguintes linhas:

text-shadow: 2px 3px 4px #000; /*--- Edite  ---*/

DICA: Você também pode acrescentar este efeito no Título do Blog (cabeçalho), basta acrescentar a linha da propriedade text-shadow em "Header"

Se quiser que o Internet Explorer reconheça o efeito sombra no texto, você deverá acrescentar o filtro disponivel no início da postagem, editando os campos: color, direction e strength, de acordo com seu gosto.

Outro artigo interessante que trata sobre o assunto:
CSS Text-Shadow

Esse artigo é participante do "Movimento Blogs Unidos"

Imagem:Ajaxian
Referência:Red team design

Continue Lendo»

Bugs Recentes no Blogger

Desde o início da semana que tenho recebido alguns pedidos de ajuda referentes à alguns problemas que andam ocorrendo em alguns blogs, como :

- Quantidade de postagens na página inicial, que estavam dando erro e oscilando(algumas postagens simplesmente estavam desaparecendo da home);
- Erros na contagem de páginas a serem exibidas na página inicial;
- Dificuldades para acessar o editor de textos, impossibilitando a publicação de posts;
- Impossibilidade de movimentação de gadget em alguns navegadores.
- Erro na contagem dos comentários.

Alguns leitores me procuraram porque acreditavam que este problema era devido a instalação de alguns widgets.
Na verdade este problema afetou a vários usuários do Blogger e a razão disto é que desde o dia 18/02/2010 foi implementada, pela equipe do Blogger, uma limitação automática das páginas.
O objetivo principal desta implementação é melhorar o carregamento das páginas, tornando-as mais leves, ajustando dinamicamente o conteúdo enviado ao navegador dependendo da quantidade de HTML na página que está sendo solicitada (em kilobytes) e o número de imagens na página.
Essas mudanças estão afetando diretamente as páginas iniciais dos blogs, mais precisamente, na opção de poder limitar a quantidade de postagens a serem exibidas na home. Independente da configuração na quantidade de postagens que os usuários escolheram para que apareçam na página inicial, esta quantidade fica oscilando.
Portanto, não se desesperem, pois isto está ocorrendo com vários blogs, mas a equipe do Blogger já está buscando uma solução para o problema.

A recomendação dada no Fórum de ajuda do Blogger é que seja estipulada a quantidade de 10 postagens para a página inicial e que não utilizem muitas imagens ou widgets carregados demais, pelo menos até o problema ser solucionado.

Segue abaixo uma lista com alguns dos principais problemas relatados durante este período de mudanças, que você poderá acompanhar diretamente no Forúm Oficial do Blogger:
Problemas com o editor de postagens
Blog que desapareceu do painel de controle
Impossibilidade de movimentação de gadget em alguns navegadores
Erros na contagem de páginas a serem exibidas na página inicial

Agora nos resta aguardar, e ter paciência pois sabemos que a equipe do Blooger, tão logo solucionará estes problemas.
Recomendo que fiquem atentos aos tópicos no Fórum de ajuda do Blogger e no caso de ocorrência de mais algum problema, relatem no fórum para que seja analisado pela equipe Blogger e solucionado posteriormente.

ATUALIZAÇÃO (9/03/10):
O problema relacionado a publicação de postagens já foi solucionado pela equipe do Blogger.
Os demais problemas listados, ainda continuam a ocorrer, portanto, se você estiver com alguns destes problemas, informe a equipe do Blogger, diretamente no Forum de ajuda.

Continue Lendo»