Gothic Darkness

Retirar o "Leia Mais" das Páginas Estaticas

noreply@blogger.com (Gothic Darkness) — Mon, 08 Mar 2010 23:35:00 +0000

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.

A propriedade CCS Text

noreply@blogger.com (Gothic Darkness) — Sun, 07 Mar 2010 15:12:00 +0000

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: 1.8em

Texto com line-height: 150%

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

p {line-height: 3px;}

Aplicar estilos às Páginas Estáticas

noreply@blogger.com (Gothic Darkness) — Sat, 06 Mar 2010 12:30:00 +0000

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.

Efeito Sombra nos Textos

noreply@blogger.com (Gothic Darkness) — Tue, 02 Mar 2010 03:05:00 +0000

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

Bugs Recentes no Blogger

noreply@blogger.com (Gothic Darkness) — Wed, 24 Feb 2010 18:51:00 +0000

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.

Topsy - Botões de Retweet Editáveis

noreply@blogger.com (Gothic Darkness) — Wed, 24 Feb 2010 18:00:00 +0000

Há um tempo atrás, eu publiquei um artigo com um tutorial que explica como Colocar Botão Retweet no Blog.
Hoje irei mostrar uma outra opção de botão, o Topsy.

Opções de Cores dos botões

A ferramenta Topsy oferece diversos modelos de botões com outras opções de cores, e o mais legal, é que com esta ferramenta, você pode enviar seus posts ao Twitter mais de uma vez (diferente do TweetMeme que permite apenas 1 envio por usuário), bem como a variedade de cores dos botões oferecida pelo site, dando a opção de escolha de botão nas cores que mais lhe agrada e que mais combina com as cores de seu blog.

A @Lu me indagou se havia outras opções de cores para o botão do TweetMeme, resolvi pesquisar e acabei conhecendo a ferramenta do Topsy.
Depois que conheci esta ferramenta, efetuei logo a mudança( que vocês já podem conferir aqui na parte superior, abaixo do titulo deste post).

O processo de instalação é simples, e você pode confeirir os modelos disponíveis aqui nesta página.

Vou ensinar aqui, como configurar o código do botão compacto ou completo, disponibilizado pelo site, mostrando as partes que você deverá alterar, de acordo com a cor e modelo que você escolher.

Botão Completo:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float: right; margin-left: 1em;">
<script type="text/javascript">
var topsy_nick = "SEU-NOME-DE-USUARIO-NO-TWITTER";
var topsy_theme = "blue";
var topsy_style = "big";</script>
<script src="http://cdn.topsy.com/button.js" type="text/javascript">
</script>
</div>
</b:if>

Botão Compacto:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float: right; margin-left: 1em;">
<script type="text/javascript">
var topsy_nick = "SEU-NOME-DE-USUARIO-NO-TWITTER";
var topsy_theme = "blue";
var topsy_style = "small";</script>
<script src="http://cdn.topsy.com/button.js" type="text/javascript">
</script>
</div>
</b:if>

Editando o código, personalizando cores e tamanho do botão:

Nos 2 códigos postados acima, usei o botão na cor azul, para exemplificar, mas você pode escolher umas das cores disponibilizadas pelo Topsy.
Veja as mudanças que você pode fazer no código(Não retire as aspas no código):

var topsy_nick = "SEU-NOME-DE-USUARIO-NO-TWITTER" :
coloque o seu nome de usuário no twitter no local indicado.

var topsy_theme = "blue" :
Onde está escrito blue coloque o nome referente a cor que você escolheu, disponivel no site.

var topsy_style:
Small -> é o código referente ao botão compacto.
Big -> é o código referente ao botão completo.

No código fornecido acima o botão aparecerá apenas nas páginas internas(página dos posts).

Exemplo: Veja como ficaria o código completo do botão na cor Mostarda:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float: right; margin-left: 1em;">
<script type="text/javascript">
var topsy_nick = "gothicdarkness";
var topsy_theme = "mustard";
var topsy_style = "big";</script>
<script src="http://cdn.topsy.com/button.js" type="text/javascript">
</script>
</div>
</b:if>

DICA:Caso você queira que seu botão fique à esquerda, basta substituir float:right por float:left, no código.

Onde instalar o código:

Agora que você já escolheu e já configurou o seu botão, veja neste post as opções de local mais adequado para colar o código.

Outros artigos interessantes que tratam sobre o assunto:
Como saber se meu blog está sendo comentado no Twitter?

Esse artigo é participante do "Movimento Blogs Unidos"

Momentos Noturnos - Obra sobre Vampiros

noreply@blogger.com (Gothic Darkness) — Tue, 23 Feb 2010 18:30:00 +0000

• Momentos Noturnos - O sentimento dos vampiros, de Adriano Siqueira.
É uma coletânia disponilibizada gratuitamente para colecionadores e para quem aprecia textos deste gênero. A maioria é sobre mulheres vampiras e sobre o obscuro pensamento dos Vampiros.
Momentos Noturnos é uma obra para que o leitor conheça mais o romance dos vampiros, o estilo de escrita e também os sentimentos que os vampiros têm com os mortais e os seus irmãos.
São 98 páginas de poemas, poesias e prosas, produzidas desde 2001.

Arquivo tipo: pdf 2.8mb

Um pouco sobre o autor:
Adriano Siqueira escreve histórias contos e poemas sobre vampiros, é um dos escritores do livro "Amor Vampiro", participou do livro "DRACULEA, o livro secreto dos vampiros" e "METAMORFOSE - A fúria dos Lobisomens", também é criador do fanzine "Adorável Noite" sobre contos de terror e vampiros.
Em seu site Adorável Noite e em todas as suas obras, aborda temas voltados a Vampiros e Terror.

Confira também um conto de terror , para ouvir, sobre vampiros produzido e narrado por Adriano Siqueira, em Contos de Vampiros - Vitória.

Imagens Deslizantes com JQuery Slider

noreply@blogger.com (Gothic Darkness) — Tue, 23 Feb 2010 10:24:00 +0000

Em outro artigo publicado, você já viu Como Instalar um Slide no Blog.
Agora neste tutorial você aprenderá um outro modelo de Slider usando o JQuery.
Para aplicação, é necessário usar HTML, CSS e Javascript.
Clicando na imagem abaixo você pode ver um exemplo deste efeito em funcionamento.

(Clique na imagem)

Para instalar este Slider,siga os passos a seguir:

1.Instalar o arquivo Javascript:

Vá em "Editar HTML" e procure pela tag </head>
e cole logo ACIMA dela o conteúdo deste arquivo.txt.
Salve as modificações!

2.Aplicar estilos ao Slide:

Agora volte em Layout >> Editar HTML , e procure pela tag ]]></b:skin>
e cole ANTES dela:


/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:289px; /*-- as imagens devem ter a mesma altura ou mais-- */
width: 800px;  /*-- as imagens devem ter a mesma largura ou mais-- */
border:1px solid #610000;
overflow: hidden;
position: relative;
}

.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -1px;
width: 220px; height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
background:url(http://4.bp.blogspot.com/_q4j3j-JA2ro/S0TDw0n697I/AAAAAAAANBw/XhlF84popQU/s000/transparencia.png);
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topleft: 15px;
border:1px solid #000;
display: none;
}
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background: #000;
border: 1px solid #000;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a.active {
font-weight: bold;
border: 1px solid #000;
color: #fff;
background: #920000;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a:hover {font-weight: bold;}

Salve!

3.Editando cores de fundo, bordas, altura e largura do Slide:

Em .window , edite os valores de height(altura) e widht (largura) total do seu slide. Personalize de acordo com o tamanho de seu template (Coloque o mesmo valor para largura que possuir a sua Header)
Lembrando que as imagens utilizadas devem ter a mesma largura ou mais!

