Guia Blogger

Ícones de Redes Sociais

2010-05-10T22:36:00.003-03:00

Compartilhe

Nesse tutorial eu vou ensinar a colocar ícones para redes sociais no rodapé dos posts.
O código já possui algumas das novidades do CSS3.
Para começar, procure por ]]></b:skin> e cole o código abaixo antes dele:

/* BOOKMARKS by GB */

.bookmarks {
text-align: center;
}
.bookmarks img {
border: none;
opacity:0.4;
filter:alpha(opacity=40);
border: 2px solid silver;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 2px;
width: 18px;
height: 18px;
}
.bookmarks img:hover {
opacity:1;
filter:alpha(opacity=1);
border: 2px solid silver;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 2px;
}

Salve.
Depois, marque a opção Expandir modelos de widgets e cole o código abaixo antes de <div class='post-footer-line post-footer-line-3'/>.

<b:if cond='data:blog.pageType == "item"'>
<div class='bookmarks'>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "/&title=" + data:post.title' rel='nofollow' target='_blank' title='Digg'><img alt='Digg' class='sociable-hovers' src='http://img443.imageshack.us/img443/2451/diggq.png' title='Digg'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "/&title=" + data:post.title' rel='nofollow' target='_blank' title='del.icio.us'><img alt='del.icio.us' class='sociable-hovers' src='http://img163.imageshack.us/img163/8637/deliciousn.png' title='del.icio.us'/></a>
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "/&t=" + data:post.title' rel='nofollow' target='_blank' title='Facebook'><img alt='Facebook' class='sociable-hovers' src='http://img338.imageshack.us/img338/6397/facebookiconqf.gif' title='Facebook'/></a>
<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "/&title=" + data:post.title' rel='nofollow' target='_blank' title='Google'><img alt='Google' class='sociable-hovers' src='http://img87.imageshack.us/img87/1899/googlei.gif' title='Google'/></a>
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&=" + data:post.url + "/&title=" + data:post.title' rel='nofollow' target='_blank' title='BlinkList'><img alt='BlinkList' class='sociable-hovers' src='http://img338.imageshack.us/img338/8854/blinklist.png' title='BlinkList'/></a>
<a expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "/&t=" + data:post.title' rel='nofollow' target='_blank' title='MySpace'><img alt='MySpace' class='sociable-hovers' src='http://img338.imageshack.us/img338/707/bookmarksitemyspace.gif' title='MySpace'/></a>
<a expr:href='"http://www.newsvine.com/_tools/seed&save?u=" + data:post.url + "/&h=" + data:post.title' rel='nofollow' target='_blank' title='NewsVine'><img alt='NewsVine' class='sociable-hovers' src='http://img217.imageshack.us/img217/3537/iconnewsvine.gif' title='NewsVine'/></a>
<a expr:href='"http://www.syxt.com.br/rec6/link.php?url=" + data:post.url + "/&=" + data:post.title' rel='nofollow' target='_blank' title='Rec6'><img alt='Rec6' class='sociable-hovers' src='http://img580.imageshack.us/img580/7093/rec6.png' title='Rec6'/></a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "/&title=" + data:post.title' rel='nofollow' target='_blank' title='Reddit'><img alt='Reddit' class='sociable-hovers' src='http://img217.imageshack.us/img217/921/ssiconreddit.jpg' title='Reddit'/></a>
<a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "/&title=" + data:post.title' rel='nofollow' target='_blank' title='Spurl'><img alt='Spurl' class='sociable-hovers' src='http://img217.imageshack.us/img217/9018/spurl.gif' title='Spurl'/></a>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "/&title=" + data:post.title' rel='nofollow' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' class='sociable-hovers' src='http://img87.imageshack.us/img87/3241/stumbleupon.gif' title='StumbleUpon'/></a>
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "/&title=" + data:post.title' rel='nofollow' target='_blank' title='TwitThis'><img alt='TwitThis' class='sociable-hovers' src='http://img87.imageshack.us/img87/9946/icotwitter.jpg' title='TwitThis'/></a>
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Yahoo!' class='rsociales-sobre' src='http://img188.imageshack.us/img188/41/yahoou.png'/></a>
<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='rsociales-sobre' src='http://img188.imageshack.us/img188/4666/technorati.gif'/></a>
<a expr:href='"http://dihitt.com.br?botao=enviar&url=" + data:post.url + "&titulo=" + data:post.title' target='_blank' title='Incluir no diHITT'><img class='rsociales-sobre' src='http://img192.imageshack.us/img192/29/dihitt.png'/></a>
<a expr:href='"http://ueba.com.br/NovoLink?url=" + data:post.url + "&titulo=" + data:post.title' target='_blank' title='Incluir no Uêba'><img class='rsociales-sobre' src='http://img204.imageshack.us/img204/9272/ueba.png'/></a>
<a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Blogmarks' class='rsociales-sobre' src='http://img293.imageshack.us/img293/4683/blogmarks.gif'/></a>
<a expr:href='data:post.emailPostUrl' target='_blank' title='Enviar por Email'><img class='rsociales-sobre' src='http://img87.imageshack.us/img87/923/mail2.png'/></a>
<a expr:href='"http://www.linkk.com.br/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Incluir no LinkK'><img class='rsociales-sobre' src='http://img580.imageshack.us/img580/8496/linkk.png'/></a>
<a href='http://SEUBLOG.blogspot.com/feeds/posts/default'><img alt='Assinar feed' class='rsociales-sobre' src='http://img62.imageshack.us/img62/3664/ffeediconmd7f6717.gif'/></a>
</div>
</b:if>

