Colocar botão Web Slice e Feed no blog ou site

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.

colocar botão Web slice com feed em blog ou siteFiz 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.

6 comentários:

Colocar botão Web Slice e Feed no blog ou site2010-09-18T06:02:00-03:00
  1. Olá,
    estou tentando substituir o feed pelo meu endereço mas não consigo, informa não lozalizado, alguem pode ajudar?
    Grata

    Responder
  2. WILZA MAGALHÃES

    Tem uma configuração de feed do blogger(veja como) que talvez esteja errada.

    Em Configuração >Site feed do seu blogger você pode ter marcado a opção nenhum para Permitir feeds do blog ou adicionou uma URL de redirecionamento de feed que não existe.

    Responder
  3. Não consegui construir, você personalizaria para mim usando meu endereço de blog:www.rockinforma.blogspot.com e mim enviar via email?

    Responder
  4. Rock Silva

    O botão de feed funciona em todos os navegadores, mas, a função Web Slice é algo apenas para o Internet Explorer.

    As dicas do blog são para as pessoas façam mesmo e sem gastos, se quer tirar proveito dessa alternativa você precisará ler com atenção, tentar e testar. Até porque outras coisas parecidas surgirão em sua frente mais cedo ou tarde.

    Quem usa o blogger precisa ter seu feed ativado

    Responder
  5. Anônimo20/1/11

    Oi dá para colocar esse botão a deslizar pelo blog??
    Tem alguma alteração que possa fazer para tal??

    obrigado

    Responder
  6. Anônimo

    Deslizando não sei, mas pode deixar ele totalmente parado quando as pessoas rodam a página, igual essa seta no canto aqui do blog.

    Para isso você precisa adicionar um estilo Css no local correto, esse estilo:
    position:fixed;bottom:1px;right:1px;

    Para esse Css funcionar com aquele código do botão lá em cima, você coloca logo após id="FeedSlice" style="

    E depois, para regular a altura do botão você deve aumentar número do valor bottom:1px; e, se quiser o botão fixo no lado esquerdo deve substituir right por left

    Se eu quisesse que o botão ficasse a direita e mais ou menos no centro da altura, o código ficaria mais ou menos assim:

    <div class="hslice" id="FeedSlice" style="position:fixed;bottom:300px;right:1px;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>

    Esse código é para exemplo, tente aprender observando ele, evite copiar ele por causa da formatação...

    Responder

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!