Tutorial Ícone Adicionar aos Favoritos Crossbrowser e Flutuante no Blogger

Bom dia, ontem fui acionado via Twitter pelo (a) @d20009, com um desafio muito interessante...

"Como faço para usar aquele seu tutorial de imagens e icones flutuantes com um ícone para add aos favoritos no meu blogger?"

Adorei a idéia, e fiz várias tentativas, porem descobri que o código que funcionava no Mozila Firefox, não funcionava no internet explorer ai eu descobri um código crossbroser mais que era incompatível com o blogger e seria necessário hospedar um arquivo .js em um servidor aparte...

O mais importante é que descobri outro código que funciona perfeitamente, depois ajustei ele para ficar flutuante e coloquei a imagem da latinha com a estrela que já havia baixado no tutorial anterior e pronto.

Segue abaixo o script para ser add como widget (Elemento de página gadget) no painel de controle do blogger, ainda não testei no wordpress, mais acredito que não ha nada que impossibilite o seu funcionamento, se alguém testar avisa aqui pra galera ok....



Código do wídget


<script language="JavaScript" type="text/JavaScript">
function favoritos() {
if ( navigator.appName != 'Microsoft Internet Explorer' )
{ window.sidebar.addPanel("Muito mais do que dicas para
Blogs
","http://dicas.dicadedica.com","");
}
else { window.external.AddFavorite("http://dicas.dicadedica.com","Muito
mais do que dicas para Blogs
"); } }
// Fonte: dicasparablogs.com.br mais alterações do site dicas.dicadedica.com
</script>
<a href="javascript:void(favoritos());"><img title='Add aos favoritos' style='display:scroll;position:fixed;top:440px;right:-5px;'
src='http://img2.imagedash.com/1gZ9.png'
border='0'></a>

Se o código código anterior der problemas na instalação, instale este com as mesmas modificações...




Altere o que estiver em vermelho pelos paramentos do seu blogger:
  • Titulo do blog
    Muitomais do que dicas para Blogs
  • Endereço do blog
    http://dicas.dicadedica.com
  • Endereço da imagem
    http://img2.imagedash.com/1gZ9.png

Pegue mais ícones grátis aqui
http://dicas.dicadedica.com/2009/07/colocando-imagens-banners-ou-icones-com.html

É isso ai até a próxima dica, você pode informar onde pegou este tutorial caso alguém pergunte foi aqui no Dicadedica. Me add no twitter ok!!! t+

Comentários

webflow21 disse…
Em um dos meus templates tive que substituir todos as aspas no outro tive que usar o código da caixinha...

Agora o da caixinha funciona em todos os templates que testei!!!
webflow21 disse…
Hopede a imagem em outro lugar para funcionar!!!
webflow21 disse…
Atualmente estou hospendando a imagem aqui no imj.tw :

Latinha estrela
http://imj.tw/ph.gif
Arkanoidblue disse…
Caro amigo achei "felomenau" esse seu tuto.

Seria possivel nos mostrar como fazer para colocar uma imagem usando o metodo //script language="JavaScript" type="text/JavaScript"//

ou o metodo //a style="display:scroll;position://

para que a imagem acompanhe a rolagem da pagina?

ou seja ao descer a pagina a IMG desce tambem.
me lembro de ter visto esse efeito. infelizmente não me lembro onde.
Aaaaaa parabens pelo blog mano
webflow21 disse…
Oi Arkanoidblue , a imagem já está flutuando pois tem o código img title='Add aos favoritos' style='display:scroll;position:fixed;top:440px;right:-5px;'
src='http://img2.imagedash.com/1gZ9.png'
border='0'
Ana Coelho disse…
Muito Obrigada era mesmo o que precisava! Já o estou a seguir no twitter!
Ale Batista disse…
Não funciona para o Chrome, até pq na época do post ele não existia rs
Tem como fazer uma atualização?