Como ocultar widgets / gadgets do blogger em uma resolução específica

Em um dos meus posts anteriores eu compartilhei um tutorial sobre como ocultar ou mostrar widgets do blogger em páginas específicas. Mas no artigo de hoje eu gostaria de compartilhar um outro tutorial relacionado a widgets do blogger que é como ocultar widgets blogger de uma resolução de tela específica. 

Depois de ler o título deste post, você pode começar a pensar, por que você deve ocultar widgets de uma resolução de tela específica. Como sabemos, a tendência de smartphones e tablets estão aumentando continuamente. Durante um ano, um monte de blogs e designs de sites são convertidos em design responsivo, tornando o seu blog melhor acessível na web nos smartphones entre outros. O legal disse tudo é que a maioria das pessoas gostam de navegar na Internet através dos smartphones. Você pode verificar o Google Analytics para obter um relatório para saber quantos dos visitantes do seu blog estão vindo através de diferentes dispositivos, bem como resolução de telas de diferentes tamanhos.

Os design responsivo estão se tornando  algo muito importante para os blogueiros e proprietários de sites. Se você ainda não alterou seu template de blogger para um design de responsivo ainda, então você pode encontrar os melhores modelos de blogger responsivo neste site Sora Templates. Ou se você já tem design responsivo, então você deve estar bem informado sobre como manter um design responsivo.

Veja como mal aparece nas telas abaixo que eu capturei de um Samsung que tem resolução de 480 x 800 (WVGA).

Como você pode ver na tela acima, o design do widget sem a resolução apropriada fica feio e o visitante nem pode fechar o pop-up, pois nem a opção aparece pra ele e ainda o visitante vai sair do seu blog o mais rápido possível, certo!

AGORA VAMOS RESOLVER ESTE PROBLEMA!!!

Todos os widgets personalizados do seu blog têm uma ID de widget exclusiva como HTML1, HTML2, HTML3... assim, primeiro encontre seu widget e sua ID, navegue até Painel do Blogger >> Layout  e localize o gadget que deseja ocultar e, em seguida, clique com o botão direito do mouse em Editar e selecione Copie o endereço do link (como mostrar na imagem abaixo)

https://www.blogger.com/rearrange?blogID=217083466259462915&widgetType=HTML&widgetId=HTML5&action=editWidget&sectionId=sidebar-right-1

Como você pode ver acima o texto colorido em vermelho HTML5 é a ID do widget no URL acima, agora procure o seu, o ID do seu widget pode ser diferente como HTML1, HTML2, HTML3 e assim por diante. Agora, mantenha o id do widget em sua mente e vá para o próximo passo.

Agora, usaremos a consulta de mídia CSS3 para ocultar esse widget a partir de uma resolução de tela específica. Se você quiser que seu widget seja exibido somente na versão desktop, então você deve usar o código de consulta mídia abaixo:

@media screen and (max-width:1039px){
#HTML5{
display:none;
}
}

Substitua HTML5 com o ID do Widget (Certifique-se de que o ID está exato para coincidir na URL mesmo com letras de bloco (Capital Letters) para obter um trabalho perfeito. ok)

Agora, se você quiser esconder widget para uma resolução de tela específica, então você pode alterar a largura da tela de mídia (max-width: 1039px) no código acima. Mas eu recomendo usar o código acima somente para ocultar pop-up com widgets de resolução de tela menor.

Agora, vá para blogger Modelo >> Editar HTML  dê um clique dentro da caixa de html e dê CTRL+F para aparecer a caixa de pesquisa e pesquise ]]>< / b: skin>  e cole o código CSS de consulta de mídia logo acima.

Finalmente, salve seu modelo e use a ferramenta de teste de design responsive matt kersley [ Link ] Verifique se o widget está desativado a partir do tamanho de tela pequeno ou não. 

Espero que você tenha entendido este tutorial. Até a próxima!