Edite as cores de bordas em "border".
Edite cor de fundo em "background".

Em .paging , onde está background:url(http://4.bp.blogspot.com/_q4j3j-JA2ro/S0TDw0n697I/AAAAAAAANBw/XhlF84popQU/s000/transparencia.png), eu usei uma imagem como exemplo, mas você pode trocar por uma imagem de sua preferência, basta alterar a url (endereço) de sua imagem.

4.Escolhendo local que ficará o slide:

Agora escolha o local onde quer posicionar o seu slide.
Um excelente local é em crosscol, que fica logo abaixo do cabeçalho.
Mas para instalar seu slide abaixo do cabeçalho, você deverá verificar se no seu template a div crosscol está visivel. Caso não esteja, é necessário que você habilite-a no seu template.
Veremos como fazer isso, a seguir.

Vá na edição HTML do seu blog, NÃO marque "Expandir Modelos de Widgets" e procure por:


<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

onde está showaddelement='no' , troque por showaddelement='yes'
e salve!

Caso não tenha este trecho no seu template, basta acrescenta-lo, abaixo de
<div id='content-wrapper'>

Agora vá para a aba "Layout".Em crosscol(abaixo do cabeçalho), clique em "adicionar um gadget", escolha o modo HTML/javascript e cole o seguinte código:


<div class="main_view">

<div class="window">
<div class="image_reel">
<img src="url-imagem-1" alt="" />
<img src="url-imagem-2" alt="" />
<img src="url-imagem-3" alt="" />
<img src="url-imagem-4" alt="" />
</div>
</div>
<div class="paging">

<a href="insira-seu-link-1" rel="1">1</a>
<a href="insira-seu-link-2" rel="2">2</a>
<a href="insira-seu-link-3" rel="3">3</a>
<a href="insira-seu-link-4" rel="4">4</a>
</div>
</div>

Para fazer com que a numeração que aparece no slide funcione como um menu que redirecione para determinada postagem, você poderá, basta inserir a url da sua postagem onde está "insira-seu-link".

Se você quiser inserir um link diretamente nas imagens, basta inserir
<a href="link-para-imagem-1"> antes de <img src="url-imagem-1" alt="" />
devendo ficar assim:


<a href="url-link-para-imagem-1"><img src="endereço-imagem-1" alt="" /></a>

Lembrando que, a funcionalidade deste script pode variar de acordo com o template.
Templates que possuem muitos scripts, acabam gerando "conflitos" entre si, por isso alguns arquivos javascript dão erro pra alguns, mas funcionam perfeitamente para outros.
Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários.
Se quiser, dê uma lida nesta dica e veja como melhorar o carregamento do seu blog.
Só ative este recurso se você não estiver usando nenhum outro efeito com scriptaculous ou prototype, pois quando usados juntamente com o JQuery, no mesmo template, entram em conflito.

Wallpapers Vampire

noreply@blogger.com (Gothic Darkness) — Sat, 20 Feb 2010 01:40:00 +0000

Aqui você encontra diversas Imagens de Vampiros.

((Clique na imagem para ampliá-la))

Icones para Google Buzz

noreply@blogger.com (Gothic Darkness) — Thu, 18 Feb 2010 20:01:00 +0000

Confira alguns pacotes de ícones do Google Buzz, já disponíveis para Download, e encremente seu botão para que seus leitores compartilhem os links de suas postagens no Google Buzz.

Clique na imagem que ela o levará até o link onde você pode fazer o download.

Se você ainda não sabe como instalar um Botão para compartilhar suas postagens no Google Buzz, siga este tutorial e veja como proceder.

Botão Compartilhar post no Google Buzz

noreply@blogger.com (Gothic Darkness) — Thu, 18 Feb 2010 00:00:00 +0000

Vocês já viram um artigo sobre o Google Buzz, a nova rede social lançada essa semana pelo Google, e já devem ter verificado que este serviço está virando a nova sensação da internet, principalmente após a divulgação de suas estatísticas pelo Google, de que 9 milhões de mensagens foram enviadas nos 2 primeiros dias de lançamento da ferramenta.
É sempre bom experimentar coisas novas, como diversas redes sociais, ao mesmo tempo, principalmente porque nunca sabe qual delas pode trazer uma grande onda de tráfego para o seu blog, ainda mais quando possibilita "divulgar links do seu blog".

Para facilitar o envio dos links de seus artigos publicados, disponibilizo um tutorial onde você verá como adicionar um botão no seu blog possibilitando que seus leitores enviem os links de suas postagens para o Google Buzz, apenas com um clique.
Primeiro foi o Twitter, depois o orkut e o Facebook, agora trataremos do "Google Buzz it".
Veja como adicionar o botão para compartilhar seus posts no Google Buzz.
Segue abaixo 3 modelos de botões para você escolher:

1. Opções de botões:

Código do botão modelo 1 (horizontal):

<b:if cond='data:blog.pageType == "item"'>
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + "&amp;srcTitle=" + data:blog.title' target='_blank'>
<img alt='Buzz It' src='http://lh3.ggpht.com/_UCfxgWHzU98/S3pB0AboouI/AAAAAAAAB-Y/rP0OgM9IbnI/google-buzz-icon-for-blogger-1.png'/></a></b:if>

Código do botão modelo 2 (vertical):


<b:if cond='data:blog.pageType == "item"'>
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + "&amp;srcTitle=" + data:blog.title' target='_blank'>
<img alt='Buzz It' src='http://lh4.ggpht.com/_UCfxgWHzU98/S3pB0AwtcoI/AAAAAAAAB-c/LHRjgQRDGh0/google-buzz-icon-for-blogger-2.png'/></a>
</b:if>

Código do botão modelo 3 (mini):
Buzz it !


<b:if cond='data:blog.pageType == "item"'>
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + "&amp;srcTitle=" + data:blog.title' target='_blank'>
<img alt='Buzz' src='http://lh5.ggpht.com/_UCfxgWHzU98/S3ovWRmlGxI/AAAAAAAAB98/3MLxoWA9qsU/Google%20Buzz%20small.png' style='vertical-align: middle;'/> Buzz it !</a>
</b:if>

DICA:
Caso você queira posicionar seu botão (á direita ou à esquerda), veja como proceder:

Botão à direita -> acrescente a seguinte linha ao início do código do botão:

<div style="float:right;padding:4px;">

e acrescente </div> antes de </b:if>
Botão à esquerda -> basta substituir float:right por float:left.

2. Instalando o Botão:

Agora que você já escolheu o botão que mais lhe agrada,veja neste post as opções de local mais adequado para colar o código.

Eu recomendo que você salve em seu pc a imagem utilizada no seu botão e hospede-a no site de sua preferência, e depois troque ,no código, o endereço (url) da imagem, para evitar algum eventual problema de excesso na hospedagem.

Aproveite e Siga o Gothic Darkness no Google Buzz!

Atualizações do Google Buzz na Sidebar

noreply@blogger.com (Gothic Darkness) — Wed, 17 Feb 2010 03:59:00 +0000

Encontrei uma dica muito legal, onde você pode exibir em tempo real, os seus ultimos Buzz e de seus amigos.
Trata-se de um widget criado por BuzzCounter.net ,que instalado em seu blog, permite que todas as atualizações recentes do Google Buzz, apareçam automaticamente na sua sidebar, igual ao que ocorre com as atualizações do twitter, que você já conferiu neste post.

Neste Widget, aparece o seu perfil/avatar do Google Buzz no topo, e todas as mensagens que você e seus amigos enviaram no dia.

Se você quiser inclui-lo em seu blog, vá até 'Layout' → 'Elementos de página' → Clique em 'Adicionar um elemento de página'→ Escolha tipo 'HTML/Javascript'.

Copie e cole o código abaixo:

<div id="buzzwidget"><script type="text/javascript"> if (typeof jQuery == 'undefined') { document.write('<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>'); }</script>
<script type="text/javascript" language="javascript" src="http://www.buzzcounter.net/widget/SEU-NOME-DE-USUARIO-DO-GOOGLE-BUZZ"></script>
<script type="text/javascript">$.Widget.get();</script>
<div id="buzzwidget-footer"><a id="buzz-logo" href="http://buzz.google.com/">Google Buzz</a><a id="buzzcounter-logo" href="http://www.buzzcounter.net/">Buzzcouner.net</a></div></div>
<script type="text/javascript">$.Widget.set();</script>

Não esqueça de incluir no código o seu nome de usuário cadastrado no Google Buzz, no local indicado, caso contrário não funcionará. Se tiver dificuldades a respeito, leia este artigo e veja o tópico que explica como Configurar o perfil do Google Buzz.

Se preferir, configure este widget diretamente no site do autor.

Veja DEMO.
(Confira o item na sidebar "Atualização do Google Buzz na Sidebar)

Aproveite e compartilhe este artigo:
Siga o Gothic Darkness no Google Buzz!

Referência:BuzzCounter

Esse artigo faz parte do "Movimento Blogs Unidos"!

Google Buzz: Sua Rede Social no Gmail

noreply@blogger.com (Gothic Darkness) — Tue, 16 Feb 2010 00:48:00 +0000

O Google lançou, nesta semana, a sua mais nova Rede Social, o Google Buzz.
Trata-se de uma rede social integrada ao Gmail com o objetivo de maior interação entre pessoas nas redes sociais, pois permite que os usuários integrem as atualizações do Twitter, Blogger, Flick, Facebook, Picasa, Youtube etc.
No Google Buzz, você pode incorporar todas as suas postagens no blog, enviando-as para a caixa do Buzz.
Esta nova rede social permite que os seus usuários sigam outros usuários (assim como no Twitter) afim de acompanhar as atualizações, em tempo real, enviadas nas demais redes sociais, pois aceita "links" de outras redes sociais.
O Google Buzz na versão "mobile" promete ser revolucionário, por ter recursos de Geolocalização, integrados a nova versão do Maps, para dispositivos móveis.

Como ativar o Google Buzz:

Qualquer pessoas pode acessar seu Google Buzz atráves de sua conta do Gmail.
Se você ainda não tem o Google Buzz, acesse sua conta do Gmail que você será redirecionado a uma página de apresentação deste serviço:

Se ainda não estiver aparecendo a opção de ativação do serviço, entre nesta página e tente ativá-lo.
Caso você opte por usar o serviço, a configuração é automática.

Após a ativação do serviço, ao clicar em "criar mensagem", você verá uma janela onde poderá criar ou editar seu perfil (alterar foto ou nome ), escolher usuários aos quais você queira seguir, confirmar seus seguidores e inclusive escolher se quer restringir suas mensagens apenas para seus grupos ou seguidores, ou se prefere que elas sejam públicas.

Aproveite e Siga o Gothic Darkness no Google Buzz!

Inserindo links para divulgar no seu perfil do Google Buzz:

O próprio Google encontra algumas das suas páginas públicas que você pode adicionar ao seu perfil.
Caso você queira que alguns destes links fiquem disponiveis para visualização em seu perfil, basta clicar em "adicionar" ao lado de cada link. O link será direcionado para o painel "Meus Links" que fica ao lado, tornando-os visíveis a todos que acessarem seu perfil.
Se quiser adicionar mais links, em "Adicionar links personalizados ao meu perfil", insira a url e o nome dos seus links e clique em "adicionar".
Clique em "Salvar alterações".

Configurando seu perfil no Google Buzz:

Para acessar seu Google Buzz, basta entrar em sua conta Gmail, e clicar no icone do "Buzz" que aparece logo abaixo de "entrada".
No painel, clique no seu nome, depois clique em "Perfil do Google" e lá insira suas informações ou edite-as.

Por padrão, a url (endereço) do seu perfil se apresenta com uma numeração, mas você pode alterar essa sequência numérica para seu nome de usuário.
Na aba do "Buzz", ao lado do seu nome, clique em "editar".
Na parte final da página, em "URL do perfil", altere a URL do perfil pelo seu nome de usuário e salve as alterações.

Maiores informações a respeito do Google Buzz, leia o tutorial de utilização criado pelo Gmail, e veja Como usar o Google Buzz e assista ao video explicativo logo abaixo:

Se você ativou o serviço, mas não quer mais utilizá-lo, basta clicar em "Desativar Buzz" no final da página em sua conta do Gmail.

Se quiser conhecer mais sobre o Google Buzz, veja alguns artigos interessantes sobre o assunto:
O que é e como utilizar o Google Buzz
Como utilizar o Google Buzz?
Google Buzz - Como retirar os emails da caixa de entrada

Esse artigo faz parte do "Movimento Blogs Unidos"!

Compartilhe seus posts no Facebook

noreply@blogger.com (Gothic Darkness) — Sat, 13 Feb 2010 01:30:00 +0000

Você já aprendeu como Colocar Botão Retweet no Blog para que seus leitores compartilhem suas postagens no Twitter, já aprendeu também a colocar um Botão "Enviar postagem para o orkut, para que seus posts sejam divulgados no orkut.
Hoje você verá como instalar um botão para que seus posts sejam divulgados em outra rede social muito importante, o Facebook.
Para quem usa o Facebook já sabe que, além de você criar um perfil, também é possível criar um espaço para seu blog e divulgar seus links por lá.
Existem vários modelos de botões disponíveis, e possuem uma contagem que mostra a quantidade de vezes que alguém enviou seu link para lá(igual ao Retweet).
A instalação desse widget seguirá os mesmos procedimentos que utilizamos na instalação do botão para o Retweet:
1º - escolher o modelo do botão
2º - escolher o local mais adequado para instalar o botão.

1. Opções de botões:

Opção 1:Versão Completa (botão à esquerda do post)

Código:


<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Opção 2: Versão compacta (botão à esquerda do post)

Código:

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

DICA:Caso você queira que seu botão fique à direita, basta substituir float:left por float:right, no codigo.

Instalando o Botão:

Agora que você já escolheu o botão que mais lhe agrada, vá em 'Layout ->Editar HTML' -> marque a caixinha 'Expandir modelo de Widgets' e procure pelo código abaixo:

<div class='post-header-line-1'/>

e cole o código referente ao botão que você escolheu logo ABAIXO deste trecho.

Observação: Dependendo de seu modelo de template, a linha acima pode estar da seguinte maneira: <div class='post-header-line-1'>.

Ou se preferir, veja neste post outras opções de local mais adequado para colar o código.

Referência:Blogger Plugins

Outros artigos interessantes que tratam sobre o Facebook:
Widgets do Facebook

Esse artigo é participante do "Movimento Blogs Unidos"

Movimento Blogs Unidos - Participem!

noreply@blogger.com (Gothic Darkness) — Thu, 11 Feb 2010 02:47:00 +0000

O Gustavo Freitas, do blog GF Soluções, iniciou um movimento muito interessante , visando instruir e orientar blogueiros iniciantes para a pratica de linkar outros blogs, afim de complementar o seu conteúdo, enriquecendo seu artigos.

O Movimento Blogs Unidos, foi idealizado por Gustavo Freitas, por sugestão do Laurentino Mello e ganhou força com a participação do Rodrigo Marassi do blog Design Tecnológico.

Qual a importância de linkar outros Blogs?

Linkar outros blogs é uma oportunidade do seu leitor ter uma profundidade maior sobre o assunto que você abordou no seu artigo, tornando uma pratica saudável para o seu blog e para a blogosfera, além de ser uma forma automática de ganhar um pouco de credibilidade com os blogueiros que você linka e, também, com os leitores deste blogueiro, caso você receba um link recíproco, e o seu trabalho tiver devida qualidade para isto.
Linkar artigos interessantes de outros blogs é o reconhecimento de quem fez o conteúdo, além disso pode ser bom para você também, você ganha mais visitas com os trackbacks entre outros benefícios.

Como participar do movimento Blogs Unidos?

Para participar do movimento é simples.

1. se ainda não tem o costume de, ao escrever um artigo, procurar artigos pela blogosfera que tratem do assunto também, de uma maneira diferente da que tratou ou até mesmo que complemente ou inicie o assunto, comece a procurar e linkar dentro dos seus artigos.

2. ao escrever um artigo com links que enriqueçam seus textos, coloque no final do artigo a frase "esse artigo é participante do movimento blogs unidos". Nessa frase coloque um link para esse artigo para que outros blogueiros possam conhecer o movimento.

Ajude a divulgar o movimento blogs unidos, quanto mais ele ficar conhecido melhor para a blogosfera, você pode fazer de duas maneiras:

1. escreva um artigo falando sobre o movimento.
2. coloque um dos banners do movimento no seu blog.

Código dos Banners:


Banner 250 x 250:
<a href="http://www.gfsolucoes.net/gustavo/blogosfera/participe-do-movimento-blogs-unidos/" target="_blank">
<img src="http://www.gfsolucoes.net/banner/blogsunidos/blogsunidos250x250.jpg"></a>

Banner 125 x 125:
<a href="http://www.gfsolucoes.net/gustavo/blogosfera/participe-do-movimento-blogs-unidos/" target="_blank">
<img src="http://www.gfsolucoes.net/banner/blogsunidos/blogsunidos125x125.jpg"></a>

Banner 120 x 60:
<a href="http://www.gfsolucoes.net/gustavo/blogosfera/participe-do-movimento-blogs-unidos/" target="_blank">
<img src="http://www.gfsolucoes.net/banner/blogsunidos/blogsunidos120x60.jpg"></a>

Como buscar outros artigos relacionados ao assunto abordado em seu blog?

Você pode buscar artigos interessantes relacionados à matéria que você publicou em seu blog, de diversas formas e através de vários mecanismos, porém os mais conhecidos são: Busca do Google, Redes Sociais (como Twitter, Facebook, orkut), agregadores de notícias (como Blogsblogs e diHITT).

Que fique bem claro que o objetivo do Movimento Blogs Unidos é unir os blogueiros em geral, mas não se trata de parceria com troca de links e/ou banners, ou coisa do tipo e sim conscientizar a blogosfera a exercitar o ato de linkar outros artigos interessantes.

Para incentivar a divulgação do Movimento Blogs Unidos serão oferecidos alguns prêmios bem interessantes:
Veja a relação de prêmios até o momento:

● 1 caricatura do Daniel Paiva
● 1 livro Blog Corporativo
● 1 mês de publicidade no blog Design Tecnológico (125×125)
● 1 mês de publicidade no blog GF Soluções (125×125)
● 1 mês de publicidade no blog Quero Criar um Blog (125×125)
● 1 mês de publicidade no blog Curiosando (125×125)

Para concorrer aos prêmios é muito simples, basta fazer uma das duas opções relacionadas abaixo:

1. Escreva um artigo sobre o tema e envie um trackback ou deixe um comentário no artigo original com o link do texto que você escreveu.

2. Coloque um dos banners do movimento em seu blog.

O Gothic Darkness foi convidado a aderir a este movimento e é claro que não ficaria de fora dessa maravilhosa iniciativa para ajudar a melhorar a qualidade dos textos divulgados na blogosfera e gostariamos de convidar a todos você a aderirem ao movimento também!
Participem! E vamos tentar fazer uma blogosfera menos egoísta (e egocêntrica) e mais recíproca!

Esse artigo é participante do "Movimento Blogs Unidos"!

Efeito Hover em Bordas nas Imagens

noreply@blogger.com (Gothic Darkness) — Wed, 10 Feb 2010 22:20:00 +0000

O efeito Hover em Bordas, muda a aparência de um item quando passamos o mouse em cima dele.
Usando CSS no Blogger, você pode adicionar estilos diferentes para suas imagens, inclusive adicionar bordas com efeito hover em determinadas imagens, para isto basta definir estilos aos elementos, incorporando-os no CSS do seu template.

Veja a seguir alguns exemplos de imagens com efeito hover na borda:

Para ativar o efeito do exemplo 1:
Vá em Layout >> Editar HTML , não precisa clicar em "Expandir modelos de widgets",e acrescente uma nova 'class'. Copie o código abaixo e cole-o ANTES da tag ]]></b:skin>


