Mostrarei como colocar um botão para inscrever em Feed e o novo Web Slice no blog, o botão servirá para inscrever-se no Feed do blog/site ou em um Web Slice do Feed.

Até o momento existem alguns empecilhos em criar um Web Slice dentro de uma página, mas, este botão é uma ótima maneira fácil de ter um Web Slice de forma prática e rápida no blog que tiver um Feed, quase todos tem.

O visitante que adicionar o Web Slice do Feed de seu blog provavelmente verá o título de seu post(artigo) mais recente no topo do navegador.

Esse tipo de gadget é para a fidelização do visitante, ou seja, uma maneira de tentar fazer com que ele retorne a visitar seu blog, aconselho que adicione também um que seja um formulário para inscrever o recebimento de feed por email, para quem usa o blogger, pode também adicionar o gadget de inscrição de Feed/Rss por email

O que é Web Slice?

Web Slice, hoje apenas no Internet Explorer 8, é um jeito de manter algum conteúdo de uma página de site ou blog em um pequeno bloco do navegador(Internet Explorer 8 ou versão mais atualizada), o próprio navegador vai verificar se o conteúdo foi atualizado, porém, o site ou blog(seus webmasters) é quem decidem que parte do site ou página estará disponível para se tornar um slice. Mais...

O botão fica como este ao lado, a diferença é quando o visitante que usa o IE8 passa o mouse nele, aparece o botão Web Slice, além de ter opção de assinar feed, fica como na imagem abaixo.

Fiz alguns testes com o feed do Feed burner e o Web Slice funcionou num momento e depois não, então, é bom testar, eu usei o endereço de feed padrão disponibilizado pelo blogger, e funcionou bem.

Quem achar muito difícil mudar o código abaixo e tiver interesse em posts recentes e botão Feed com WebSlice, clique aqui, lá bastará colocar o endereço completo de seu blog para Criar o gadget. Também pode servir para achar o endereço de feed de seu blog.

Código do botão Feed/RSS com Web Slice

Você só precisará substituir o endereço de feed para que ele funcione.

<div class="hslice" id="FeedSlice" style="width:32px;height:32px;float:left;margin:0 0 0 28px;"><a id="TitleSlice" class="entry-title" title="Feed/Rss" rel="feedurl" href="http://blog.foitestado.com/feeds/posts/default"><b style="display:none">RSS Blog.foitestado.com</b><img alt="Feed/RSS" style="width:28px;height:28px;" src="http://1.bp.blogspot.com/_NrcfzTud13U/TJSBAkJMQPI/AAAAAAAAFCs/ATwQcHs46CE/s320/rss-feed.png" /></a>
</div>

Entender e mudar o código

Endereço do Feed

http://blog.foitestado.com/feeds/posts/default

Você precisa colocar o endereço de Feed/RSS/Atom de seu blog, uma forma de descobrir é acessando ele pelo navegador, ou clicar em uma parte limpa(não imagem nem link) de seu blog, e clicar em >exibir código-fonte, depois localizar:

rel="alternate" type="application/atom+xml"

Seu endereço de Feed deverá estar próximo a estas especificações acima, pode ter mais de um. Após encontrar o endereço do feed, teste ele em um navegador... para ver se copiou o endereço correto.

Nome do seu blog

Substitua RSS Blog.foitestado.com pelo nome de seu blog, site ou o que lhe convir, só verá isso quem assinar o Web Slice ou clicar no botão do navegador. Eu preferi deixar claro que trata-se da assinatura do Feed/Rss usando Web slice.

Endereço da imagem-link ou botão
http://1.bp.blogspot.com/_NrcfzTud13U/TJSBAkJMQPI/AAAAAAAAFCs/ATwQcHs46CE/s320/rss-feed.png

Você pode usar uma outra imagem, basta estar hospedada na web e substituir o endereço acima no código.

Tamanho da imagem ou botão

width:28px;height:28px;

Você pode alterar o tamanho para menos, para um botão maior é bom substituir essa imagem por uma maior.

Tamanho da div com o botão

width:32px;height:32px;

O botão está dentro de uma div, a div hslice, quando a pessoa passa o mouse na div aparece o botão Web Slice, e, no momento a div receberá uma borda verde, por isso esta div tem 4 pixeis a mais que a imagem-botão, observe os números de tamanhos do botão e da div. O tamanho desta div terá que ser sempre 4 pixeis maior que a imagem para que fique bonito ao passar o mouse, caso você usar outra imagem já sabe.

Botão Feed afastado

Para que o botão feed fique afastado de outro elemento, assim o botão Web Slice não ficará sobre outro elemento usei o código:

margin:0 0 0 28px;

Você pode remover este código acima

Outros elementos ao lado direito do botão Feed

Para que outros elementos possam ficar ao lado direito, usa-se este código:

float:left;

Onde coloca o código?

Para quem faz páginas em Html o código vai em qualquer local após a <body> e para quem sa outros sistemas de blogagem no local adequado, no blogger é Adicionar Gadget, ou seja, Design >elementos da página >Adicionar Gadget >HTML/JavaScript, mais detalhes...

Mais de um botão Web Slice na página?

Você pode colocar o código do botão em dois ou mais locais na mesma página de um blog ou site, mas, precisa mudar o nome das IDs, a id precisa ser única numa página, se repetir, o Web Slice só funcionará no primeiro botão.
Veja o código da id:

id="FeedSlice"

Se quiser colocar mais de um botão altere FeedSlice e também TitleSlice do código do segundo botão, você pode colocar qualquer palavra, desde que, essa palavra não esteja sendo usada como id em outro local dentro do Html da mesma página.

• Criar link e lista de links em Html
• Colocar favicon em site ou blogger, como criar online e hospedar grátis
• Gadget Google tradutor para blog ou sites
• Texto e imagem sobre imagem e Div com Html e Css
• Colocar barra rolagem em div, caixa com scroll
• Fazer um blog de teste
• Aumentar, mudar o tipo de fonte no Internet Explorer
• Como colocar códigos no blogger
• Adicionar link na postagem do BlogSpot
• Personalizar e colocar vídeo do Youtube no blog