Como impedir que copiem o conteúdo do seu blog? (CSS sem Java!)

Primeira postagem de 2018. E vamo que vamo, galera! \o/
Essa é para os ratos de conteúdo: CTRL+C e CTRL+U, VAI TOMAR NO... nariz

By Jcomp, Freepik.com =)

Sério agora. Não tem coisa pior do que ter seu conteúdo kibado sem autorização porque algum safado preguiçoso entrou no seu código-fonte e copiou todo o conteúdo na maciota.

Mas tem jeito sim! Encontrei a salvação na page do sr. Deepak Kamat: leiam com atenção e aprendam a selecionar o que podem copiar do seu blog - textos, imagens ou códigos em textareas - ou blinde completamente seu conteúdo usando somente CSS através da função -ms-user-select sem o uso de Javas que podem bugar o seu layout.


Antes de prosseguir...

Para entender melhor o que você conseguirá fazer, acesse este demo oferecido pela Microsoft e veja o que você precisa para o seu caso. Selecione nesse menu dropdown o que você quer e faça os testes:



Isso posto, entra o conteúdo com os códigos e o passo a passo. Bora?

Primeiro passo: entre no HTML do seu tema.



Se você abriu link do demo que postei logo acima, já entendeu que a primeira linha do código CSS é quem irá determinar o que será bloqueado, e o restante do código é exatamente o mesmo para todas as funções.

"Iza, onde eu colo o código?" A resposta está na primeira linha de cada código. Não importa onde ele será colado, contanto que esteja junto dos outros elementos CSS: fique atento e isso vai te ajudar a entender como o código CSS funciona de fato, além de te somente oferecer a solução. =)

Segundo passo: Com base no que eu disse acima, localize o elemento que você deseja bloquear e cole o código logo abaixo.



Para blindar totalmente o seu conteúdo, bloqueando tudo, você irá usar:


Este outro código desabilita a seleção de todos os elementos dentro do post, mas permite que a barra lateral, header e outras partes do blog sejam selecionados:


Este irá desabilitar seleção das suas imagens em todo o blog:


Este desabilita a seleção de imagens somente no corpo do post:


Este bloqueia a seleção em todo o blog, exceto o conteúdo editável, que incluem formulários de contato, área de preenchimento nos comentários e textareas com códigos. Cole abaixo de body {:


E finalmente, para impedir que os kibadores entrem no seu código-fonte você precisará, aí sim, encontrar o elemento HTML <body> e substituí-lo por:




E meu recado para os kibadores de plantão: morram. 
Por hoje é só, pessoal!

---

Fonts:

Special thanks to Mr. Deepak Kamat for this content! =D
Acesse o conteúdo original deste post em /www.stramaxon.com

Se precisar entender melhor como a função -ms-user-select funciona, acesse msdn.microsoft.com e saiba mais.
Próximo
« Prev Post
Anterior
Next Post »

Deixe seu comentário! Críticas construtivas e sugestões são muito bem vindas. ConversionConversion EmoticonEmoticon