Personalize a caixa de busca do Blogger

Nível: intermediário

Para adicionar a caixa de busca vá até Layout » Elementos da página » Adicionar um gadget » Caixa de pesquisa. Configure-a conforme desejado.

Google Tradutor no browser e no blog

Nível: iniciante

Um dos bookmarks que eu tenho em todos os meus navegadores e recomendo muito é o Google Tradutor.

Para blogueiros, um empecilho muito comum para evoluir na atividade é a dificuldade para ler tutoriais e dicas em outros idiomas, então o Google Tradutor pode ajudar bastante nesse ponto.

[Encerrado] Status de bate-papo no blog

Um dos widgets mais interessantes do Helen Fernanda Ponto Com, meu blog pessoal, é o Status, onde qualquer visitante pode saber se estou on-line e conversar comigo imediatamente caso eu esteja conectada ao respectivo programa.

Social Bar do Google Connect

Nível: intermediário

Comecei a testar a pouco no Helen Fernanda Pink a Social Bar do Google Friend Connect. Fora esse azul cueca insosso que ainda não dá para personalizar, eu achei muito interessante. Você coloca o código como um widget qualquer em qualquer local do seu leiaute que ele vai aparecer sempre no topo ou no rodapé, como você escolher nas configurações antes de gerar o código:

Marcadores em formato de nuvem 2

Nível: avançado

Neste tutorial, os marcadores devem aparecer com tamanhos variados, conforme o número de posts. Se quiser marcadores com tamanho de fonte único, visite o primeiro tutorial.

Adicionar slide de imagens ao Blogger

Para quebrar o jejum de quase um mês sem tutorial para Blogger, vou mostrar um recurso muito fácil e pouco explorado: apresentação de slides com fotos ou quaisquer imagens de álbum ou flog que você já tenha na web.

Coloque seu blog no MySpace

Neste post vou mostrar como eu fiz para colocar os últimos posts do meu blog na minha página de perfil do MySpace. Pré-requisitos:

• Ter conta no MySpace.
• Ter blog, microblog, vlog, flog, álbum de fotos ou qualquer outra página pessoal com feed próprio.

Virada premiada do BlogBlogs

Nível: intermediário

Demorei, mas finalmente vou colocar aqui o esqueleto dos códigos CSS que utilizei ao fazer meus novos widgets de últimos leitores BlogBlogs para participar da promoção Virada Premiada.

Frase aleatória

Atualizado dia 31/05/2015.

Este script exibe uma frase aleatória a cada vez que a página é carregada.

Como redirecionar um site para outro

Atualizado dia 25/05/2015.

Você mudou de endereço e quer que os visitantes sejam automaticamente redirecionados para a nova URL, sem ter que clicar em nada? Eu conheço pelo menos 5 formas diferentes. Escolha a opção mais adequada para o seu caso.

Transição de páginas no Internet Explorer

Meu blog tem uma transição de páginas randômica e até simpática (eu acho :) que só funciona no Internet Explorer. Já que incentivo o uso de navegadores melhores como Firefox e Opera, nunca me importei em partilhar o código que faz mostrar essa transição, mas já que este leitor perguntou, ficarei feliz em mostrar.

Como exibir posts relacionados no Blogger

Nível: avançado

Infelizmente o Blogger ainda não tem a opção de exibir os posts relacionados ao final do texto, para facilitar a vida do leitor e aumentar o tempo de permanência dele no blog.

[Desativado] Mescle feeds usando Pipes

Atualizado dia 02/02/2013.

Esse é um tutorial introdutório inicial para quem quer entender para que serve e como pode ser útil o Pipes. O site é muito mais complexo e permite muito mais do que o que eu vou tentar ensinar aqui, mas mesclar dois ou mais feeds é o começo para quem quer aprender a usar esse aplicativo tão divertido e inovador do Yahoo!.

Como colocar estrelas para classificarem seu posts do Blogger

Hoje comecei a experimentar no blog um recurso do Blogger em Rascunho que permite que os visitantes votem em cada post do blog, marcando entre uma e cinco estrelas. Bem simples e é uma maneira de saber a opinião daquele visitante que nâo tem tempo ou hábito de deixar comentário.

