Barra de anúncio fixa para o seu site

Muitos sites exibem uma barra de mensagens fixa na parte inferior da página para exibir um anúncio, ofertas promocionais ou um artigo importante recentemente publicado.
Aqui está um tutorial super fácil para fazê-lo em seu site.


O HTML

A primeira coisa a fazer é criar o html para exibir nossa barra fixa.

Para fazer isso, coloque o seguinte código no final do seu documento html, antes da </ body>tag de fechamento .

Se você estiver usando o WordPress, você deve editar o footer.php arquivo do tema que você está usando.


O CSS

Uma vez feito com o bit html, abra o .cssarquivo e cole o seguinte código, em seguida, adaptar o valor do backgroundcolorpropriedades para caber seu esquema de cores do site.

Realmente não há nada complicado aqui.

Nós basicamente configuramos uma largura de 100% no #dabarelemento e usamos as propriedades position: fixedbottom: 0para fazer o div fixado na parte inferior da página.

Se preferir que sua barra seja corrigida no topo, basta substituir bottom: 0por top: 0.

Agora que adicionamos o estilo básico do css, ainda temos algumas correções a fazer para garantir que o nosso bar vai ficar bem.

A primeira coisa a fazer é cuidar de dispositivos móveis.

Obviamente, não queremos que nossa barra seja vista em dispositivos menores, como smartphones, pois levaria uma grande quantidade de espaço e incomodar a leitura.

No seu .cssarquivo, apenas adicione o seguinte.

Se o seu site já estiver usando consultas de mídia, você deve simplesmente adicionar a #dabar{ display: none; }parte à sua consulta de mídia existente.

Uma última coisa: como a barra é fixada na parte inferior da tela, está escondendo um pouco do seu rodapé no site.

Para evitar isso, basta encontrar seu elemento de rodapé em seu .cssestilo e adicionar um preenchimento como mostrado abaixo:


PHP para exibir mensagens aleatórias

No ponto do tutorial, temos nossa barra de mensagens.

Isso é ótimo, mas espere, pode ser muito melhor.

Se você estiver usando a barra de mensagens para exibir ofertas promocionais, você pode querer alternar qual oferta está sendo exibida para seus visitantes.

Usando um pouco de PHP, podemos conseguir isso em nenhum momento.

Se você quiser exibir mensagens alternativas, substitua o código html pelo seguinte:

O que fizemos é realmente simples: primeiro, criamos uma matriz contendo todas as nossas mensagens.

Em seguida, usamos a shuffle()função PHP para aleatorizar a matriz.

E finalmente, o primeiro valor da matriz é exibido.


Usuários do WordPress: exiba sua última postagem

Se você estiver usando o WordPress, você pode usar sua barra de mensagens para exibir sua última publicação publicada.

Para fazer isso, substitua o código html pelo seguinte:

 

 

Fonte conteúdo catswhocode.com

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *