Open Source • Vanilla JS

Mini Footer

Uma linha de código para adicionar um footer discreto, arrastável e profissional em qualquer site.

⭐ Ver no GitHub
🖱️

Drag & Drop

Usuários podem arrastar e reposicionar livremente. Suporte completo a mouse e touch.

🎯

Discreto

Aparece sutil no canto da tela, sem interferir no layout ou na experiência do usuário.

Zero Config

Uma tag script e pronto. Sem dependências, sem build, sem configuração.

📱

Responsivo

Funciona perfeitamente em qualquer dispositivo — desktop, tablet ou smartphone.

🪶

Ultra Leve

Apenas 4KB. Nenhum impacto na performance do seu site.

🔄

Auto Update

Via CDN, atualizações chegam automaticamente sem você alterar nada.

Para que serve?

Imagine que você é um desenvolvedor freelancer. Você cria sites para diversos clientes — lojas, portfólios, landing pages. Em todos eles, você quer deixar sua marca de forma discreta.

💼 O problema

Você criou 20 sites diferentes para clientes. Em cada um, colocou manualmente um footer com seu nome e link. Agora precisa mudar o link do portfólio em todos eles.

Resultado: Abrir 20 projetos, editar 20 arquivos, fazer 20 deploys. Horas de trabalho repetitivo.

✅ A solução

Com o Mini Footer via CDN, todos os seus sites puxam o mesmo arquivo do GitHub. Quando você atualiza o código uma única vez no repositório, todos os sites que usam o CDN recebem a mudança automaticamente.

Mudou de portfólio? Quer trocar a cor? Altere no GitHub e pronto — 20 sites atualizados em segundos.

📝 Você edita
no GitHub
☁️ CDN atualiza
automaticamente
🌐 Todos os sites
recebem a mudança

💡 Na prática: O footer serve como sua assinatura digital. Ele diz "este site foi feito por mim" de forma elegante, sem estragar o design do cliente. E o melhor — você tem controle centralizado de todos eles a partir de um único repositório.

Como criar o seu

Você tem duas opções: usar o meu footer direto ou criar seu próprio projeto baseado neste. Veja como:

🚀 Opção 1 — Usar o meu footer

A forma mais rápida. Adicione uma tag script com o link do CDN e meu footer aparece automaticamente em seu site. Ideal se você quer usar direto sem modificar nada.

<script src="https://cdn.jsdelivr.net/gh/davicjc/FooterDavicjc@main/footer_cjc.js"></script>

🔧 Opção 2 — Criar seu próprio footer baseado neste

Quer personalizar com seu nome, link e estilo? Faça um fork do projeto e crie sua versão:

  1. Fork do repositório

    Acesse github.com/davicjc/FooterDavicjc e clique em Fork para copiar o projeto para sua conta.

  2. Edite o footer_cjc.js

    Mude o texto, link e estilos no arquivo principal. Troque "By Davicjc" pelo seu nome e o link para seu portfólio.

    footer.innerHTML = '<a href="SEU-LINK" target="_blank">By SeuNome</a>';
  3. Personalize o visual

    Ajuste cores, tamanho, opacidade e posição editando os estilos do objeto Object.assign(footer.style, { ... }).

  4. Faça push para seu repositório

    Envie as mudanças para o GitHub. Agora você tem seu próprio CDN personalizado.

  5. Use seu CDN em todos os sites

    Troque o link do CDN para apontar para seu repositório:

    <script src="https://cdn.jsdelivr.net/gh/SEU-USER/SEU-REPO@main/footer_cjc.js"></script>

🎯 Resultado final: Você terá um footer 100% seu, hospedado no seu GitHub, servido via CDN rápido, que pode ser atualizado de um lugar só e que aparece em todos os sites que você quiser. Controle total com esforço mínimo.

1
linha de código
4KB
tamanho total
0
dependências

Implemente em segundos

Cole antes de fechar o </body> e pronto.

index.html
<!-- Footer arrastável do Davicjc --> <script src="https://cdn.jsdelivr.net/gh/davicjc/FooterDavicjc@main/footer_cjc.js"></script>

✅ CDN rápido  •  ✅ Sempre atualizado  •  ✅ Cross-browser