Como colocar um gadget fixo na sidebar do blog

gadget fixo na sidebar do blog

Atualmente, inúmeros blogs e sites aderiram a colocar um Gadgets ou Widgets fixo na sidebar de seus blogs. Muitos chamam este recurso de flutuante na lateral do blog, mais eu o chamo de fixo na sidebar ou fixo na lateral. Não sei qual é o certo, então me desculpem os especialistas.

Este recurso é, especialmente, usado para dar destaque a anúncios e links importantes, muito parecido com um menu fixo no topo de um blog que rola de acordo com a página. Com uma diferença! Este gadgets fica no final da sidebar (lateral) do blog e sempre fica visível até o final da rolagem da tela (rodapé).
ATENÇÃO: Este recurso NÃO é permitido em anúncios do AdSense! As regras proíbem este procedimento.
Muitos blogs estão disponibilizando este código, mais, infelizmente, com alguns gadgets que Adicionamos neste script ficam com alguns probleminhas, por isso, eu vou ajudá-los a corrigir estes bugs.

Ele é muito simples de aplicar, caso não ocorra erros, claro!
Vamos aprender ?


  TUTORIAL


1. Acesse o Painel do seu blogger
2. Vá em "Modelo" e "Editar HTML"
3. Procure por:   </body>

4. Acima dele. Adicione o script abaixo:
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

5. Salve!

6. Agora, volte para o painel do seu blog

7. Acesse Layout e abra o gadget "HTML/JavaScript" ou um gadget já existente.
(No caso de um gadgets já existente, copie o código, salve em um bloco de notas para ser colado onde for indicado no recurso)

8. Clique no botão "Acesse". Copie o recurso da página e cole dentro HTML/Javascript.


9. Onde está destacado em "COLE AQUI o código do seu Gadget", adicione o código que você salvou no bloco de notas (ou gadgets que queira adicionar) e clique em "Salvar".

10. Coloque no final da sidebar (lateral). Clique no botão "Salvar organização" e veja o resultado no seu blog.

Porque colocar no final da sidebar?
Observe que é, muito, importante que este elemento em seu blog seja o último da barra lateral, senão ele ficará sobreposto aos outros Gadgets/Widgets já existentes.

Meu gadget agora está ficando diferente ao rolar a página. 

Como de praxe, eu sempre faço teste com qualquer tutorial que ensino, mostro e/ou repasso a vocês. Com este recurso não foi diferente!

Fiz um teste com o Widgets do Instagram (Veja: 5 estilos de Widgets Instagram para Blog). Ao rolar a página do blog, as imagens ficaram maiores e muito junto ao navegador.
Caso seja um dos seus problemas, vou te ajudar a corrigir. Preste atenção!

Altura - Para modificar a altura da rolagem do seu gadgets basta alterar o numeral 10  (destacado em vermelho)
$("#topside_box").sticky({topSpacing: 10});

Tamanho da imagem - Para alterar o tamanho da imagem modifique height: 222px por width: e coloque a dimensão da sua imagem.
• Exemplo: width:250px;
Só tome cuidado para não retirar os caracteres.

F.A.Q
Meu gadgets sumiu!
Talvez, você tenha errado a instalação dos códigos ou retirou algum caracteres e/ou existe algum script em conflito.

Instalou em seu blog? Então Comente!
Beijinhos


COMPARTILHE :  

Comentários
0 Comentários


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.

É proibida a reprodução total ou parcial dos artigos deste blog sem autorização|Somente terá o direito de republicar os códigos publicados dando os devidos créditos.