.
Veja um exemplo na imagem abaixo.
Como colocar Botão Seguir no Blog Fixo na lateral do Blog
1º Passo: Acesse o HTML do seu blog, vá em Modelo >> em Editar HTML
Em seguida, clique em qualquer parte do código, e depois pressione as teclas de pesquisa: Ctrl+F e procure por esse Tag:
]]></b:skin>
Ao localizar, logo acima da Tag acrescente esse código CSS:
/*Botão seguir no Site*/
ul#Botao-seguir {
position:fixed;
margin:0;
padding:0;
top:3px;
right:0;
list-style:none;
z-index:9999;
width:130px;
height:40px;
}
2° Passo: Agora, vamos ter que procurar outra Tag, da mesma forma utilize as teclas de atalho (Ctrl+F) e procure por:
</body>
Quando encontrar, acrescente esse código logo acima dela:
<ul id='Botao-seguir'>
<a title="Seguia o Varias Dicas Para Blogs" href="http://www.blogger.com/follow-blog.g?blogID=4520909896671447195" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3qiYJhUffRqsD9_NElwOC3TyfbLBQ-g6HaEquW-rYO8ZO0HktQFMFlbNX2PfNHWFXu7BKwa6NgV-k5A2rwSRDhW-1ez4TYZuKx2Qajv1PJR6cRsdD2y3QwGOPNA65GI99O7-NVyK0OOo/s1600/seguir.png" /></a> </ul>
Vamos Alterar o Código:
- Bom pessoal, veja que no primeiro código eu destaquei uma parte em cor Vermelha"3px" se por acaso você desejar deslocar (descer) o botão mais para baixo é só você alterar o valor "3px" pra "10" ou mais, e etc...
- No segundo código, altere a parte que está destacado em cor verde (Seguia o Varias Dicas Para Blogs) pelo titulo do seu blog.
- Ainda no segundo código, eu destaquei uma parte em cor Azul "4528745896321457895" nessa parte você vai substituir pelo ID do seu Blog.
Observe: Se você não sabe onde encontrar o ID do seu blog, leia nosso tutorial anterior: Clique Aqui e saiba como descobrir.
- Prontinho pessoal, se vocês quiserem mudar a imagem do botão por uma exclusiva sua, é só substituir o link da imagem que esta destacada em NEGRITO no segundo código, observe também que, o tamanho da imagem vocês terão que mudar no primeiro código, eu utilizei uma imagem com a dimensão de 141px de Largura e 40px de altura.
Espero que tenham gostado desse botão, agora é só você clicar em Visualizar, veja se tudo ocorreu certo depois Salve o Modelo.
Pessoal! não esqueçam de seguir nosso blog e também nossa página no facebook, agradecemos a todos que colaboram, Obrigado.
Deu não. Não foi salvo. Apresentou erro: Erro ao analisar XML, linha 438, coluna 100: Element type "a" must be followed by either attribute specifications, ">" or "/>".
ResponderExcluirO MEU BLOG NÃO TEM A OPÇÃO PROSSEGUIR TUDO QUE TENDO FAZER NÃO DA AFF O QUE FAÇO ?
ResponderExcluirOlá!
Excluiré só você editar o HTML do blog, e seguir os passos que mostra no tutorial.
Funciono certinho no meu blog detalhe pessoal é no ultimo body que tem bem la no fim aqui funciono pelomenos. obrigado
ResponderExcluirO código funciona corretamente, e ele é bem útil...
Excluirobrigado
Não funcionou, que raiva, não consigo botar :(
ResponderExcluirOlá Júlia!
Excluiro código funciona sim, eu mesmo que editei, e utilizo em meu blog.
Hoje mesmo revisei o código em meu blog de teste e não tinha ném um erro, etá tudo certo, obrigado
Ficou perfeito, muito obrigada pelas dicas preciosas, continue assim.. Bjos
ResponderExcluircomo faço para aumentar o tamanho, pois quando tento aparece vários seguir e gostaria de colocar do lado direito da tela tem como?
ResponderExcluircomo acho o id do blog?????????
ResponderExcluirmuito bom cara!eu gostaria que você postasse no meu blog:
ResponderExcluirdesignunidos.blogspot.com.br
o blog é um blog novo de codigos tutoriais e muito mais para você postar lá vai no blog e depois em menu e clica em venha para a equipe.
sabe como fazer esse truque no wordpress?
ResponderExcluirFuncionou Muito Obrigado !
ResponderExcluirAmigo, sabe aonde eu arrumo um botão um pouco menor? Achei muito grande e você diminui a largura ele "come" a palavra "Seguir". No mais Parabéns pois funcionou perfeitamente!
ResponderExcluir