.border1 img{
padding: 5px;
background: #ffffff;  /*Edite a cor de fundo*/
border: 1px solid #54692A;  /*Edite a cor de borda*/
}
.border1 img:hover {
padding: 2px;
background:#FFFFFF;  /*Edite a cor de fundo*/
border: 4px double #9C192A;  /*Edite a cor de borda*/
}

Para ativar o efeito do exemplo 2:
Vá em Layout >> Editar HTML , não precisa clicar em "Expandir modelos de widgets",e acrescente uma nova 'class'. Copie o código abaixo e cole-o ANTES da tag ]]></b:skin>


.border1 img{
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
margin:2px 2px 2px;
}
.border1 img:hover {
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
background:#8B795E;  /*Edite a cor de fundo*/
border:3px solid #000000;  /*Edite a cor de borda*/
margin:2px 2px 2px;
}

Cada vez que quiser adicionar o efeito hover em bordas em alguma imagem é necessário que você hospede as imagens que irá utilizar.
Feito isto, você precisará aplicar as propriedades a cada imagem, separadamente, e deverá acrescentar uma condicional no local onde você quer que o efeito se aplique.
Por exemplo: para aplicar este efeito em uma imagem no post, no modo "editar HTML" da postagem, acrescente a seguinte linha:


<div class="border1"><img src="URL-DA-IMAGEM"/></div>

