Isso será interessante para notificar seus visitantes sobre a conexão com a internet. Se um visitante estiver visualizando o conteúdo do seu site e, infelizmente, a conexão com a Internet for interrompida, ele notificará os usuários de que não há conexão com a Internet no momento, para que possam verificar sua conexão com a Internet.
|
| © Vtrick Blog | Widget de Sem Conexão com a Internet |
Neste artigo, vamos adicionar Widget pop-up sem conexão com a Internet a qualquer site do Blogger. Isso mostrará um pop-up dizendo Sem conexão com a Internet se a conexão com a Internet do dispositivo de seus visitantes cair.
Como adicionar pop-up sem conexão com a Internet?
Adicionar Widget pop-up sem conexão com a Internet ao site do Blogger não exigirá muito conhecimento sobre HTML, CSS ou JS porque já o desenvolvi para você. O que você precisa fazer é implementar os códigos no lugar certo em seu XML de tema do Blogger.
Importante!Antes de começarmos a adicionar códigos em XML, recomendo que você faça um backup do seu tema. Por acaso, se ocorrer algum problema, você poderá restaurá-lo mais tarde.
Etapa 1: Primeiro, faça login no Painel do Blogger
Etapa 2: no Painel do Blogger, clique em Tema.
Etapa 3: Clique no ícone de seta para baixo ao lado do botão 'personalizar'.
Etapa 4: Clique em Editar HTML, você será redirecionado para a página de edição.
Etapa 5: Agora pesquise o código ]]></b:skin> e cole os seguintes códigos CSS logo acima para isso.
Se o seu modelo tiver um recurso de modo escuro e se você quiser uma cor diferente quando estiver no modo escuro, poderá personalizar os códigos conforme sua necessidade. Cada modelo pode ter uma classe de modo escuro diferente, portanto, ajuste-a, você pode substituir a classe marcada pela classe de modo escuro de seu modelo.
/* Pop-Up Box (Style 1) by Vtrick */
.popSc{position:fixed;z-index:99980;top:0;bottom:0;left:0;right:0;padding:20px;background:#f3f5fe;display:flex;justify-content:center;align-items:center}
.popSc.hidden{display:none}
.popSc .popBo{position:relative;background:#fff;max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:30px}
.popSc .popBo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.popSc .popBo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.popSc .popBo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.popSc .popBo .popBtn{display:inline-flex;justify-content:center;align-items:center;height:50px;width:50px;outline:none;border:none;background:#f3f5fe;border-radius:50%;margin-top:20px;transition:all .2s ease;-webkit-transition:all .2s ease}
.popSc .popBo .popBtn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.popSc .popBo .popBtn svg{width:24px;height:24px;flex-shrink:0;opacity:.8}
.popSc .popBo .popBtn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.darkMode .popSc, .darkMode .popSc .popBo .popBtn{background:#1f1f1f}
.darkMode .popSc .popBo{background:#2c2d31}
.darkMode .popSc .popBo svg{stroke:#fefefe}
.darkMode .popSc .popBo p, .darkMode .popSc .popBo h2{color:#fefefe}
@keyframes rotateIcn{from{transform:rotate(0deg)} to{transform:rotate(359deg)}}
@-webkit-keyframes rotateIcn{from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(359deg)}}
Adicione o seguinte CSS em vez de adicionar o CSS fornecido acima para obter uma aparência alternativa com o efeito de desfoque.
/* Pop-Up Box (Style 2) by Vtrick */
.popSc{position:fixed;top:0;bottom:0;left:0;right:0;padding:20px;background:rgba(255, 255, 255, 0.1);z-index:99980;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center}
.popSc.hidden{display:none}
.popSc .popBo{position:relative;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:20px;box-shadow:0 5px 25px rgb(0 0 0 / 20%)}
.popSc .popBo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.popSc .popBo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.popSc .popBo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.popSc .popBo .popBtn{display:inline-flex;justify-content:center;align-items:center;height:50px;width:50px;outline:none;border:none;background:#482dff;border-radius:50%;margin-top:20px;transition:all .2s ease;-webkit-transition:all .2s ease}
.popSc .popBo .popBtn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.popSc .popBo .popBtn svg{width:24px;height:24px;stroke:#fff;flex-shrink:0}
.popSc .popBo .popBtn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.popSc{animation:popupBlur .3s ease-in; -webkit-animation:popupBlur .3s}
.popSc >*{animation:popupScale .3s ease-in; -webkit-animation:popupScale .3s}
.darkMode .popSc{background:rgba(0, 0, 0, 0.1)}
.darkMode .popSc .popBo{background:rgba(50, 50, 50, 0.8)}
.darkMode .popSc .popBo svg{stroke:#fefefe}
.darkMode .popSc .popBo p, .darkMode .popSc .popBo h2{color:#fefefe}
@keyframes popupBlur {from{opacity:0}to{opacity:1}}
@-webkit-keyframes popupBlur{from{opacity:0}to{opacity:1}}
@keyframes popupScale{from{transform:scale(0);animation-timing-function:ease-in;opacity:0}to{transform:scale(1);opacity:1}}
@-webkit-keyframes popupScale{from{-webkit-transform:scale(0);-webkit-animation-timing-function: ease-in;opacity:0}to{-webkit-transform:scale(1);opacity:1}}
@keyframes rotateIcn{from{transform:rotate(0deg)} to{transform:rotate(359deg)}}
@-webkit-keyframes rotateIcn{from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(359deg)}}
Observe que já usamos os códigos CSS acima em postagens anteriores. Se você já o adicionou em seu XML de tema, pule esta etapa e siga as próximas etapas.
Etapa 6: Adicione os seguintes Códigos CSS logo abaixo aos Códigos CSS que adicionamos na Etapa 5.
/* Toast Notification by Vtrick */
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
Não adicione se já tiver adicionado antes.
Etapa 7: Cole o seguinte HTML logo abaixo da tag <body>. Se você não encontrá-lo, provavelmente já foi analisado, que é <body>.
<!--[ Toast Notification by Vtrick]-->
<div id='toastNotif' class='tNtf'></div>
Novamente, não adicione se você já tiver adicionado.
Etapa 8: Agora adicione o seguinte HTML logo acima à tag </body>. Se você não encontrá-lo, provavelmente já foi analisado, que é </body>.
<!--[ Pop-up sem conexão com a Internet por Vtrick ]-->
<div id='noInternet' class='popSc hidden'>
<div class='popBo'>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><line x1='1' x2='23' y1='1' y2='23'/><path d='M16.72 11.06A10.94 10.94 0 0 1 19 12.55'/><path d='M5 12.55a10.94 10.94 0 0 1 5.17-2.39'/><path d='M10.71 5.05A16 16 0 0 1 22.58 9'/><path d='M1.42 9a15.91 15.91 0 0 1 4.7-2.88'/><path d='M8.53 16.11a6 6 0 0 1 6.95 0'/><line x1='12' x2='12.01' y1='20' y2='20'/></svg>
<h2>Ops! Sem Internet!</h2>
<p>Parece que você está enfrentando uma interrupção temporária da rede.<br/>Ou verifique sua conexão de rede.</p>
<button class='popBtn' onclick='pageReload()'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
</div>
</div>
Etapa 9: Depois disso, adicione o seguinte JavaScript logo abaixo do código HTML que colamos na Etapa 7.
<script>/*<![CDATA[*/ /* script de sem conexão com a Internet por Vtrick */ function pageReload(){var n=document.querySelector("#noInternet .popBo .popBtn svg");null!=n&&n.classList.add("r"),setTimeout(function(){window.location.reload()},500)};window.addEventListener("offline",function(){document.querySelector("#noInternet").classList.remove("hidden"),document.querySelector("#toastNotif").innerHTML="<span>Sem conexão com a internet!</span>"}),window.addEventListener("online",function(){document.querySelector("#noInternet").classList.add("hidden"),document.querySelector("#toastNotif").innerHTML="<span>Internet connection restored!</span>"}); /*]]>*/</script>
Etapa 10: Por fim, salve as alterações
Está feito! Agora, seu site exibirá um pop-up dizendo Sem conexão com a Internet se não houver conexão com a Internet no dispositivo do visitante.
Adicionando apenas a notificação sem Pop-up
Agora, o que você fará se quiser apenas mostrar apenas a notificação invés do pop-up? Não se preocupe, você também pode adicionar Notificação Toast.
Para isso, substitua o código JavaScript acima pelo JavaScript fornecido abaixo.
<script>/*<![CDATA[*/ /* Script de sem Conexão com a Internet da Vtrick (Apenas notificação)*/ window.addEventListener("offline",function(){document.querySelector("#toastNotif").innerHTML="<span>No internet connection!</span>"}),window.addEventListener("online",function(){document.querySelector("#toastNotif").innerHTML="<span>Internet connection restored!</span>"}); /*]]>*/</script>
Você pode remover códigos CSS e HTML desnecessários se tiver adicionado este código JavaScript.
Termos de Uso
Se você quiser usar este widget pop-up sem conexão com a Internet em seu site, não remova os atributos dos códigos, ele não ficará visível em seu site.
Nós não permitimos reescrever esta postagem de nenhuma maneira. Não copie esta postagem, códigos ou qualquer parte deste artigo sem permissão, é estritamente proibido. Se você fizer isso, Ações legais serão tomadas.
Conclusão
Trata-se de adicionar o Widget pop-up sem conexão com a Internet ao site do Blogger. Espero que você aproveite este artigo.
Por favor, compartilhe este artigo. E se você estiver enfrentando problemas em qualquer seção ou tiver alguma dúvida, pergunte-nos na caixa de comentários.
© Direitos autorais:
www.vtrick-plus.blogspot.com/