No lugar da URL em azul, você deve colocar o endereço do seu feed. Visualize para ver se está tudo certo, se estiver, clique em salvar e pronto.
Ficou alguma dúvida? Deixe um comentário!
Até a próxima...

Dia 17.11.11

Uma nova versão deste gadget estará disponível em breve.

Sombras com CSS

2010-05-06T11:55:00.001-03:00

Os modulos de CSS3 trazem muitas novidades. Continuando a série de artigos sobre ele, eu falo hoje sobre duas funcionalidades chamadas box-shadow e text-shadow que respectivamente servem para aplicar sombras no fundo de elementos e sombra nos textos.
Veja os exemplos:

#DIV com box-shadow

#DIV com text-shadow

Veja o código de box-shadow:

-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;

e o de text-shadow:

text-shadow: 2px 2px 2px #000;

Os valores destacados em vermelho e verde definem respectivamente a posição horizontal e vertical da sombra em relação ao elemento, as partes em azul definem a espessura da sombra e em roxo, a sua cor.
Esse código deve ser colocado na parte do CSS do seu site/blog. Mais comum entre as tags <style> e </style>. Ficou alguma dúvida? Deixe um comentário.
Até a próxima!

Bordas arredondadas com CSS3

2010-05-01T19:50:00.002-03:00

Uma das novidades trazidas pelo CSS3 é que as bordas dos elementos HTML podem ser arredondadas.
Veja um exemplo com as #DIVs abaixo:

Lorem Ipsum

O código para bordas arredondadas como na caixa acima é bastante simples:

-Moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
border: 1px solid #000;
border: 1px solid # 000;
padding: 10px;

A classe border-radius (destacada em vermelho) deve ser repetida dessas três formas para que possa funcionar em diversos navegadores. Mesmo assim, alguns navegadores mais antigos podem não aceitar a transformação.
Veja outros exemplos do que pode ser feito:

Lorem Ipsum

Ainda existem outras formas de estilizar as bordas, vejam o código:

-Moz-border-radius: cima direita baixo esquerda;
-webkit-border-radius: cima direita baixo esquerda;
border-radius: cima direita baixo esquerda;

Modificando as partes em negrito (cima, direita, baixo, esquerda) por algum número inteiro você modifica a borda de cada lado do elemento.
Lembre-se de que os números devem ser iguais nas três linhas a menos que você queira que para cada navegador seja exibido uma borda diferente.
Vejamos agora um exemplo de como colocar o código na parte de estilos do seu blog. O código deve ser colocado entre as chaves e nesse caso, será usado como exemplo o código de estilo da #SIDEBAR:

#sidebar {
width: 200px;
padding: 5px;
border: 2px solid #99CC00;
-Moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

Ficou alguma dúvida? Não conseguiu? Precisa de ajuda? É só deixar um comentário.
Enjoy!

Links para o final de semana

2010-04-30T19:52:00.001-03:00