Use a imaginação e boa sorte!

Texto Animado Estilo Flash no Blog

noreply@blogger.com (Gothic Darkness) — Tue, 09 Feb 2010 10:15:00 +0000

Encontrei uma maneira de colocar um efeito no texto de forma animada (estilo flash), porém, não necessita utilizar flash para gerar este efeito.
O efeito para texto animado, utiliza um script, criado por dhteumeuleu e tem um efeito bem curioso e interessante de reutilização de pontos em comum em linhas sucessivas. Este efeito é bem interessante!
Clicando na imagem abaixo você pode ver um exemplo do texto em movimento.

(Clique na imagem)

A instalação é fácil, porque você só precisará adicionar um gadget do tipo "HTML/JavaScript" e colar o código do script disponível neste tutorial.

1. Código:

<style type="text/css">
#frm {
position: relative;
height: 150px;
width:630px;
font-size: 1.8em;
font-weight: bold;
font-family: verdana, arial;
background: transparent;
overflow: hidden;
padding: 0.5em}
#frm span {
position: relative;
text-align: center;
z-index: 1;
color:#ffffff;
}
#mtxform {
position: relative;
z-index: 10;
}
.hidden {
visibility: hidden;
}
</style><script style="text/javascript" src="http://dl.dropbox.com/u/3173073/HacksBlogger/texto-animado.js">
</script>
<div id="frm"></div>
<form id="mtxform" name="mtxform"><button id="show" class="hidden" onclick="mtx.show();" type="button">Replay</button><span id="inputext" class="hidden"><textarea id="text" rows="0" cols="0" name="text">
ESCREVA O TEXTO
QUE VOCÊ QUISER AQUI
</textarea><button onclick="mtx.changeText();" type="button">Play</button><input type="RESET" /></span></form>

