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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-812HEHtA-yw3nSu2KqjWCzXHDROwz8xm06A-ukPBBKJsYghaRGF04LuAzsx5fTyuy2RUvb707T12KTjDWS2zN0X-qfS5Jvt64V27URgAPEd066i6ONkyJtyyprs2lPES8InnVnQ42vwX/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
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-812HEHtA-yw3nSu2KqjWCzXHDROwz8xm06A-ukPBBKJsYghaRGF04LuAzsx5fTyuy2RUvb707T12KTjDWS2zN0X-qfS5Jvt64V27URgAPEd066i6ONkyJtyyprs2lPES8InnVnQ42vwX/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
Olá,
ResponderExcluirestou tentando substituir o feed pelo meu endereço mas não consigo, informa não lozalizado, alguem pode ajudar?
Grata
WILZA MAGALHÃES
ResponderExcluirTem 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.
Não consegui construir, você personalizaria para mim usando meu endereço de blog: www.rockinforma.blogspot.com e mim enviar via email?
ResponderExcluirRock Silva
ResponderExcluirO 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
Oi dá para colocar esse botão a deslizar pelo blog??
ResponderExcluirTem alguma alteração que possa fazer para tal??
obrigado
Anônimo
ResponderExcluirDeslizando 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...