Para esse final de semana eu tenho uns links bem legais pra você ja ir entrando na onda do CSS e aprender um pouco mais.
Vejam as novidades do site do Maujor (http://maujor.com/) e também o W3C (http://www.w3.org/, em inglês).
Até a próxima!

CSS3 - Introdução

2010-04-30T15:40:00.001-03:00

Pra minha volta, eu preparei umas coisas sobre o CSS e CSS3.
Pra começar, você sabe o que é CSS?
O CSS (Cascading Style Sheets) é uma linguagem de estilo usada para definir a aparência de arquivos escritos em uma linguagem de marcação, como HTML e XML. Ele foi criado para separar o conteúdo da forma, ao mesmo tempo que permite aos designers manter um controle muito mais preciso sobre a aparência das páginas.
A "terceira geração do CSS" permite mais controle sobre a forma.

CSS 1 já significou um avance considerável na hora de desenhar páginas web, trazendo muito maior controle dos elementos da página. Porém, como ainda ficaram muitas coisas que os designers desejavam fazer, mas que CSS não permitia especificar, estes deviam fazer uso de truques para o design.
CSS 2 incorporou algumas novidades interessantes, que hoje já utilizamos habitualmente, porém CSS 3 ainda avança um pouco mais na direção, de dar mais controle sobre os elementos da página.

O CSS3 traz muitas propriedades novas.
As principais novidades são:
Bordas

border-color
border-image
border-radius
box-shadow

Fundos

background-origin
background-clip
background-size
fazer camadas com múltiplas imagens de fundo

Cor

cores HSL
cores HSLA
cores RGBA
Opacidade

Texto

text-shadow
text-overflow
Ruptura de palavras longas

Interface

box-sizing
resize
outline
nav-top, nav-right, nav-bottom, nav-left

Seletores

Seletores por atributos

Modelo de caixa básico

overflow-x, overflow-y

Outros

media queries
criação de múltiplas colunas de texto
propriedades orientadas a discurso ou leitura automática de páginas web
Web Fonts

Nos próximos artigos você vai encontrar informações detalhadas sobre cada um desses itens.

Ligações Externas:
CSS3
CSS Town
W3Schools CSS Tutorial
Criar WEB

Quem é vivo sempre aparece!

2010-04-30T03:36:00.001-03:00

Tudo o que vai um dia volta, tipo Frisbee

Depois de muito tempo sem postar nada, eu vou voltar com algumas novidades.
Pra começar, todos os artigos do blog publicados antes de 29/04 serão revisados para que todos os erros existentes em scripts, tutoriais e etc. sejam corrigidos. Depois, eu vou publicar uns tutoriais superinteressantes sobre CSS3 e uns scripts novos que eu fiz.
Você poderá reconhecer os artigos revisados pela marca abaixo:

Até a próxima!

Os créditos da imagem são de FreakingNews.com

Feliz Ano Novo!

2010-01-01T00:00:00.001-02:00

Lightbox GB

2009-11-01T00:17:00.015-02:00

Lightbox - ;^)

Um lightbox normalmente é um gerenciador de imagem em CSS que permite a imagem abrir na tela sem precisar carrega uma nova pagina, facilita a organização das janelas e deixa o ambiente navegável com uma cara moderna.
Com um pouco de CSS, HTMl e JavaSCRIPT eu fiz o meu próprio lightbox.
Pronto para começar a instalação?
Então, vamos lá.
Para começar, vá no painel do seu blog, selecione Layout > Editar HTML e faça um becape do seu template. Ainda nessa página, cole o código abaixo antes de </head> (aperte CTRL+F para encontrar).

Depois, cole o código abaixo antes de </body>.

<div id="lightbox" onContextMenu="return false">
<center>
<div id="between" class="dragme">
<div id="content">
<img src='load.gif'/>
</div>
<h6>Lightbox by <a href="http://guiab.blogspot.com/" target="_blank">Guia Blogger</a></h6>
</div>
</div>
</center>
</div>

Visualiza para ver se há erros, depois salve.
Quando quiser acionar o lightbox por um link por exemplo:

As partes em negrito devem ser alteradas de acordo com a sua necessidade.
É isso. Se ficou alguma dúvida, encontrou algum erro, deixe um comentário.
P.S.: Para ver o script em ação, clique aqui

Twitter Count

