dica blogger #008

Já falei, aqui no blog, sobre a versão do Blogger em rascunho (Blogger in Draft).

Esta versão do Blogger é onde são testadas novas funcionalidades que posteriomente poderão ser usadas definitivamente.
Recentemente foram criadas mais algumas funcionalidades que, no meu ponto de vista, poderão ter bastante utilidade para quem tem um blogue. A mais recente funcionalidade é a criação de páginas estáticas.
Para quem não sabe do que se trata posso dizer que são, basicamente, publicações mas que não irão ter data e que podem servir para fornecer informações do blog, do autor, etc. sem ficarem "misturadas" com as publicações regulares do blogue.

Para as usar basta entrar no Blogger in Draft, no painel do blogue escolher a opção "Editar mensagens" e irão encontrar um link que permite editar/criar as referidas páginas (ver imagem abaixo) da mesma forma que se publica um artigo regularmente.

(clicar na imagem para aumentar)

Nota: Atendendo que se trata de uma versão de testes, esta funcionalidade poderá apresentar alguns "bugs".

dica blogger #007

Num blog existe uma área onde se definem os mais variados estilos de tudo o que nos é mostrado na pagina. É o chamado CSS (Cascading Style Sheets ou Folha de Estilos).

Nesta área, usando os códigos certos podemos criar efeitos bastante interessantes numa página e, na minha opinião, um dos efeitos mais interessantes, aplicado principalmente a imagens, é a opacidade. Tal como podem ver neste blog, foi usada alguma transparência na imagem de fundo através desse efeito e para isso bastou definir que a opacidade da imagem fosse inferior a 100%.

Nas imagens publicadas nos posts também é possível aplicar esse efeito e como, ao publicar as imagens directamente através do blogger, elas funcionam como links é também possivel fazer com que elas apenas sejam visíveis quando se passa o cursor por cima dela.

Para isso basta procurar pela tag ]]></b:skin> no código do vosso blog e antes dessa tag adicionar os seguintes estilos:

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

Nota: nestes códigos os valores 50, 0.5, 100 e 1.0 definem o nivel de transparencia a aplicar.

Depois disto, basta que ao publicar uma imagem num post se procure no código da mesma pela area que a define como link e se adicione um pequeno código para que a transparencia funcione.
O código da imagem é algo deste tipo:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_a7NKD2mAIvk/S1bi2GNY5mI/AAAAAAAABQA/rYBDtDq4zSk/s1600-h/XXX.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaYXAmb5fhNOT_HkdMqi_GNAMpQqYq-eDEP24h4n2bylAzMEvGr-C98Bla_8DtNxMOhBOLeHtij500agHs6xgLaxeu6ac3lOkZkTJxDr9DMcz9-3P1JLO9ciGrZG5B6Cr_tTjniBD_WwU/s320/XXX.jpg" width="320" /></a>
</div>

E na parte entre <a e href="http:// adicionamos class="linkopacity" ficando desta forma:

<a class="linkopacity" href="http://

Depois disto basta gravar como habitualmente.

Podem passar o cursor na imagem abaixo, que não está visivel porque troquei a opacidade de 50 para 0, para ver um exemplo de como funciona.

dica blogger #006

Para quem usa um template original do Blogger sem muitas alterações, possivelmente já pensou "Que mal que fica a barra no topo do blog!", mas por outro lado acha que essa barra pode vir a ser util para fazer login ou pesquisar outros blogs fazer pesquisas no blog.

Uma solução para este dilema é ter a barra mas ela só aparecer quando quisermos.
Há uma forma muito simples de o fazer. Para isso basta entrar no código-fonte do blog e procurar por

]]></b:skin>

antes deste código cola-se

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

E é tudo!
A barra vai estar lá mas invisivel e só vai ser visivel ao passar o cursor por cima.

NOTA: Este post foi corrigido. Foram cortadas algumas palavras e adicionadas outras (a azul).

dica blogger #005

Vivemos num mundo de estatisticas e indicadores (e por vezes de médios). Num blog também é hábito usar diversas ferramentas que nos podem mostrar as mais diversas estatisticas relativas ao blog. Total de comentários, artigos publicados, visitas, páginas vistas, etc.
Para além destes tipos de contadores existe um que nos pode msotrar quem comenta mais no nosso blog. É sobre esse que vou falar hoje.

Aplicar este contador no blog é bastante facil e para isso basta entrar no painel do blog e adicionar um elemento de pagina. Escolhem um elemento do tipo HTML/Javascript e dentro desse novo elemento basta inserir o seguinte código:

