Adicionando uma barra flutuante em seu website
Esse é um recurso que, se você trabalha com websites, com certeza alguém já te pediu, uma barra flutuante, seja no top, no footer, nas laterais do website ou até mesmo no cento da tela. Esses dias um cliente solicitou uma barra dessas no footer, onde apareceria uma uma imagem informativa. Pesquisei e até encontrei alguns plugins, mas nenhum encaixava a barra como eu queria, e mais uma vez, para que plugin se é possível fazer sem? Mas como inserir uma barra dessas sem precisar instalar um plugin? é isso que vamos aprender nessa postagem.
1ª Etapa- Criando a div e apresentando a barra flutuante
É importante que você saiba primeiro quais as dimensões dessa imagem, pois vai precisar delas para criar a DIV, ter tambémr a URL da imagem que será utilizada, veja código abaixo:
HTML
<div class=”floating-footer-bar”><a href=”#” title=”Barra Flutuante” target=”_blank”>
<img src=”https://res.cloudinary.com/brunoriggs/image/upload/v1586784441/Site Bruno Riggs/BARRA-FLUTUANTE.jpg”></a></div>
Criei a DIV com a classe floating-footer-bar, nela inseri a minha imagem com 1440 x 84 de pixels e um link para abrir em uma nova aba. É importante dizer que esse código html foi inserido em meu arquivo footer.php logo antes do fechamento </body>.
CSS
.floating-footer-bar{
width:100%;
height: 84px;
position: fixed;
z-index: 9999999;
right: 0rem;
bottom: 33px;
}
Estilizei a classe, você pode estilizar de acordo com as suas necessidades. Fazendo isso a sua barra já deve aparecer.
Ficou bacana, mas tem como o cliente fechar essa barra?
2ª Etapa- Adicionar a opção para fechar a barra
Aqui a brincadeira começa a ficar bacana, aqui você precisa conhecer um pouco da programação PHP, se você apenas brinca de construir websites com o WordPress, é hora de começar a ler sobre o CODEX do mesmo, Scripts e também estudar PHP.
HTML
<div id=”footer-bar” class=”floating-footer-bar”><div style=”width: 2%;float: right;background-color: #474747″ align=”center”><a style=”color: #FFFFFF;” href=”” onclick=”myFunction()”> X </a></div><a href=”#” title=”Compre com Frete Grátis” target=”_self”>>img src=”http://centraldasmascaras.com.br/wp-content/uploads/2020/04/barra-footer-central-das-mascaras.jpg”></a></div>
Observem que adicionei uma nova DIV com apenas 2% de largura, uma cor de background cinza e com seus itens centralizados, nela adicionei o link com o código onclick chamando a uma função. Vamos criar essa função JS, você vai colocar no seu código ou se o seu tema tiver um campo específico para JS você pode colocar.
JS
function myFunction() {
var x = document.getElementById(“footer-bar”);
if (x.style.display === “none”) {
x.style.display = “block”;
} else {
x.style.display = “none”;
}
}
O CSS permanece o mesmo da 1ª etapa.
3ª Etapa- Informando ao sistema em qual página a barra deve aparecer
Vamos engrossar esse caldo? Que tal informar ao sistema que essa barra só deve aparecer em determinada página? Vamos definir que ela só apareça aqui nessa postagem. Vamos bicar com o IF do PHP.
HTML
<?php
if (is_single (‘6904’)) {
echo ‘<div id=”footer-bar” class=”floating-footer-bar”><div style=”width: 2%;float: right;background-color: #474747″ align=”center”><a style=”color: #FFFFFF;” href=”” onclick=”myFunction()”> X </a></div><a href=”https://brunoriggs.com.br/fale-conosco/” title=”Compre com Frete Grátis” target=”_self”><img src=”https://res.cloudinary.com/brunoriggs/image/upload/v1586784441/Site Bruno Riggs/BARRA-FLUTUANTE.jpg”></a></div>’;
}
?>
Lembrando que utilizo o IF IS_SINGLE porque é um post, se fosse página seria IF IS_PAGE, #ficadica.
CCS e JS continuam da mesma forma da 2ª etapa.
4ª Etapa – Cereja no bolo – Suprimir a barra em resoluções baixas (mobile)
Depois de toda essa trabalheira você percebe que a barra flutuante, quando vista no celular ou tablet fica muito ruim, então decide que não quer que ela apareça neles, apenas em telas maiores. Aqui entram as Media Queries do CSS, isso é bom demais.
CSS
@media only screen and (max-width: 1280px) {
.floating-footer-bar {
display: none;
}
}
Observem que não manipulei o CSS das etapas anteriores, eu adicionei um novo, informando que quando a tela tiver uma resolução menor do que 1280px essa barra não deve aparecer, ficou claro?
HTML, JS e CSS das etapas anteriores ficam como estavam.
Concluindo
Mostrei aqui como adicionar uma barra flutuante em seu site sem a necessidade de instalar um plugin, obviamente você pode brincar com os códigos, modificar HTML, CSS e até o JS adicionando novos comportamentos, mas a base é essa aqui. Espero ter contribuído.
Bruno Riggs Pereira.
NÃO ESQUEÇAM DE NOS AJUDAR, COMPARTILHEM ESSA PUBLICAÇÃO