2009-07-21T10:00:00.003-03:00

O Twitter Counter é um site que oferece alguns serviços gratuitos como widgets e estatísticas do seu Twitter. Não precisa se cadastrar, é só informar o seu nome de usuário do Twitter para ter acesso a esse conteúdo.
Veja uns exemplos de widgets:

Para ficar mais fácil, preencha o formulário abaixo e escolha uma das opções.

Template Prototype NB1

2009-07-20T16:11:00.001-03:00

Download

Bem simples mas é bonito e leve, o NB1 é o primeiro de uma série de templates que eu chamo de Prototypes.
Informações:

2 colunas principais (destaque para os artigos);
3 colunas no rodapé;
Cores principais: verde e preto;
Technorati Tags;
Botão Twit This;
Ícones para redes sociais;
Formulário de comentários embutido;

Não precisa configurar nada, já vem tudo pronto.
É isso. Em breve sai uma variação desse template.
Tchau, e Feliz dia Do Amigo.

TwitterFox - Baixar, Configurar e Usar.

2009-07-15T10:02:00.001-03:00

Download

Esta extensão permite ver seu status do twitter. Ela adiciona um pequeno ícone na barra de status que avisa quando seus amigos atualizarem seu status. Também tem um pequeno campo de entrada de texto para atualizar o seu status.

Como usar
- Clique no ícone na barra de status para configurar.

Depois de instalar o TwitterFox no seu Firefox, o ícone do TF aparece na barra de status com um ícone cinza. Clique no ícone para abrir o painel de configurações.

Clique no botão "adicionar conta" para inserir o seu nome de usuário e senha do Twitter. Em seguida, clique em OK para conectar Twitter.
-Saiba o que seus amigos twittam, com um pequeno balão

Quando seus amigos atualizem seus tweets, o TwitterFox mostra um pequeno balão no canto inferior direito da sua janela do navegador.

Se você clicar em um ícone de seu amigo, o TF abre o twitter de seu amigo em uma nova guia. Se você já abriu a página na outra guia, o TF vai para essa guia.

Existe um botão para resposta e outro para adicionar aos favoritos. Você pode clicar no botão Responder para escrever uma resposta e você pode clicar no outro botão para adicionar esse status aos seus favoritos.

-Veja os últimos 40 tweets ou atualiza seu status

Quando você clica no ícone do TF na barra de status, uma janela se abre no canto inferior-direito do seu navegador. Lá aparecem as últimos 40 atualizações do seu Twitter e um campo para entrada de texto. Se você quiser atualizar o seu status, digite sua mensagem na caixa de texto.
O TwitterFox fecha automaticamente a janela quando você clica em um ícone do amigo, um hiperlink em uma mensagem, ou no logotipo do TF. Se você não quiser fechar a janela automaticamente, você pode alterar isso voltando no painel de configurações e mudando a opção "Open/Close window".
-Menu de contexto

Clique com o botão direito sobre cada tweet para abrir um menu de contexto. O menu de contexto tem "Copiar", "Retweet", "Abrir este tweet na nova guia" e "Excluir este tweet".
- Reduzir ou não as URLs

Se quiser verificar uma URL antes de abrir uma URL codificada, mova o mouse sobre a url reduzida. O TwitterFox descodifica o tinyURL ao URL original. E o TF automaticamente descodifica tinyurl.com, is.gd, e bit.ly. Além disso, ele codifica seu URL ao longo de seus tweets antes de postar no Twitter.
-Multiconta

O com o TF você pode configurar várias contas. Para outra conta, clique com o botão direot do mouse sobre o ícone do TF, aponte para "Change Account" e escolha a nova conta.
-Notificação Sonora
Você pode definir o seu som favorito para uma notificação de atualização. Você pode usar um arquivo WAV ou um ficheiro AIFF (MAC). O TwitterFox não contém quaisquer ficheiros de som.

Créditos:
* Imagem do titulo - http://www.softdownload.com.br/
* Outras imagens deste artigo - http://twitterfox.net/

Eu | u3

2009-07-14T15:38:00.002-03:00