2. Configurar o local onde o script será instalado - Acima da coluna de postagens:

Eu recomendo a instalação deste script acima da coluna de postagens,para ficar melhor destacado.
Antes de mais nada você precisa conferir no painel do blog se no seu template já existe a possiblidade de adicionar um gadget acima da coluna de postagens, através de "Elementos de Página".
Se não houver, você terá que fazer algumas modificações no código.

Vá na edição HTML do seu blog, NÃO marque "Expandir Modelos de Widgets" e procure por:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

Onde está escrito showaddelement='no' troque por showaddelement='yes'e salve as modificações.

Volte em "Elementos de Página" , você verá um campo para "Adicionar Gadget" bem acima da coluna de postagens do blog, escolha a opção HTML/Javascript e cole o código.

3. Personalizar elementos:

No código acima, eu personalizei de acordo com as medidas e cores do meu template para testes.
Você deve personalizar alguns elementos para que o script funcione adequadamente de acordo com as medidas e cores de seu template,como cor de fundo, largura, altura e cor da fonte.
Edite os elementos contidos na primeira parte (CSS).
Vejamos:
height: 150px -> edite a altura aqui.
width:630px; -> edite largura.
background: transparent; -> edite a cor de fundo.
color:#ffffff; -> edite a cor da fonte.

Em alguns testes que realizei, conferi que o script funciona perfeitamente , mas a funcionalidade dele pode variar de acordo com o template.
Lembre-se que Templates que possuem muitos scripts, acabam gerando "conflitos" entre si, por isso alguns arquivos javascript dão erro pra alguns, mas funcionam perfeitamente para outros.
Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários.
Se quiser, dê uma lida nesta dica e veja mais sobre como melhorar o carregamento do seu blog.

Widget de Boas Vindas e Feed no Blogger

noreply@blogger.com (Gothic Darkness) — Sun, 07 Feb 2010 02:36:00 +0000

Este Widget permite mostrar uma mensagem de saudação diferente para os seus visitantes para cada origem , dependendo da sua URL de referência.

Veja DEMO

Por exemplo, quando visitantes chegam ao seu blog através do google, eles visualizarão uma mensagem sugerindo a eles para assinarem o seu feed RSS.
Exibe também para visitantes vindos de outros sites, como BlogsBlogs, Technorati, Facebook, Twiiter etc.
Com este Widget, seu visitante verá uma imagem e uma mensagem de saudação diferente dependendo do URL de referência, acompanha um conjunto de ícones dos principais sites e redes sociais.
O Widget pode ser inserido em qualquer lugar, no seu blog, mas eu recomendo que a instalçao seja feita na parte superior, bem acima da coluna de postagens.
O script original foi desenvolvido por Classic Tutorials e foi modificado e traduzido por mim.
A instalação é super simples e fácil, e você verá logo abaixo como proceder.

Configurar o local onde o widget será instalado - Acima da coluna de postagens:

Para instalar o widget acima da coluna de postagens, antes de mais nada você precisa conferir no painel do blog se no seu template já existe a possiblidade de adicionar um gadget acima da coluna de postagens, através de "Elementos de Página".
Se não houver, você terá que fazer algumas modificações no código.

Vá na edição HTML do seu blog, NÃO marque "Expandir Modelos de Widgets" e procure por:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

Onde está escrito showaddelement='no' troque por showaddelement='yes'e salve as modificações.

Se você retornar em "Elementos de Página" verá um campo para "Adicionar Gadget" bem acima da coluna de postagens do blog, é lá que você irá colar o código do Widget de Boas Vindas que você vai instalar.
(Veja imagem)

Instalando Código do Widget:

Ainda na aba "Layout" >>"Elementos da página", no campo acima da coluna de postagens, clique em "Adicionar um Gadget" e Selecione a opção "HTML/JavaScript" e cole o seguinte código dentro dele:


<script src="http://widgetboasvindasfeed.googlecode.com/files/GreetBox.js" type="text/javascript"></script>
<div id="mainDisplayDiv" style="background:#fff;border:1px solid #B6AFA9;margin:0 auto 50px auto;display:none">
<div style="float: right; margin-right: 5px; margin-top: 5px;">
<a href="#" onclick="closeGreetBox('7')">
<img border="0" alt="x" src="http://lh4.ggpht.com/_UCfxgWHzU98/S21DcwKbx9I/AAAAAAAAByU/XVXEvhvu7rA/closeicon.gif" />
</a>
</div>
<div id="dynamicContentDisplayed">
</div>
<script type="text/javascript">
// Give your feed url here
var feedURL = "URL-DO-SEU-FEED-AQUI";
var dynamicHTMLText = displayRequiredText(feedURL); document.getElementById("dynamicContentDisplayed").innerHTML = dynamicHTMLText;
</script>
</div>
<script src="http://widgetboasvindasfeed.googlecode.com/files/Hideshow-v03.js" type="text/javascript">
</script>
<script type="text/javascript">
showHideDiv();
</script>

Salve.
Não esqueça de acrescentar a url do seu Feed no local destacado (onde está escrito URL-DO-SEU-FEED-AQUI).

Você pode personalizar alguns elementos como o background e bordas:
Alterar cor de fundo: altere o código referente a cor em "background".
Alterar borda: edite a cor da borda se quiser, ou se preferir retirar a borda, basta apagar a linha -> border:1px solid #B6AFA9;

Agora faça um teste: vá até o google e pesquise algum termo ou pela url do seu blog, clique no link do resultado da busca que redirecionará para seu blog e veja o que acontece com script. Agora, tente o mesmo com a busca do Yahoo e veja as mudanças da mensagem.

Este Widget não é compatível apenas com o Blogger, é compatível com Wordpress ou qualquer outro site ou blog onde possa utilizar HTML/JavaScript. Portanto, use-o onde você preferir.

Referência:Classic Tutorials

Template Death Rose - 2 Colunas

noreply@blogger.com (Gothic Darkness) — Sat, 06 Feb 2010 02:45:00 +0000

Template Gótico Death Rose - 2 Colunas :

DEMO | DOWNLOAD

Este Template foi desenvolvido por mim.
Possui 2 colunas :sidebar e coluna de postagens.
Designer com layout no estilo gótico nas cores black e white, combinados com cinza e desenhos de caveiras.

Recursos que estão incluidos no Template:
- Footer com 3 colunas.
- Hack de resumo de postagem automática;
- Menu editável;
- Contador de Comentários nos Titulos dos posts;
- Comentários Numerados;
- Comentários do autor destacados;
- Artigos Relacionados no rodapé das páginas internas;
- Blockquote Personalizado;
- Avatar nos comentários;
- Imagem personalizada para comentário Openid e anônimo;
- Icones sociais no rodapé (não necessitam ser configurados);
- Icone/botão para enviar postagem no Twitter e no orkut;
- Menu Suspenso para rolagem de página;
- Link de Comentários Corrigido;
- Data em posts de um mesmo dia corrigido.

Estão incluidos na pasta de download:
- Arquivo XML.
- Imagens utilizadas no template.

Caso não saiba como trocar de template, clique aqui e veja como proceder.

<------Instruções para editar Menu----->

Para adicionar links no menu:
Procure no html do blog por esta tag abaixo:


<div id='menu'>