O Draft Blogger, como o próprio nome já diz, é um rascunho do que pode vir a ser o Blogger, então os recursos aparecem nele primeiro para os usuários testarem e para os desenvolvedores irem fazendo as correções necessárias antes de disponibilizarem a versão definitiva no Blogger.

No Draft já estão sendo experimentados vários outros recursos interessantes, o detalhe é que muitos deles exigem códigos específicos que não existem em templates que foram criados antes. Se você usa template antigo, veja como ativar esse recurso.

1. Entre no Draft e logue como se fosse no Blogger tradicional que você já conhece.
2. Escolha o blog que será configurado (se tiver algum blog de testes e/ou algum blog antigo que você não atualiza mais, é melhor começar por ele).
3. Vá até Layout » Elementos da página.
4. Clique no link Editar do elemento Postagens no blog.
5. Marque a opção Mostrar classificação de estrelas e Salve.
   Se o seu template for um template padrão do Blogger e você não fez modificações muito drásticas no código, é bem provável que só isso já seja suficiente para seu blog mostrar a classificação logo abaixo dos marcadores.
6. Se o seu template é personalizado e/ou se por algum motivo seu blog não exibir a classificação após os passos supracitados, vá agora para a página Configurações » Editar HTML.
7. Clique em Expandir modelos de widgets.
8. Clique em Baixar modelo completo e salve seu template. Se já estiver editando o seu blog verdadeiro nem pense em pular este passo.
9. Procure o seguinte código, sendo que a parte em destaque tem que ser idêntica, o resto do código pode ter sido editado anteriormente, então pode ser apenas parecido.
   <div class='post-body entry-content'>
   <data:post.body/>
   <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>
10. Logo abaixo desse código, você vai colocar o código abaixo, sendo que as partes que não estão destacadas você pode editar se e somente se tiver absoluta certeza do que está fazendo:
    <div id='star-ratings'>
    <b:if cond='data:top.showStars'>
    <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
    </b:if>
    </div>
    Do jeito que eu coloquei aqui as estrelas ficarão imediatamente abaixo do texto para o leitor classificar o post assim que terminar de ler. Se não gostar da idéia e conhecer bem o código do seu blog, pode colocar em qualquer outro lugar dentro da parte do seu código que se refere aos posts. Com um pouco de CSS dá para colocar até no meio do texto.
11. Bem, por falar em CSS, chegou a hora de editar a ID do seu novo widget. A ID no CSS é opcional, mas será útil quando você precisar fazer outras personalizações nesse recurso: cores, fonte, bordas, alinhamento, etc. Para isso vá até a folha de estilos do código do seu blog e coloque o seguinte código em destaque. Se não sabe onde está a folha de estilos, coloque imediatamente antes de ]]></b:skin>. Ficará assim:
    #star-ratings {border:2px dotted #ccff00;text-align:center;color:black;}
    ]]></b:skin>

Funcionou? Então comente! Não funcionou? Então reclame!

[Inativo] Como criar e compartilhar sua Radio.Blog

Este post continua no ar como registro histórico. Para soluções mais modernas, visite os posts sobre HTML e CSS.

Relógio para blogs

Descobri mais um relógio bonitinho para você colocar em seu site. Rato, morcego, dragão, ovelha, cachorro, cavalo, tigre, coelho, macaco, galo e tigre são alguns dos animais que você pode escolher para enfeitar seu relógio. Além de bichinhos, você pode escolher os modelos em formato de mapa e de relógio digital, com várias opções de cores. Confira e escolha o seu no ClockLink.

Del.icio.us Códigos

Del.icio.us no blog

Para colocar os favoritos do Del.icio.us em seu blog, ou qualquer outro site, o código é o seguinte:

<script type="text/javascript" src="http://del.icio.us/feeds/js/helenfernanda?count=10"></script>

Onde está escrito helenfernanda coloque seu nome de usuário no site. Onde está 10 coloque o número de links que você quer que apareça.

###### Adicionar ao Del.icio.us

Coloque um link para incentivar seus visitantes a adicionarem sua página ao Del.icio.us. O código é:

<a href="javascript:location.href='http://del.icio.us/post?v=3&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)">adicione ao del.icio.us</a>

Exemplo: adicione ao del.icio.us