Quem sou eu?
Oi! Eu sou Jean Nunes.
Eu gosto muito de música, internet, video-games, livros e afins.
De vez em quando eu tenho meus dias de mau humor, mas é difícil (não impossível).
Quando eu quero alguma coisa, eu vou atrás. Posso até não conseguir o que quero, mas pelo menos posso dizer que eu tentei, e muito.
Talvez por ler tanto, eu consigo aprender as coisas sozinho. Por exemplo, quando comecei meu primeiro blog, eu só sabia publicar meus posts. Depois de um tempo, "garrei uma raiva" do template dele e fui ver se dava pra mudar (Aí eu encontrei o TNB). Gostei de todos os temas de lé e escolhi um (não lembro qual). Quando eu vi que eu podia deixar o tema com a minha cara, eu fui atrás de tudo o que eu podia. Baixava e-books, lia uns artigos aqui (no Compulsivo e Dicas Blogger), perguntava alí e... puff!! Fiz meu primeiro template (eu tenho aqui no GB, mas o link quebrou e eu não consegui o XML de volta).
Por que criar um blog?
Porque eu gosto muito de escrever. No primeiro blog que eu tive, eu escrevia sobre o que eu lia. Mas era um blog deserto. Não tinha nada. Nem um widgetzinho se quer.
Quando resolvi criar o GB?
Não foi fácil criar meu primeiro template, mas também não foi muito difícil. Por isso fiz o Guia Blogger. Para reunir tudo o que eu aprendia, para quando precisasse.
Qual foi meu primeiro artigo?
Foi uma das primerias coisas que eu aprendi, "Destacar áreas do post".
Qual foi, e quem deixou o primeiro comentário aqui?
Foi a Juliana Sardinha do Dicas Blogger que comentou no artigo da primeira versão do Comentários com Smiles.
Ela disse:

Oi Jean! entrou também para o ramo? Tá bonito o blog heim? Bjs, Juliana

Quando eu li, o meu primeiro comentário, méldéls!! Foi a melhor coisa do mundo. Fiquei muito bobo. Mas, depois fui me acostumando.
Tem alguma pergunta pra mim?
Deixa um comentário!

Botão "Twit This"

2009-07-13T15:01:00.004-03:00

Divulgue seu blog (também) pelo twitter, adicionando o botão "Twit This" nas suas postagens.

É tudo uma questão de conectar e compartilhar, e o Twitter é um mestre em fazer isso. Quando um leitor clica no botão, o artigo é enviado para seu Twitter e compartilhado com toda sua rede de amigos.
Antes de começar, faça um becape do seu template.
Vá para seu Painel > Layout > Editar HTML > Marque a opção 'Expandir modelos de widgets'. Depois, procure por:

E embaixo, cole este código:

Para mudar o ícone, altere o endereço em vermelho pelo endereço da imagem de sua preferência.
Visto no BloggerUniversity.

Adicionar Botão "+Technorati"

2009-07-12T14:47:00.003-03:00

Eu vi este botão no Usuário Compulsivo, resolvi colocar aqui no blog e agora passo o código para vocês. Ele fica ao lado de cada marcador dos posts do seu blog. Quando clicar no botão, o leitor vai ser redirecionado a uma página do Technorati onde aparecerá uma lista com seus artigos que possuem esse mesmo marcador.

Para que a lista apareça corretamente, seu blog precisa estar cadastrado no Technorati.
Não sabe como se cadastrar? Veja este tutorial.
Antes de começar, faça um becape do seu template. Vá para seu Painel > Layout > Editar HTML > Marque a opção 'Expandir modelos de widgets'. Depois, procure por:

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>

E substitua a parte em vermelho pelo código abaixo:

Visualiza para ver se está certo, depois salve.

Se quiser ver um exemplo de como fica, veja meus marcadores um pouco mais para baixo.

Cadastre-se no Technorati.

2009-07-11T23:34:00.003-03:00

Eu começo agora uma série de tutoriais para você poder aproveitar mais algumas das mais conhecidas redes sociais, a começar pelo Technorati. Você poderá adicionar widgets em seus blogs, aprender mais sobre redes sociais e etc.

Para começar...

Technorati é um motor de busca de Internet especializado na busca por blogs; e faz concorrência às ferramentas de busca de blogs do Google e Yahoo. Em Julho de 2006, a quantidade de blogs cadastrados no site ultrapassou a barreira dos 50 milhões, e cerca de 70000 blogs são cadastrados no site diariamente.
O site foi criado em 2002 por David Sifry e sua sede está localizada na cidade de San Francisco, Califórnia.