E insira seus links onde está escrito "inserir link aqui'. Exemplo:


<li><a href='inserir link aqui' title='Edit'>Link 1</a></li>

Sugiro que hospede as imagens utilizadas no layout, para evitar algum problema de hospedagem.
Veja onde hospedar as imagens utilizadas no layout.

((Não retirem os créditos dos templates, leia nossa licença))

Diferenças entre Margin e Padding

noreply@blogger.com (Gothic Darkness) — Tue, 02 Feb 2010 22:36:00 +0000

Dando segmento à série de artigos Aprenda CSS e HTML, hoje veremos sobre a diferença entre Margin e Padding, que são propriedades que nos permite adicionar espaço em branco entre os elementos HTML, evitando que os elementos fiquem "grudados".
Embora ambas possuirem funções semelhantes, cada uma possui sua particularidade.

Padding: determina as margens internas, é responsável por determinar a distância entre o conteúdo de determinado elemento e sua borda.
Margin: determina a distância de um elemento para outro.
Para melhor entendimento, veja imagem:

Assim como você tem a possibilidade de definir bordas para cada lado de seus elementos HTML(por exemplo:bordas na sidebar), você pode fazer o mesmo com as propriedades margin e padding. Tudo o que você precisará fazer é alterar os valores top, right, bottom e left.
Esses valores podem ser: auto, cm, mm, em, pt, pc, px, em, ex.

Utilizando margin e padding, você deve informar cada valor estabelecido nos quatro cantos, sendo eles: topo, direita, abaixo, esquerda. Cada valor declarado deve se referir a cada lado do elemento HTML.
O primeiro valor é para o topo , e eles seguem um sentido horário, portanto, o próximo valor seria para a direita, depois para baixo e por último à esquerda.

Ex.1: padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).

Se você definir um valor único, a distância aplica-se a todos os lados, ela será aplicada aos 4 lados do elemento HTML.
Ex.2:
margin: 5px;
padding: 8px;

Padding: é o número de pontos em que o conteúdo está recuado dentro do objeto externo.

Margin: determina a distância de um elemento para outro.Podemos utilizar a propriedade margin para arrumar a distância entre o post e os limites da coluna da postagem, por exemplo.

Ou seja, ao estipular uma margin estamos definindo um espaço entre uma camada e as camadas texto, imagens ou outros conteúdos que tiver aos lados.
Ao estipular um padding em uma camada, por exemplo, estamos definindo o espaço que há entre a borda da camada e o que estiver dentro.

Criando Páginas Estáticas no Blogger

noreply@blogger.com (Gothic Darkness) — Sun, 31 Jan 2010 22:05:00 +0000

Uma das novidades recentes do Blogger lançadas este mês é a implantação de Páginas Estáticas.
Este recurso, serve para criarmos páginas 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.
Antes era necessário usar de algumas "macetes manuais" e "gambiarras" para criarmos páginas fixas, agora a equipe do Blogger descomplicou, ao lançar este recurso.
O único problema, é que a opção de implementação de Páginas Estáticas, só está disponível no blog de testes do Blogger, o Blogger in Draft e você poderá criar até 10 páginas.

A ativação automática deste recurso só está disponivel para templates novos (padrões do blogger e que não foram modificados), para ativar este recurso em templates antigos (já modificados) deve-se incluir este recurso manualmente, que você verá o procedimento ao final deste post.

Se quiser implantar páginas estáticas no seu blog, acesse o seu blog, através do painel do Blogger in Draft, e clique em "Postagens" > "Editar páginas".

Clique em "Nova Página" para criar sua página estática. Vai aparecer o editor de texto para que você escreva seu post normalmente. Em "Opções de postagens", configure se irá ativar a opção de comentários ou não, que por padrão, já vem desativada(eu recomendo que deixe desativada).

Após criado seu post, clique em "Publicar Página",e aparecerá uma mensagem com a opção de escolha do local que você deseja incluir sua página. Você poderá escolher em qual local o link da sua página ficará e clique em "salvar e publicar" para visualizar sua nova página:

Se você escolher a opção "Guias do blog", será criado uma linkbar no local que você escolher, automaticamente.
Se você escolher a opção "Barra lateral do blog", sua página será incluida na sua sidebar.

Se no seu template tiver "menu", assim como tem aqui no Gothic Darkness, por exemplo, eu recomendo que você escolha "nenhum gadget", para vincular sua página manualmente, assim você pode pegar o link da página que você criou e inseri-lo no seu menu.
Para pegar o link da sua nova página criada, clique em "Visualizar página" e copie a URL, para depois inseri-la no seu menu.

A página criada aparecerá sem data, porém o rodapé vai aparecer normalmente. Se você não quiser que o rodapé apareça na sua página criada, é necessário fazer uma pequena "adaptação".
Na aba "editar html" da postagem, cole o código a seguir no final do seu post na página que você criou:

<style type="text/css">
.post-footer-line{display: none;}.post-footer{display: none;}
</style>

Inserir gadget de páginas estáticas:

O processo para inserir os links de suas páginas estáticas criadas, é o mesmo que usamos para inserir outros gadgets.
Vá até a aba "Layout" >> "Elementos da Página",clique em "Adicionar um Gadget" e procure pelo gadget "Páginas" e escolha o posicionamento dos links da forma que você preferir.Caso você queira trocar de posição a lista das páginas criadas, basta trocar o gadget de lugar, selecionando e arrastando para onde desejar.

Como colocar Página Estática em templates antigos/alterados/modificados:

Para aqueles que possuem templates antigos,que já foram alterados ou modificados(não nativos do Blogger), deve-se incluir esta funcionalidade manualmente. Veja como:

Vá em Layout, entre na página de edição de html do seu blog,marque a caixinha "expandir modelos de widgts" e Procure pela linha:

<b:include data='post' name='post'/>

E cole o código a seguir logo ABAIXO dela:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>

Visualize e se estiver tudo certinho, salve!
Pronto, agora seu blog já tem páginas estáticas habilitadas, é só usar a imaginação e criar páginas fixas de acordo com a sua necessidade.

Referência:Crazyseawolf.

CSS - Variaveis do Tipo Fonte

noreply@blogger.com (Gothic Darkness) — Sun, 31 Jan 2010 16:11:00 +0000

Você já conheceu e já entendeu sobre as Variáveis Cor e Fonte(Variable Definition)no outro post. Já viu como criar uma variável do tipo cor.
Agora vai aprender sobre a variável do tipo fonte.
Antes de criar ou editar qualquer variável do tipo fonte no seu template, é necessário entender alguns conceitos básico a respeito de Fontes e como aplicá-las usando CSS.

Uma fonte só é visível para o leitor, se o navegador reconhecer esta fonte, ou seja, é necessário que o seu leitor tenha esta fonte gravada em seu computador, caso contrário não iria visualizá-la, mas o CSS fornece um mecanismo para compensar esta lacuna, tornando a fonte visível, para que ela seja visualizada pelo leitor mesmo não estando instalada em seu sistema operacional. Com o CSS você pode definir uma lista de fontes para seu documento a serem usadas na ordem que você definiu (se a primeira da lista não estiver disponível no computador do leitor, será usada a segunda e assim por diante).Para isto você precisa descrever algumas propriedades CSS aplicáveis às fontes, que são elas:
● font-family
● font-style
● font-weight
● font-size
● font-variant

Família de fontes (font-family):

Existem dois tipos de nomes para definirmos fontes:
1) nomes para famílias de fontes - normalmente conhecidas como "font", se caracterizam por serem fontes normais sem serifa.
2) nomes para famílias genéricas - são fontes que pertencem a um grupo com aparência uniforme(genérica), se caracterizam por serem fontes normais com serifas.
Exemplo:

