16 de janeiro de 2013

14

Botão Seguir no Blog Fixo na Lateral do Blog



Olá pessoal! Algumas semanas fiquei sem escrever postagens por motivo de estar muito ocupado, mas hoje eu trouxe um botão personalizado de seguir no Blog, esse botão fica fixo posicionado na Lateral (Direita) do blog, conforme você movimenta a página para cima ou para baixo, o botão se mantem visível na tela, e isso é uma maneira bastante útil para incentivar o visitante a seguir seu blog, sendo assim, ajudará o mesmo a ganhar um bom número de seguidores no blog...


.
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="http://2.bp.blogspot.com/-teQmEWm5jHw/UPnWzkkls8I/AAAAAAAADiM/OCrAuEjcg4Q/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.

14 comentários:

  1. 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 "/>".

    ResponderExcluir
  2. O MEU BLOG NÃO TEM A OPÇÃO PROSSEGUIR TUDO QUE TENDO FAZER NÃO DA AFF O QUE FAÇO ?

    ResponderExcluir
    Respostas
    1. Olá!
      é só você editar o HTML do blog, e seguir os passos que mostra no tutorial.

      Excluir
  3. Funciono certinho no meu blog detalhe pessoal é no ultimo body que tem bem la no fim aqui funciono pelomenos. obrigado

    ResponderExcluir
    Respostas
    1. O código funciona corretamente, e ele é bem útil...
      obrigado

      Excluir
  4. Não funcionou, que raiva, não consigo botar :(

    ResponderExcluir
    Respostas
    1. Olá Júlia!
      o 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

      Excluir
  5. Ficou perfeito, muito obrigada pelas dicas preciosas, continue assim.. Bjos

    ResponderExcluir
  6. como faço para aumentar o tamanho, pois quando tento aparece vários seguir e gostaria de colocar do lado direito da tela tem como?

    ResponderExcluir
  7. muito bom cara!eu gostaria que você postasse no meu blog:
    designunidos.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.

    ResponderExcluir
  8. sabe como fazer esse truque no wordpress?

    ResponderExcluir
  9. Amigo, 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

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook