Colocamos neste blog alguns botões no canto da pagina para adicionar aos favoritos, assinar feed, atualizações por email e para nossa comunidade no orkut, e varias pessoas perguntaram como fazer isso. O código é bem simples e até já publicamos aqui, mas numa forma simplificada trata-se do mesmo código usado para voltar ao topo da pagina.A única diferença foi que acrescentamos mais coisas dentro dele, veja abaixo:<style type="text/css"><!--.menufixo img{padding: 5px;display: inline}--></style><div style="background-color:#FFFFFF; border-left:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; right:0px;"><div class="menufixo"><a href="#"><img border="0" src="IMAGEM TOPO DA PÁGINA"/></a><script language="JavaScript" type="text/JavaScript">function favoritos() {if ( navigator.appName != 'Microsoft Internet Explorer' ){ window.sidebar.addPanel("Dicas para Blogs","http://www.dicasparablogs.com.br",""); }else { window.external.AddFavorite("http://www.dicasparablogs.com.br","Dicas para Blogs"); } }</script><a href="javascript:void(favoritos());" title="Adicione aos Favoritos"><img border="0" src="IMAGEM FAVORITOS"/></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=dicaparablog&loc=pt_BR" target="_blank" title="Atualizações por Email"><img border="0" src="IMAGEM ATUALIZAÇÕES POR EMAIL"/></a><a href="http://www.orkut.com.br/Main#Community.aspx?cmm=46751209" target="_blank" title="Comunidade no Orkut"><img border="0" src="IMAGEM COMUNIDADE NO ORKUT"/></a><a href="http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html" target="_blank" title="Dicas para Blogs"><img border="0" src="http://img16.imageshack.us/img16/9066/iconeblogh.gif"/></a></div></div>Coloque esse código pela pagina layout, adicionar gadget, html/javascript, não importa o lugar da pagina, ele aparecerá sempre no canto inferior direito do seu blog. O começo do código não precisa de alterações, mas se quiser pode modificar:padding:5px – distancia entre as imagensbackground-color:#FFFFFF; - cor de fundoborder-left:1px solid #000000; - borda lateralborder-top:1px solid #000000; - borda superiorDepois desse trecho são apenas links com imagens como fazemos em qualquer outra parte do blog, antes de colocar no blog faça as alterações necessárias nos trechos em negrito.Quanto a enviar atualizações por email aqui tem a explicação sobre como fazer isso usando o feedburner.Deixamos o código apenas com as indicações de onde vão as imagens porque se deixássemos o código pronto, provavelmente quando muitas pessoas começassem usar o código as imagens iriam parar de aparecer porque sites de hospedagem grátis excluem ou bloqueiam imagens acessadas muitas vezes(milhares de vezes por dia, mas isso depende de qual site usa) então é mais seguro e confiável cada um hospedar as imagens.Clique com o botão direito do mouse sobre cada uma das imagens acima e escolha a opção salvar imagem depois só precisa hospedá-las, recomendamos usar o Imageshack. Colocamos um link para essa postagem no final do código e pedimos para que não retirem isso do código a fim de facilitar que outros blogueiros que gostem da idéia tenham facilidade em encontrar esse código.Veja também:Adicionar aos favoritosHospedar imagensColocar ou modificar bordas
Postagens mais ComentadasReceba Dicas por E-mailRecomendações dos LeitoresLink desta PaginaFixar botões no canto da pagina
esse post eah o q eu tava procurando cara!!! xDseu blog tah cada vez melhor...Com mais conteudos q ajudam os blogueros!! xDeu tenho ua duvida...eu puis o code lá no meu blog editeii tudo talz...Mas eu tirei 2 itens o "Assine nosso Feed" e "Atualizaçoes por e-mail"...eu apaguei apenas estes 2...veja como ficou:www.livrodacomedia.blogspot.comse precisar eu lhe mandarei por e-mail o code(como ele ficou)...Obrigado e parabéns pelo blog!
Street Downs
fabiano, eu quero colocar no meu blog esta imagem http://img224.imageshack.us/img224/7884/meninonocomputador.gife logo abaixo um pequeno texto, como eu faço isso ?
<img src="http://img224.imageshack.us/img224/7884/meninonocomputador.gif" border="0"> coloque o código desse jeito e o texto embaixo
8 de julho de 2009 04:56
recebo as novidades do DICAS PARA BLOGS no meu email e não tem como não vim conefir...toda vez que venho só saio aprendendo algo+!O blog de vocês é 10, MUUITO OBRIGADO!
vc jah viu??vlw!!!i mais uma vez parabéns pelo Blog!!!!Ah...mais uma perguntinha tm post aqui q enssina como colocar gif como Logo?!vlww
Adoorei, agora só uma perguntiinha..Nos casos de links para outras paginas (como orkut e tals..) é aberta uma nova aba pra abrir essas paginas, tem como eles abrirem na mesma aba?Tiipo, como se eu clicasse no link de orkut de vcs agora, ao inves e abrir em uma nova abrir nessa mesma..
A brigada ^^Agora, só mais uma duvidazinha.. tem como deixar os botões organizados de forma vertical ao inves de horizontal? Pra ficar todos no canto da pagina um do lado do outro..
IInfect djs
jogos onlines e para downloads
eu queria saber como descobrir o url dos jogos do meu computador e de jogos da interneto meu blog é jogosdovaldir.blogspot.com ou se quise entrar com outro endereço é www.jogosdovaldir.tk
qualquer coisa você consegue encontrar no google, principalemente jogos..veja esse link sobre pesquisa de gadgets do googlehttp://www.dicasparablogs.com.br/2007/07/gadgets.html
gostaria de saber como eu faço para colocar somente os botões que eu quiser, por exemplo eu quero colocar o botão adicionar ao favoritos, assine este feed , e contato por e-mail , será que vc pode me ajudar .obrigada vanessa
SKIN HEALTH veja o código de cada link que está nos botões e remova aqueles que não quiser mostrar.esse código funciona para colocar coisa que colocar no lugar dos links
Ola amigo coloquei e ficou muito bom,porém atualizações por e mail coloquei a url certa e esta abrindo minha pagina de novo ?Sera que poderia me ajudar ?Abração jack
Jackse abriu a sua pagina novamente é sinal que usou a url errada
Bryannão precisa entrar na pagina html, como escrevi após o código é só entrar na pagina layout, adicionar gadget, html/javascript e colocar o código, não importa a parte do blog que fique esse gadget, porque a posição dele está definida no próprio CSS
Excelente !!! Muito fácil de implementar. Dá um trabalho extra para enviar as imagens para o servidor, mas isso é o mínimo esperado por quem deseja usar esse recurso.Para mim que ainda estou começando a blogar seu site é referência de tutoriais.Parabéns e obrigado por disponibilizar o código e principalmente as imagens, pois não sou desing. Ajudou ++++++Abraços
Esqueci de comentar também que foi genial criar o código para aparecer no canto inferior direito da página independente do lugar do widget escolhido.Isso abre oportunidade para aproveitar espaços não utilizados.Desculpe o comentário seguido :)
oi tudo bom olha com essas dicas nao consigo fazer nada elas sao complicadas queria mais detales entre em contato comigo no meu blogger http://bandacalypsoeshow.blogspot.com/ pois tem varias coisas que eu queria colocar no meu bloger e nao consigo * Fixar botões no canto da pagina * criar um bonner com link para divulga;ao * mudar tipo acrescentar cores aos titulos * colocar tipo fotos links umas do lado das outras e varias outras entre em contato comigo vlw !!
BANDA CALYPSO use a pesquisa no inicio de nosso blog para encontrar todas essas coisas, já escrevemos sobre todas elas.
O código está perfeito mas ocorre um erro com "atualizações por e mail" não está funcionando não sei por que mas aparece o endereço do Blog, e não a url das atualizações.Socorro não sei como fazer para consertar.http://aureliomcgomes.blogspot.com/aguardo resposta
Aurelio MC você está colocando o link errado.para as atualizações tem que usar o link do seu blog no feedburner veja mais aquihttp://www.dicasparablogs.com.br/2009/03/enviar-atualizacoes-por-email.html
FC Thomas Dekker veja se é isso que procurahttp://www.dicasparablogs.com.br/2009/08/imagem-no-titulo-da-postagem.html
Tonný só tem que colocar esse código em alguma parte do seu blog pela pagina layout, adicionar gadget, html/javascripte claro fazer as alterações do nome e endereço do seu blog
se não quiser deixar os botões fixos é só retirar a parte que fixa os botões no canto da pagina:position:fixed; bottom:0px; right:0px;mas se quiser pode retirar aquela div inteira<div style="background-color:#FFFFFF; border-left:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; right:0px;" >e no final </div >
30 de dezembro de 2009 02:02
Cantinho Especial se estiver falando das bordas das imagens nas postagens é só entrar na pagina editar html e apagar isso.post img {padding:4px;border:1px solid #C675EC;}
1 de janeiro de 2010 13:51
51downstorrent
Fabiano meu amigo...duas duvidas:1ª - eu não consigo criar um feed para meu blog, queria que as pessoas assinassem o feed de meu blog, mas nao sei que endereço criar, ou como criar>2ª - os botões no canto superior esquerdo de teu blog. eu queria fazer igual a esse. utilizei o código dessa postagem, mas ele fica fixo. rola a pagina e ele não... queria que rolasse junto, igual acontece no Dicas...
daufen bach.o blog já tem feed isso é automatico, se estiver falando do feedburner veja aquihttp://www.dicasparablogs.com.br/2009/03/enviar-atualizacoes-por-email.htmlpara deixar os botões normais(não fixos) apenas retire isso do códigoposition:fixed; bottom:0px; right:0px;
22 de janeiro de 2010 18:32
lass_xD os códigos para o twitter e comunidade do orkut são apenas links comuns, ou seja é só usar um texto ou imagem para criar um link como se fosse para um outro blog qualquer, deste jeito, claro que trocando o link e colocando o endereço de uma imagem se quiserusando uma imagem<a href="http://www.orkut.com.br/Main#Community.aspx?cmm=46751209" target="_blank" title="Comunidade no Orkut"><img border="0" src="IMAGEM COMUNIDADE NO ORKUT"/></a>link de texto<a href="http://www.orkut.com.br/Main#Community.aspx?cmm=46751209" target="_blank" title="Comunidade no Orkut">Comunidade no Orkut</a>
Alex Maycon veja aquiBotão para as redes sociais - AddThis
Parabéns pelo blog!Tenho me interessado muito em melhorar meu blog e gostei muito de ste post. Só queria tirar uma dúvida... é possível colocar outras imagens também? Gostaria de colocar ícones para outras redes sociais além do orkut e, se possível, mudar o ícone do orkur para padronizar com os demais... é possível?Grande abraço e obrigado pela atenção!
psicocapoeira neste código é possivel colocar qualquer botão que desejar, veja aquiBotão para as redes sociais - AddThis
Fabiano,Eu coloquei os botões e deu tudo certo, só que a geotoolbar que tenho no blog fica em cima dos botões , o que eu tenho que fazer para arrumar ? E também não achei no código o botão das postagens aleatórias , não tem mesmo ou foi eu que não vi ?Abraços,Fátima.
Princess Life Bijoux nunca usei esse o geotoolbar, então não sei responder sobre ele.
eu sou uma dessas véria pessoas :pvaleu aê \o
Fabiano Roberto me ajuda um pouco só ponhe o codigo topa da pagina.obrigado olha meu blog : www.habbounidos1.blogspot.com
o código para o top da pagina é assim:<a href="#"title="Topo da Página"><img src="http://img580.imageshack.us/img580/9755/seta.gif" /></a>só precisa usar uma imagem que goste no lugar desta que está no código
Ahh... E tem como mudar o fundo da barra pra preto ao invés de branco?Grata.*PS: To adorando as dicas to teu blog
XpressMagicuse esse outro tutorial para fazer uma janela com botão fecharCriar uma Janela de Divulgação no blog
o botão voltar ao topo naum esta funcionando!eu concegui concertar!mais e quem naum entendi html!valeuu!abraços!
Olá, gostaria de saber se é normal aparecer em todo blog que tem a opção de tradução para outro idioma essa frase: ""Desculpe...Este gadget não está configurado corretamente. Dica do webmaster: verifique se as "Configurações do Google Friend Connect - URL da Página inicial" correspondem ao URL deste site.""No lugar que deveria aparecer os seguidores, pois isso está acontecendo em todo blog que eu entro e tento traduzir para um idioma que não seja o português. Ou existe uma maneira de corrigir esse erro e aparecer os seguidores nos outros idiomas também? Obrigado
9 de outubro de 2010 17:33
esse codigo só serve pro IE ou pro firefox tb?pq aqui no firefox tava dando erro ;/
Valeu gostei muito fiz algumas modificações e ficou ótimo de verdade.Gostaria de saber como colocar contador de visitas online na página e não fixo como ele esta como se poder me ajudar ficarei grato.Desde ja agradeço.
Elias na parte bottom:0px; right:0px;você pode trocar bottom por top isso faz ficar na parte de cima da paginae a palavra right troque por left para ficar no lado esquerdo
Como por estes botões do twitter, facebook, you tube e orkut na barra lateral do blog e para abrir em uma outra janela!Agradeço e parabens pelo blogJhônata Adamswww.jacomunicacaobyacarau.blogspot.com
Jhônata Adams Mendes Silva veja aqui como fazer botões iguais aos nossosImagens Lado a Lado, Fazer Colunas nos Gadgets
para colocar do lado esquerdo no trecho bottom:0px; right:0px;troque right por left e pronto
como posso fazer para criar um menu fixo no topo com os botões...?: desde jah agradeço a resposta.grande abraço
Adorei!e consegui colocar no meu blog, com uma imagem que fiz no corel, ficou ótimo...Se vc puder ver, adoraria uma visitinha...
19 de junho de 2011 00:42
ADM_Lucas
Gostei muitosucesso pra vcs ai mais uma vez,e sorte na caminhada da vida.O Adm.
queria muito saber com colocar a barra que nem tem no blog de vocês ai do lado >>>>> por favor ajudemmandem como fazer para meu email(se não for pedir de mais) comedyjy@yahoo.com.br por favor ajudem
Biologia UnP veja aqui Botões das Redes Sociais na Vertical - Compartilhar Posts
João Vitor tem que achar onde colocou o código e apagar
olá meu caroobrigado, ajudou muito,gostaria de saber se tem como deixar a imagem em cima do resumo do texto e o leia mais em baixo ?valew
30 de dezembro de 2011 16:25
anonimo veja aqui Imagem não aparece no Blog ou Site
Anonimoveja no inicio do códigobackground-color:#FFFFFF; border-left:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; right:0px;só precisa trocar o bottom:0px; por top:0px;
Angelo esse código não tem a função centralizar, mas você pode mudar o valor aqui:;position:fixed; bottom:0px; right:0px;trocando right:0px; por right:40% ou right:100px;para ajustar a distancia da lateral e ficar mais ou menos centralizada
excluir a conta é nas configurações.mas o feedburner é util no blog não acho que deva excluir.
MAs, o que acontece é que nessa minha conta tem 4 endereços de blogs que foram meus como fui mudando o nome e atualmente estou com o Porfírio in Vintage , já tentei pegar o endereço desse feed pra colocar no blog mais não aceita eu não sei se é pq mudei o e-mail que eu entro no blogger e no site do feedburne continuo com o antigo eu só sei que qr colocar no blog para que os leitores assinem mais não estou conseguindo por esse motivo pensei em excluir e fazer uma conta nova com um novo e-mail, entendi!?BjoO!
cada blog que tiver tem um feed separado no blogger e no feedburner.não pode usar o feed de um blog em outro senão dá erro.se tiver problemas tente excluir todos os feeds que cadastrou e fazer novamente as configurações um por vez (no blogger e no feedburner)