Ao definir fontes para o seu blog, comece definindo aquela fonte preferida, seguindo-se de algumas alternativas para ela, e encerre a listagem das fontes com uma fonte genérica, assim se o navegador do usuário não encontrar na memória do computador a primeira fonte, usará a segunda e assim por diante.
Exemplo:


.post-body {
font-family: 'Trebuchet MS', Arial, Serif;}

No exemplo acima, a fonte escolhida para os textos da página é Trebuchet MS, Arial e Serif são as fontes genéricas. A primeira fonte a ser procurada pelo navegador do leitor deverá ser a Trebuchet MS e na falta dela, Arial. Se ambas estiverem indisponíveis no computador do leitor será usada uma fonte da família serif(fonte generica).
Notem que para especificar a fonte "Trebuchet MS" foram usadas aspas. Pra fontes com nomes compostos e que contenham espaços entre os nomes, é necessário o uso de aspas.

Estilo das fontes (font-style):

A propriedade font-style define a escolha da fonte em: normal, italic ou oblique.
Você deve definir o estilo de fonte para cada elemento.
Exemplo: Se desejarmos que a fonte do texto de nossa página se apresente em itálico, devemos colocar o CSS assim:
.post-body {
font-style: italic;}

Dessa forma, qualquer texto publicado no seu blog, as fontes se apresentarão em itálico.

Peso das fontes (font-weight):

Uma fonte pode ser normal ou bold (negrito).
Esta propriedade é que define o quão escura esta fonte deve ser.
Os valores possíveis suportados por alguns navegadores são: 100-900 (em intervalos de 100 em 100) para definir o peso da fonte.

Tamanho da fonte (font-size):

Esta propriedade que define o tamanho da fonte, que pode ser especificados por valores relativo ou absoluto.
Veja alguns dos valores suportados no blogger:
- pt (pontos)
- px (pixels)
- em
- %(percentagem)
- xx-small
- x-small
- small
- medium
- large

Exemplos:

.post-body {font-size: 14px;}
.post-body {font-size: x-small;}
.post-body {font-size: 80%;}

Fonte variante (font-variant)

Esta propriedade é usada para escolher as variantes normal ou small-caps. A variante small-caps é aquela que transforma letras em maiúsculas de menor altura (tamanho reduzido).
Exemplo:

.post-body {font-variant: small-caps;}

Agora que você entendeu um pouco mais a respeito de fontes, vamos relembrar a Variable Definition do tipo fonte, que você viu no artigo anterior?

Vamos ver a variável "bodyfont" conforme se apresenta no código do template minima:

<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

Em vermelho: é o nome da variável, sem espaços.
Em azul:é a descrição da variável, pode conter espaços
Em verde:é o tipo da variável, que neste caso é font.
Em laranja:é a fonte padrão (font-style,font-weight, font-family)
Em marron: é a fonte escolhida (font-style,font-weight, font-family)

No template Minima, as variáveis do tipo fonte são: bodyfont, headerfont, pagetitlefont,descriptionfont e postfooterfont.

Agora vamos criar uma nova variável do tipo fonte para aplicarmos aos Titulos da Sidebar:


<variable name="sidebartitlefont" description="Titulo da Sidebar" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 100% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

Esta variável "sidebartitlefont" está definida como um tipo fonte na descrição "Titulo da Sidebar", onde foi estabelecido que a letra será normal e em negrito, com tamanho da fonte em 100% e que a primeira fonte a ser procurada pelo navegador deverá ser a Trebuchet MS (note que está entre aspas), e na falta dela, Trebuchet e assim por diante.
Agora vamos aplicar esta variável criada ao titulo da sidebar.(No template mínima não existe a regra css para o título da sidebar).
O que vou fazer é dar valores diferentes para a propriedade "h2" do seletor "Sidebar", criando a seguinte regra:


.sidebar h2{
font: $sidebartitlefont; }

Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.

Mas se você preferir, pode definir os valores diretamente na regra css para cada seletor, desta maneira:


.sidebar h2{
font-size: 100%;
font-weight: bold;
font-family: 'Trebuchet MS',Trebuchet,arial,verdana, Sans-Serif;
color: #000000;
}

CSS - Variable Definitions no Blogger

noreply@blogger.com (Gothic Darkness) — Sun, 31 Jan 2010 00:02:00 +0000

Continuando a série: Aprendendo CSS e HTML no Blogger, hoje vamos conhecer as Variáveis CSS de Cores e Fontes.
No topo da folha de estilos do seu blog, no Blogger,você encontrará Variable Definitions.

Variable Definitions são valores que podem ser modificados no Painel "Fontes e Cores" do Blogger. São pré definições de cores, fontes e tamanho de fontes.
A maioria dos templates existentes, como os padrões do Blogger (mínima) usam estas pré definições para o CSS, facilitando a alteração destas cores, através do painel "Fontes e Cores".
Se no CSS estiverem estabelecidas as pré definições, você poderá alterar cores, fontes e tamanho de fontes, pelo painel de "Fontes e Cores" sem precisar mexer no código do seu template.
Se esses valores não estiverem estabelecidos, você poderá definí-los, criando suas próprias variáveis.
Quanto mais variáveis forem criadas, maior a facilidade de mudar cores e fontes dos elementos da página, através do painel "Fontes e Cores".

Em muitos casos, não se consegue mudar a cor ou fonte de um determinado template por que o autor do template não usou as variáveis, não definindo e especificando um determinado valor diretamente em uma propriedade, e se não há definição para esses valores, dificulta quaisquer tentativa de alteração.

As variáveis se apresentam em 2 tipos:

1) Variável Cor:


<Variable name="bgcolor" description="Page Background Color"
 type="color" default="#fff" value="#ffffff">

Em vermelho: é o nome da variável - pode ser qualquer nome que você quiser escolher, mas não deve conter espaços.
Em azul: é a descrição que aparecerá no painel Fontes e Cores, e pode conter espaços.
Em verde: é tipo de variável, que neste caso é "cor"
Em laranja: é o valor padrão, funciona na falta de um outro valor fornecido.
Em marron: é o valor da cor fornecida.

2) Variável Fonte:

<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

Criando Variáveis do tipo Cor:

Veremos agora como criar variáveis de cores no seu template.
Copie o trecho abaixo, e substitua os nomes e tipo como quiser.


