Caixa de Rede Sociais
Coloque um Widget no canto inferior esquerdo de seu site. Com links para o Twitter Facebook Google Plus e Pinterest.
Instalaçao
A instalação é facil, copie este código, modifique o que se pede, cole como "Código Embutido" no Webnode.
<p><span style="font-size:10px;"><a href="https://maiochristopher.webnode.com.br/products/caixa-de-rede-sociais/" target="_blank">Powered MaioChristopher - Caixa Rede Sociais - Add Tbm</a></span></p><script type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="https://edu-de-lucas1.webnode.com/_files/200000063-dbecdde7b3/style.css"> <div class="sa_mediaHover_container" style="position: fixed; top:80px; left:50px; z-index:999999999"> <div class="sa_mediaHover_cell "> <div class="sa_mediaHover_share-wrapper sa_mediaHover_below"> <div class="sa_mediaHover_rc10 sa_mediaHover_share-action sa_mediaHover_icon-share"></div> <div class="sa_mediaHover_share-container sa_mediaHover_rc10"> <a style="text-decoration:none;" class="sa_mediaHover_share-btn sa_mediaHover_tl sa_mediaHover_icon-google-plus" href="https://plus.google.com"></a> <a style="text-decoration:none;" class="sa_mediaHover_share-btn sa_mediaHover_tr sa_mediaHover_icon-twitter" href="https://twitter.com/"></a> <a style="text-decoration:none;" class="sa_mediaHover_share-btn sa_mediaHover_br sa_mediaHover_icon-facebook" href="https://www.facebook.com/"></a> <a style="text-decoration:none;" class="sa_mediaHover_share-btn sa_mediaHover_bl sa_mediaHover_icon-pinterest" href="https://pinterest.com/"></a> </div> </div> </div> </div>
Mude os textos em vermelho para o link de seus perfis ou páginas da rede social.
Dicas
Para adicionar no site inteiro (todas as páginas) no Webnode, basta ir no menu do editor de seu site, em Modelos de Site na setinha ao lado, clique em Configurações avançadas depois que carregar va em Widgets, clique na setinha ao lado, va ate Codigo Embutido e arraste ate onde você quiser. Depois e so fechar e salvar e claro Publicar.
Para você que na quer que ele fique fixado na página, ou seja, ele fica parado na tela quando você rola a página, basta colocar "absolute" onde esta de azul.
Exemplos
Modelo Fixado >> Clique aqui para ver
Modelo Não Fixado >> Clique aqui para ver
Importante
Mude somente o que se pede, se modifica-lo demais, ele irá dar erro ou simplesmente desconfigurar seu layout. Cuidado.
Se copiar mantenha os créditos da MaioChristopher
Palavras-chave:
Blogs | javascript | Widgets | efeitos | ferramentas | redes sociais