Campanha “Atualize o seu navegador”

Enquanto eu olhava os tweets do @tecnologianet, descobri a campanha Atualize seu Navegador, uma iniciativa muito bacana criada pelo Richard Barros, um web designer que sabe o quanto é difícil criar um ambiente web que seja compatível com todos os navegadores.

Imagem ao lado do texto ou link

Alguns blogs tem uma pequena imagem ao lado dos links ou titulos, clique aqui para ver um exemplo, para colocar um seta ou qualquer outra imagem ao lado de um texto ou link o código é:

.seta a{background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px;
}

Isso pode ser usado em qualquer tipo de texto sendo um link ou não, apenas tenha o cuidado de quando usar isso num link colocar o código da outra imagem para quando o mouse estiver sobre o link, desse jeito:

.seta a:hover{background-image: url(URL DA IMAGEM);
}

O nome .seta é apenas um exemplo no caso do Blogspot para colocar isso nos links da sidebar, você deve colocar esse código nessa parte:

.sidebar ul li {.....

Mas caso o seu blog não tenha especificado o link(a, a:hover) da sidebar precisamos colocar e o código com a imagem ficará assim:

.sidebar ul li a{background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px;
}

.sidebar ul li a:hover{background-image: url(URL DA IMAGEM);
}

Isso porque se colocar no começo do código onde tem: a:link, a:visited isso colocará essa imagem ao lado de todos os links do seu site.

Contador de Visitas

Existem muitos contadores de visitas grátis na internet um que usamos desde o começo deste blog e não podemos reclamar é o http://www.sitemeter.com. O primeiro passo pra colocar esse contador no seu blog é fazer um cadastro, esse site é em inglês, mas o cadastro é simples. Na página inicial do Sitemeter clique em sign up isso abre uma página para você escolher se quer um contador grátis ou pago, sempre usamos a versão grátis(free) e achamos muito boa, então nessa página sugerimos que escolha a versão free. Durante o cadastro não será pedido para cadastrar uma senha porque eles geram uma senha automaticamente e enviam para seu endereço de email.

Após isso quando fizer login (colocar seu codename e password) na tela que aparecer clique na palavra manager depois disso no menu do lado esquerdo tem varias opções clique em HTML code e o site mostrará o código do seu contador então é só copiar esse código para colocar no seu blog.

Outra coisa que podemos fazer é escolher o modelo do contador que irá aparecer no blog para fazer isso clique em meter style no menu nessa mesma pagina que pegou o código, isso vai mostrar algumas opções de contador para você escolher, depois é só clicar para salvar.

Agora vamos colocar o código que você copiou no seu blog, vá a pagina layout clique para adicionar elemento de pagina e escolha a opção html/javascript, cole o código do contador e clique para salvar e já está pronto. Na próxima vez que entrar no blog já irá ver o contador. Quando quiser mudar a aparência do contador você não precisa mais mexer nesse código só precisa ir ao sitemeter e mudar o estilo por lá como explicamos acima, pois o código sempre será o mesmo.

Status do MSN no Blog

Para mostrar seu status do MSN no seu blog entre no link:

http://settings.messenger.live.com/Applications/WebSettings.aspx

Isso vai levar você para uma página onde encontrará algumas opções de como mostrar seu status do MSN no seu blog, inclusive se todos ou não poderão ver quando você estiver on-line.

Você pode escolher se quer mostrar somente o ícone de status, um botão que aparece seu nome quando você está conectado(isso porque mesmo quando estiver com o status de ocupado e outros, seu nome ainda aparecerá) e ainda outra coisa que interessante para colocar no blog é uma janela para mensagens instantâneas para que seus visitantes possam escrever para você através do seu blog quando você estiver on-line e você recebe a mensagem numa janela de conversa normal como se fosse um dos seus contatos do MSN.

Colocar ou alterar as bordas

Existem vários modos de mudar o visual do blog somente utilizando o estilo CSS um deles é colocar ou alterar as bordas. Esse código é bem simples e pode se usado em qualquer lugar, serve inclusive para fazer botões quando combinados com uma cor de fundo, além disso podemos usar para colocar bordas nas postagens, menus e qualquer outra coisa no blog. O código das bordas deve ser moficado pela página editar HTML, agora vamos entender melhor esse código:

border: 1px solid #0000FF

1px é a largura

solid é o estilo

#0000FF é a cor

Por exemplo para colocar bordas nos link procure por:

a:link, a:visited {
color:#0000ff;
text-decoration:none;
}

e coloque border: 1px solid #0000FF, dentro das chaves, deixando o código assim:

a:link, a:visited {
border: 1px solid #0000FF;
color:#0000ff;
text-decoration:none;
}

Logo abaixo você pode ver outros exemplos de bordas e alterar como quiser a largura, estilo, cor e se precisa aqui tem o código das cores.

border: 2px dotted #000000

border: 2px dashed #000000

border: 1px solid #0000FF

border: 4px double #FF0000

border: 3px groove #6666FF

border: 4px ridge #FFFFCC

border: 3px inset #FFFF99

border: 2px outset #6699FF

Acidente da Air Frances

A equipe do blog , se manisfesta em solidariedade a todos os familiares das vitimas do voo que vitimou 228 pessoas ,
e recebendo , dos meios de comunicações a noticia de que os pociceis destroços encontrados ñ são do avião ,
esperamos que o procedimento de busca se encerre o mais rapido pocivel e com exito ...