/* Variable definitions
====================
<variable name="NOME" description="DESCRIÇÃO" type="color" default="#XXX" value="#XXXXXX">

Exemplo de variável do tipo "cor":


<Variable name="linecolor" description="Linhas" type="color" default="#599" value="#6F0599">

Eu criei uma variável do tipo cor, de nome "linecolor", ela pode ser aplicada em todas as linhas do meu blog, sempre que quiser aplicar estilos de cores a uma linha, farei assim:
border-bottom: 1px solid $linecolor;

Criada a variável, podemos aplicá-la a qualquer propriedade de qualquer seletor onde for possível aplicar cor.
Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.
Não esqueça: Esta variável pode ser utilizada em qualquer propriedade, não apenas em linhas.

Caso eu queira aplicar essa cor como background da sidebar, por exemplo, eu farei assim:
.sidebar {
background-color:$linecolor;
}

Não se esqueça de colocar o $ antes do nome, ou a aplicação Não funcionará!

Agora que você determinou uma variável, salve e retorne ao painel "Fontes e Cores". Você notará que existe uma variável de nome "Linhas" e se quiser trocar a cor, poderá mudá-la pelo painel.
No próximo post vamos ver sobre as variáveis do tipo fonte.

Aprendendo CSS/HTML - Introdução

noreply@blogger.com (Gothic Darkness) — Sat, 30 Jan 2010 09:50:00 +0000

Para aqueles que pretendem ou gostam de personalizar seus templates, querendo ou não, é necessário ter um mínimo de conhecimento em HTML e CSS.
Ao instalar um recurso, ou fazer alguma personalização no seu blog, com certeza alguns se deparam com determinados códigos que, muitas vezes sequer sabem o significado ou sabem para que servem, por isso, é fundamental saber e conhecer pelo menos o básico para entender o que se trata cada código e saber reconhecê-los.
Pensando nisso, eu já publiquei um artigo com explicações básicas sobre as Variaveis CSS e os Elementos do Blogger, onde trata a respeito dos elementos básicos do Blogger e sobre os Elementos de página.

Vou dar continuidade a publicação de alguns artigos sobre CSS e HTML, e tentarei repassar a vocês um pouco de conhecimento básico no assunto, afim de auxiliá-los nas personalização de seus templates no blogger.

De antemão, já esclareço que não tenho pretensão alguma em dar aulas sobre HTML e CSS, apenas tentarei repassar algum conhecimento básico da maneira mais simples e acessível possível, pelo menos para que vocês possam entender um pouquinho melhor sobre o assunto, facilitando a aplicação de hacks e para conseguirem modificar o layout do seu blog, ou quem sabe até, começar a criar templates.
Para aqueles que pretendem se aprofundar melhor no assunto, recomendo a leitura em alguns sites, como o do Maujor, ou o apostilando, verdadeiros mestres no assunto.

Para iniciar, vamos identificar alguns elementos no seu template.
Quando clicamos em "editar HTML" no blogger, nos deparamos com várias tags.
O início do nosso documento é HTML iniciado pela tag <html>, e se você rolar a página até o final verá que existe uma tag de fechamento, que é </html>.

Ao entrarmos na edição HTML no Blogger, visualizamos qual a linguagem que está sendo utilizada na página (XHTML), representadas por estas tags:(você não deverá mexer e nem modificar nada nesta parte)


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

1. Estrutura Básica do HTML:

No Blogger, o documento HTML se compõe da seguinte estrutura básica:
<html>
<head>
É entre estas tags que está contido o estilo da página - CSS.
É aqui que determinamos a aparência dos elementos
<head/>
<body>
É entre estas tags que está contida a estrutura da página (seus elementos) - HTML.
É o corpo do documento.É aqui que criamos os blocos que serão mostrados na página, como colunas, menus etc.
</body>
</html>

2. HTML e CSS:

Com certeza você já ouviu falar em CSS e em HTML, mas talvez não saiba o que significa exatamente.
CSS é a abreviatura para Cascading Style Sheets = Folha de Estilos em Cascata.
É uma linguagem para estilos que define o layout de documentos HTML.
O CSS é um mecanismo para adicionar estilo, é onde controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos etc.

HTML é a abreviatura de HyperText Markup Language, é a linguagem que possibilita apresentar informações de uma página, é tudo aquilo que está contido na página.

Resumidamente, HTML é usado para estruturar conteúdos, enquanto que o CSS é usado para formatar conteúdos estruturados.

3. CSS no Blogger:

Já vimos que o código CSS que dá estilo à página,é onde determinamos a aparência dos elementos. No Blogger, começa com :
<b:skin><![CDATA[/*
e sua tag de fechamento é ]]></b:skin>.
E sempre que quisermos adicionar estilos aos elementos devemos acrescentar os códigos referentes antes de sua tag de fechamento ]]></b:skin> .
A Regra CSS segue uma linguagem própria, formando uma folha de estilos, definindo como será aplicado estilo a um ou mais elementos HTML, compondo-se de 3(três) partes:
a) Seletor
b) Propriedade
c) Valor

Na regra CSS, escreve-se o seletor e a seguir a propriedade e o valor, separados por dois pontos e entre chaves { }.
Quando tivermos que definir mais de uma propriedade, por regra, deve-se usar ponto-e-vírgula para separá-las.
Veja exemplo:

body{
background-color: $bgcolor;
}

(Referência:Maujor)

Estas são as explicações básicas iniciais.
Na sequência, leia o artigo sobre as Variáveis Cores e Fonte(Variable Definition), que são valores que podem ser modificados no Painel "Fontes e Cores" do Blogger(pré definições de cores, fontes e tamanho de fontes).

Efeito Opacity em Links e Textos

noreply@blogger.com (Gothic Darkness) — Thu, 28 Jan 2010 10:30:00 +0000

Atendendo ao pedido feito por "Cafe do livro", vou mostrar,neste artigo,como aplicar um efeito transparente em links ou textos na sidebar do blog.
Você já viu, neste post que a propriedade Opacity permite que você aplique níveis de transparência a uma imagem e agora verá a possibilidade de aplicação de transparências em outros elementos, como links e textos.

A primeira coisa que devemos fazer é criarmos uma "class" e aplicar estilos a esta class , para que ela possa ser incorporada ao template e ser adicionada diretamente ao elemento sempre que quisermos utilizá-la.
No nosso exemplo, vamos criar uma "class" e nomeá-la de "transparente".
Vejamos:

1. Aplicando transparência em links na sidebar:

Vá em Layout >> Editar HTML , não precisa clicar em "Expandir modelos de widgets",e acrescente uma nova 'class' ANTES da tag ]]></b:skin>


.transparente a {
font-size: Xpx; /*Coloque tamanho da fonte se quiser*/
color:XXX;  /*Coloque cor da fonte se quiser*/
text-decoration: none;
filter: alpha(opacity:0.4);
KHTMLOpacity: 0.4;
MozOpacity: 0.4;
-khtml-opacity:.40;
-ms-filter:"alpha(opacity=40)";
-moz-opacity:.40;
filter:alpha(opacity=40);
opacity:.40;
}

.transparente a:hover {
font-size: px; /*Coloque tamanho da fonte se quiser*/
color:XXX;  /*Coloque cor da fonte se quiser*/
text-decoration: none;
filter: alpha(opacity:1);
KHTMLOpacity: 1;
MozOpacity: 1;
-khtml-opacity:.1;
-ms-filter:"alpha(opacity=100)";
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}

Quando quisermos mostrar a "class transparente", devemos acrescentar uma condicional no local onde queremos que o efeito se aplique.
Por exemplo, se você quer aplicar o efeito em um link na sidebar, vá até a página de layout, clique em "adicionar gadget", escolha a opção "html/javascript" e cole esse código:


<div class="transparente">
<a href="SEU-LINK-AQUI">LINK</a></div>

Sempre que quiser aplicar o efeito opacity em links será necessário colar este código.

2. Aplicando transparência em textos na sidebar:

Cole este código bem ABAIXO da "class" que você já criou anteriormente:


.transparente-text {
font-size: px; /*Coloque tamanho da fonte se quiser*/
color:XXX;  /*Coloque cor da fonte se quiser*/
text-decoration: none;
filter: alpha(opacity:0.4);
KHTMLOpacity: 0.4;
MozOpacity: 0.4;
-khtml-opacity:.40;
-ms-filter:"alpha(opacity=40)";
-moz-opacity:.40;
filter:alpha(opacity=40);
opacity:.40;
}

Quando for utlizar o efeito opacity em textos utilize esse código:


<p class="transparente-text">
ESCREVA SEU TEXTO AQUI.
</p>

Veja como fica o código para aplicação do efeito em link e texto ao mesmo tempo:


<div class="transparente">
<a href="SEU-LINK-AQUI">LINK</a>
<p class="transparente-text">
ESCREVA SEU TEXTO AQUI.
</p>
</div></div>

Veja DEMO.
(Confira o item na sidebar "Efeito Opacity)