<script type="text/javascript">
function pipeCallback(obj) {
 document.write('<ol>');
 var i;
 for (i = 0; i < obj.count ; i++)
 {
 var href = "'" + obj.value.items[i].link + "'";
 if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
 document.write(item);
 }
 document.write('</ol>');
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=26191599715c07fbeaa491a5729e478b&url=http%3A%2F%2Fviciossitudes.blogspot.com&num=10&filter=Vício" type="text/javascript"></script>

É necessário fazer algumas configurações e para isso usei cores onde devem ser feitas.

Na parte que está a vermelho inserem o endereço do vosso blog (neste código está o endereço do meu) sem http://

Na parte que está a verde inserem o numero de comentadores que querem que a lista apresente (no meu caso escolhi 10)

Na parte que está a laranja inserem o vosso nick para que seja filtrado e não entre na contagem.

O resultado disto tudo é o que pode ser visto abaixo:




NOTA: não sei qual a razão, mas no meu blog apenas são contabilizados os ultimos 200 comentários.

dica blogger #004

Num outro blogue, que tive, falei duma alternativa que o Blogger oferecia para edição dos blogues. Falo do Blogger em versão rascunho (Blogger in Draft) e que é uma plataforma onde o pessoal do Blogger testa novas funcionalidades, antes de serem aplicadas, e que podem ser usadas por qualquer um.
Basta iniciar sessão, no link acima, da mesma forma que habitualmente fazem, e ao entrar no painel seleccionar o Blogger in Draft como painel pré-definido. (ver imagem abaixo)

Depois disto irá ser sempre esta opção a usada para editar o blogue.

Este serviço adicionou recentemente novas funcionalidades no painel de edição através de ícones na barra do painel. As diferenças podem ser vistas nas imagens abaixo.

Blogger:

Blogger in Draft:

Nas opções de mensagens também foram adicionadas novas funcionalidades...

Voltando a falar da barra do painel de edição dos posts podemos encontrar os botões de imagem e vídeos que, apesar de já existirem no painel antigo, foram modificados quanto à forma como funcionam. (Ícones 1 e 2 na imagem abaixo)
E encontramos também dois novos ícones, no canto superior direito, que têm funções que não existem no painel anterior. Um dos ícones serve para inserir a opção "Leia mais...", que serve para "cortar" o texto e só clicando num link se pode ler o resto do texto. (Ícone 3). O outro ícone serve para ter um tradutor e um dicionário pronto a usar, aquando da edição do post (Ícone 4).

Estas são algumas funcionalidades do novo painel que decidi partilhar e para poderem saber mais sobre este serviço podem visitar o blogue do Blogger in Draft (em inglês).

Nota: Podem clicar nas imagens para as ampliar.

dica blogger #003

No código fonte dum blog existe uma parte na qual se pode configurar a aparência de tudo o que o blog mostra. Esta área chama-se "Área de estilos", utiliza a linguagem CSS (Cascading Style Sheet) e permite que a formatação da página fique toda agrupada em vez de ser aplicada a cada elemento individualmente.
Nesta área podemos definir os tipos de letra, as posições dos objectos, as cores, etc.
Podemos encontra-la no inicio do código duma página entre as tags <head> e </head>.

Ontem ao pesquisar algo mais sobre CSS descobri algo, que considerei interessante e que apliquei neste blog. Se olharem para o link dos comentários podem ver que dá a sensação de alto relevo, passando a baixo relevo quando se passa o cursor por cima do mesmo.
Esta funcionalidade não tem nenhuma imagem aplicada e apenas usa CSS para o efeito.

Configurar os links para que fiquem daquela forma é bastante fácil e apenas é necessário fazer o seguinte:

1 - Entrar no código do blog e procurar o seguinte código

.a link {

2 - Abaixo desta linha adicionar

border: 2px outset #eee;

3 - Procurar logo abaixo o código

.a:hover {

4 - Abaixo dessa linha adicionar

border: 2px inset #ccc;

E é tudo...

NOTA: esta alteração irá afectar todos os links existentes no blog. Para configurar os links de cada área individualmente é necessário adicionar mais alguns códigos.

ALERTA: antes de fazer qualquer alteração, devem copiar o código fonte do blog para um documento de texto para voltar a usar no caso de algo correr mal.

dica blogger #002

Já devem ter reparado que alguns blogs e páginas que visitam têm uma imagem personalizada como ícone na barra de endereço ou quando os adicionam ao favoritos.
Essa imagem chama-se favicon e qualquer pessoa a pode ter na sua pagina/seu blog porque é bastante fácil.

Basta ter duas imagens iguais, uma no formato PNG e outra no formato ICO e aloja-las algures na net.
Depois de alojadas, é preciso entrar na edição de HTML do blog e procurar por</head>.
Antes desta tag cola-se o seguinte código:
<link href='endereço da imagem ICO' rel='shortcut icon'/>
<link href='endereço da imagemPNG' rel='shortcut icon'/>

Gravam-se as alterações e é tudo!

Para conseguir as imagens da forma necessária é necessário ter programas que o permitam fazer e para isso uso os seguites programas:

- Paint.NET para edição de imagem. Este programa é um programa livre, da Microsoft, com bastantes recursos e apenas exige que se tenha instalada uma versão recente do NET Framework (que podem baixar aqui).
Este programa permite editar qualquer imagem, aplicar transparencias à sua volta, entre muitas outras coisas, e por fim pode-se gravar com o formato PNG e tem-se meio trabalho feito.

- Para conseguir a imagem ICO, uso o Irfanview. Um visualizador de imagens muito pratico e leve.
Com este programa basta abrir a imagem PNG que foi criada com o Paint.NET e salvar a imagem com o formato ICO.

ADENDA:
Para esta imagem funcionar no IE é necessário adicionar, para além dos anteriores, o seguinte código:
<link href='endereço da imagemPNG' rel='shortcut icon' type='image/x-icon'/>

dica blogger #001

Redireccionamento automático

Há uns dias recebi um email em que me foi pedida ajuda por causa de um blog.
Tratava-se de alguém que apesar de ter um blog alojado no Sapo, tinha criado um perfil no Blogger para poder comentar blogs desta ultima plataforma.
Com essa conta no Blogger decidiu criar um blog em que apenas tinha um link que direccionava as visitas para o Sapo, o que podia não acontecer porque toda a gente sabe que existe por aí muita preguiça e o pessoal gosta de parar no destino directamente.

A solução para este caso é (foi) bastante facil e é a seguinte...

No blog que é criado no Blogger, entramos em Esquema e depois em Editar HTML, procuramos pela tag <head> e antes dessa tag inserimos o seguinte código:

<script language="JavaScript">
window.location.replace('endereço do blog de destino');
</script>

Gravamos as alterações e é tudo.
Depois disto, quem clicar no link que aparece no perfil irá ser redireccionado automaticamente.

Nota: Este código serve para redireccionar para qualquer endereço por isso não mandem ninguém para pagina menos próprias, ok?