fonte: Wikipédia.

1. Entre na página de cadastro do Technorati (http://technorati.com/account/signup/?destination=/)

Na parte em vermelho, você deve digitar em cada campo, seu primeiro e último nome respectivamente;
Na parte em destaque verde, digite o nome de usuário que você utilizará para se conectar ao Technorati;
Nos campos destacados com amarelo, digite seu e-mail. Digite-o nos dois campos (o segundo é para confirmação);
Nos campos destacados com azul, digite uma senha. Ela deve conter no mínimo 6 carácteres e têm que ser digitada nos dois campos (assim como o e-mail, a senha também precisa ser confirmada);
Em roxo, aparece o Captcha (isso serve para evitar spam) . Digite as duas palavras que aparecerem, separadas por um espaço;
Marque a checkbox destacada em rosa para informar que você aceita os termos de uso e a política de privacidade;
Marque o último checkbox (Em inglês "I have a blog and would like to claim it now ", em portugûes "
Eu tenho um blog e gostaria de reclamar agora");
Clique em Join para enviar o cadastro.

2. Se todas as informações estiverem corretas, aparecerá uma outra página pedindo para que você digite um código. Esqueça essa página.
3. Agora abra a caixa de entrada do email que você usou para se cadastrar. E procure o e-mail enviado pelo Technorati com o assunto "Welcome to Technorati!".
O corpo do e-mail vai estar mais ou menos assim:

Hello, !

You're almost ready to start using Technorati! To verify your email address and get started, please go to:

http://technorati.com/account/verify?username=SEU NOME DE USUARIO&key=SEU CÓDIGO DE VERIFICAÇÃO

If the above link is not clickable, please copy and paste the link into your web browser or
copy and paste the following key into the text box on the page you landed on after signing up:

Please do not reply to this email. If you require further help please visit our support forum at http://support.technorati.com/support/troubleshooting .

Thank you for using Technorati!

4. Clique link destacado em vermelho (mas atenção: ele só esta vermelho aqui no tutorial).
5. Uma nova página se abrirá com o titulo "Technorati: Claim a new blog". No campor URL digite o endereço do seu blog e clique em Begin Claim.

6. Na página que se abrir procure pela caixa Complete your blog claim:

Copie o código mostrado na parte em vermelho e publique o em um novo artigo do seu blog.
7. Concluída a parte 6, clique em Complete Claim. Preencha os campos mostrados abaixo.

URL: é preenchido automaticamente com o endereço do seu blog;
DESCRIPTION: digite uma descrição para seu blog com no máximo 250 caracteres.
TAGs: digite em cada campo (não precisa ser em tudos) uma palavra que rotule o seu blog.

Um pouco mais para baixo nessa mesma página, procure por Save Blog Info, e então clique.
Pronto! Seu blog já está cadastrado no Technorati.
Se você quiser adicionar mais blogs, entre nessa página, faça login se necessário, e continue de acordo com a parte 5 desse artigo.

Template HeadLines Red

2009-07-10T19:49:00.001-03:00

Baixar

O HeadLines Red é mais um template convertido para o blogger. Como você pode ver na foto, ele têm duas colunas principais, menu horizontal e cabeçalho. Esse é mais um da coleção de EasyThemes: é só instalar e usar. Não precisa configurar! [olha a rima ;-)]
Por enquanto é só uma conversão. Eu estou preparando uns addons para esses temas.
Lembre-se: NÃO REMOVA OS CRÉDITOS.
Abraço.

Template Echo Green

2009-07-09T18:41:00.001-03:00

Baixar

A todo o vapor, sai mais um template convertido. Dessa vez o Echo Green.
Informações:

Duas colunas principais.
Cabeçalho.
Sub-header.
Rodapé.
Não precisa configurar nada no template. Ele vem pronto para uso.

Não removam os créditos!
Valeu!

Template VioletRay

2009-07-09T18:13:00.001-03:00

Download

Entre na onda da conversão. E esse é o meu primeiro template convertido. E ele não veio do Wordpress não! Eu achei no FreeCSSTemplates.com . Em breve mais templates convertidos.
Informações:

Duas colunas principais.
Uma coluna no rodapé.
Menu Horizontal no topo.
Caixa de busca embutida.
Formulário de comentários no rodapé do artigo.
Hack de resumo de postagens.

Configuração:
Para que o hack de resumo de postagens funcione, leia a parte 2 deste artigo:
http://guiab.blogspot.com/2008/09/resumir-postagens.html

Vale também lembrar que, você pode modificar a fonte ou cor dos créditos mas não removê-los.

Template N1

2009-07-08T10:20:00.005-03:00

Baixar

Depois de muito tempo longe, eu estou de volta!
Dessa vez, vou abrir o mês com um novo tema para blogger/blogspot. é o TN1 (imagem acima).
Informações

Cor principal: azul;
Colunas: 2 colunas principal ( post | sidebar ) mais 3 colunas no rodapé;
Artigos Relacionados;
Destaque para citações.

Você pode colocar uma imagem no cabeçalho direto do painel EDITAR LAYOUT.

É isso.
Valeu!

PageRank 4

2009-06-07T03:54:00.001-03:00

Foi muito rápido. Há dois artigos atráz eu estava falando que o Gb estava com o pagerank 3. Mas agora, de acordo com o Verificador de Page Rank do site Oficina da Net o blog está no 4º nível do page rank.
Não tenho nem o que dizer, só:
OBRIGADO GENTE!
E desculpa se eu estou demorando pra escrever um artigo, é que eu estou preparando um hack de Lightbox. Você pode ver como vai funcionar clicando no meu link de contato (carta branca do lado direito, embaixo do cabeçalho e em cima da caixa de novidades [que aliás, é uma novidade do blog, quem quiser, é só clicar aqui !] ).

Abraço! E até logo...
*Créditos da Imagem: http://www.mestreseo.com.br/pagerank/pagerank-atualizado-2008

Comentários com Smiles (Re-do)

2009-04-20T10:03:00.004-03:00

Eu já tinha publicado um artigo desses aqui no GB, mas em alguns funcionava em outros não. Então, eu resolvi fazer meu próprio script de comentários com smiles.
Em um único passo você pode adicionar esse hack no seu blogspot. É só copiar o script que está aqui embaixo e colar antes de </body>

Para que um caráctere funcione, você precisa escrever uma das palavra abaixo entre * (asteriscos). Exemplo : *riso*.

:)
:D
:$
:(
:p
;)
:k
:@
:#
:x
:o

