quinta-feira, 19 de março de 2015

Como colocar Botão Seguir flutuante Fixo na Lateral do Blog




Olá pessoal! Algumas semanas fiquei sem escrever postagens por motivo de estar muito ocupado, mas hoje eu lhes trouxe um Botão personalizado de seguir no Blog, esse botão fica posicionado na Lateral (Direita) do blog, ele é bem eficiente pois bem útil para ajudar a ganhar mais seguidores no blog.

Esse é um botão bem simples que editei, nele eu utilizei CSS que deixa o botão fixo na lateral do blog, e quando descemos ou subimos a página o botão continua posicionado no mesmo lugar, e etc..

Veja um exemplo na imagem abaixo. Ou tambem no meu blog



Para Colocar no Blog:
1º Passo: Acesse o HTML do seu blog, vá em Modelo >> em Editar HTML >> e clique em Editar html



No HTML do Blog, utilize as teclas de pesquisa: Ctrl+F e procure por esse Tag:
]]></b:skin>



Ao localizar o Tag, acima dele acrescente esse código CSS:

/*Botão seguir no Site*/
ul#menusisi { 
position:fixed; 
margin:0; 
padding:0; 
top:10px; 
right:0; 
list-style:none; 
z-index:9999; 
ul#menusisi li { 
width:78px; 
ul#menusisi li a { 
display:block; 
width:78px;
height:26px;
ul#menusisi .Seguir a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbieeyFoUHlEBJAMAWdVj99EBq1CUcIaqvZ-__6sljcRgbVewYi0wlm_0D8fjABQiEhfedarNIw-TwL7sLupFzzaj9MlhhRzHg6Lef-dqMKefBNou1bjyBm3n7E5eGzq6Bh_4Kl8paeYM/s1600/seguir.png); 
}


2° Passo: Agora procure por esse outro Tag:
</body>


 Quando encontrar o segundo Tag </body>acrescente esse código logo acima dele:


<ul id='menusisi'> 
<li class='Seguir'><a href='http://www.blogger.com/follow-blog.g?blogID=7200232364320779357' title='Seguia o Varias Dicas Para Blogs'/></li> </ul>


Vamos Alterar o Código:
  • Bom pessoal, veja que no primeiro código eu destaquei uma parte em cor Vermelha"10px" se por acaso você desejar deslocar (descer) o botão mais para baixo é só você alterar o valor "10" pra "20" ou mais, e etc...
  • E no segundo passo (código) eu destaquei uma parte em cor Azul "7200232364320779357" nessa parte você vai substituir pelo ID do seu Blog.
Postagem mais recente Postagem mais antiga Página inicial

0 comentários:

Postar um comentário

Related Posts Plugin for WordPress, Blogger...