É isso, qualquer dúvidas deixem um comentário.

Update 30/04: Eu desativei o script de comentários com smiles porque ele entrou em conflito com o script de lightbox. Para ver o script de comentários com smiles em ação, clique AQUI!

PageRank 3

2009-04-03T20:50:00.001-03:00

Eu vi um artigo no [Ferramentas Blog] que dizia que o Google havia atualizado o pagerank. Fui logo ver o PR do blog e tive a surpresa: agora o GB está com o pagerank 3!!!!
Valeu Gente!!!!

O que muda com o acordo ortográfico?

2009-03-31T01:06:00.001-03:00

No começo eu achei que as mudanças não significariam nada. Mas, vendo um artigo do G1 eu pude ver que não era tão insignificante assim.
Não é muito difícil entender e gravar as modificações lendo o Guia Da Reforma Ortográfica.
Veja o que muda:

Trema – desaparece em todas as palavras
Antes	Depois
Freqüente, lingüiça, agüentar	Frequente, linguiça, aguentar

* Fica o acento em nomes como Müller

Acentuação 1 – some o acento dos ditongos abertos éi e ói das palavras paroxítonas (as que têm a penúltima sílaba mais forte)
Antes	Depois
Européia, idéia, heróico, apóio, bóia, asteróide, Coréia, estréia, jóia, platéia, paranóia, jibóia, assembléia	Europeia, ideia, heroico, apoio, boia, asteroide, Coreia, estreia, joia, plateia, paranoia, jiboia, assembleia

* Herói, papéis, troféu mantêm o acento (porque têm a última sílaba mais forte)

Acentuação 2 – some o acento no i e no u fortes depois de ditongos (junção de duas vogais), em palavras paroxítonas
Antes	Depois
Baiúca, bocaiúva, feiúra	Baiuca, bocaiuva, feiura

* Se o i e o u estiverem na última sílaba, o acento continua como em: tuiuiú ou Piauí

Acentuação 3 – some o acento circunflexo das palavras terminadas em êem e ôo (ou ôos)
Antes	Depois
Crêem, dêem, lêem, vêem, prevêem, vôo, enjôos	Creem, deem, leem, veem, preveem, voo, enjoos

Acentuação 4 – some o acento diferencial
Antes	Depois
Pára, péla, pêlo, pólo, pêra, côa	Para, pela, pelo, polo, pera, coa

* Não some o acento diferencial em pôr (verbo) / por (preposição) e pôde (pretérito) / pode (presente). Fôrma, para diferenciar de forma, pode receber acento circunflexo

Acentuação 5 – some o acento agudo no u forte nos grupos gue, gui, que, qui, de verbos como averiguar, apaziguar, arguir, redarguir, enxaguar
Antes	Depois
Averigúe, apazigúe, ele argúi, enxagúe você	Averigue, apazigue, ele argui, enxague você

Observação: as demais regras de acentuação permanecem as mesmas

Hífen – veja como ficam as principais regras do hífen com prefixos:
Prefixos	Usa hífen	Não usa hífen
Agro, ante, anti, arqui, auto, contra, extra, infra, intra, macro, mega, micro, maxi, mini, semi, sobre, supra, tele, ultra...	Quando a palavra seguinte começa com h ou com vogal igual à última do prefixo: auto-hipnose, auto-observação, anti-herói, anti-imperalista, micro-ondas, mini-hotel	Em todos os demais casos: autorretrato, autossustentável, autoanálise, autocontrole, antirracista, antissocial, antivírus, minidicionário, minissaia, minirreforma, ultrassom
Hiper, inter, super	Quando a palavra seguinte começa com h ou com r: super-homem, inter-regional	Em todos os demais casos: hiperinflação, supersônico
Sub	Quando a palavra seguinte começa com b, h ou r: sub-base, sub-reino, sub-humano	Em todos os demais casos: subsecretário, subeditor
Vice	Sempre: vice-rei, vice-presidente
Pan, circum	Quando a palavra seguinte começa com h, m, n ou vogais: pan-americano, circum-hospitalar	Em todos os demais casos: pansexual, circuncisão

Você também pode baixar uma versão em PDF desse artigo, direto do G1, clicando aqui!
Fonte: G1.globo.com

onMouseOver=Muda Imagem

2009-03-29T14:55:00.001-03:00

Já faz um tempo que eu vi no Ferramentas Blog, um artigo que ensinava como fazer uma imagem mudar quando passar o mouse sobre ela. Eu achei muito legal a dica, mas encontrei um probeminha: se duas imagens tivessem o mesmo nome, apenas uma delas mudava. Então eu vou passar agora, um outro script muito simples, e que é muito difícil (impossível) acontecer o mesmo erro.

Um exemplo, você pode ver com a imagem abaixo:

E, se você quiser proteger a imagem contra cópia, coloque o seguinte atributo no código: onContextMenu="return false". Ex:

Valeu!!!

E-Referer - De onde vem seus visitantes?

2009-02-24T12:30:00.001-03:00

O site E-Referer oferece uma ferramenta gratuita que mostra a origem dos visitantes do seu blog e a quantidade de visitas que lhe enviou.
Eu vou ensinar agora, em três passos simples, como ter seu widget.

1°: Entre em http://www.e-referer.com/register.php para se registrar. Na página que se abrir, preencha os campos com seu nome, nome de usuário, email, senha e confirmação de senha nessa ordem e clique em Submit (como na imagem ao lado);
Uma mensagem aparecerá na tela informando (em inglês) que seu registro foi efetuado com sucesso e que sua conta já está ativada. Procure pelo trecho que diz "You can click here to go directly to your dashboard" e clique em Click Here;
Na janela que se abriu, procure e clique em Generate Code;
Na página que se abriu, pegue o código do seu widget. Abra o painel do seu blog, clique eu Layout > Elementos de Página e adicione um elemento de página HTML/Javascript. Cole o código do widget na caixa conteúdo.

Pronto! Seu widget foi adicionado.
Você pode usar CSS para customizar o seu widget.
Se você remover o link da e-refferer do widget, ele não funciona!
Quer ver como fica?

www.e-referrer.com

Este é o widget do GB (^).
Valeu!