▶️ Código HTML - Barra lateral colorida

[BK Digital]

🔴 Vamos lá, para utilizar é muito fácil, entra em seu o Wordpress, depois crie a sua página nova e clique em: Editar com elementor.

 

▶️ Para poder ter que ir em: Configurações de Página

 

▶️ Depois, vá em avançado, depois clique em: Configurações de Página

 

▶️ Depois clique em Custom CSS e adicione o seu código.

 

✅ Após colocar o código, basta atualizar a página que irá pegar certinho.

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

html, body {
   max-width: 100%;
   overflow-x: hidden;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #FF0000;
  border: 1px solid #FF0000;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #E40B2E;
}
::-webkit-scrollbar-thumb:active {
  background: #2CE9FF;
}
::-webkit-scrollbar-track {
  background: #ff;
  border: 1px none #FFFFFF;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #424242;
}
::-webkit-scrollbar-track:active {
  background: #171717;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

 

 

Editado Abril 9, 2022 por csaoes

[Zezé]

Fala mano, gratidão pelo script compartilhado! Esse "656 o assistindo agora", teria esse código nesse formato ai igual da foto? Grato.

 

[tgilndcuiaoiailfla]

2 minutos atrás, Guuui Almeida disse:

Fala mano, gratidão pelo script compartilhado! Esse "656 o assistindo agora", teria esse código nesse formato ai igual da foto? Grato.

 

up

[BK Digital]

3 horas atrás, Guuui Almeida disse:

Fala mano, gratidão pelo script compartilhado! Esse "656 o assistindo agora", teria esse código nesse formato ai igual da foto? Grato.

 

Código HTML - Estão assinto agora XX pessoas ⤵️
 

<span style="color: #000000;">

<div id="viewers"> ✅

<span></span> <b> - Assistindo agora. <b>

 

<script>

document.querySelectorAll("#viewers span")[0].innerHTML = getUsersView();

 

setInterval(() => {

updatesUsersView();

}, 2500);

 

function getUsersView() {

return Math.floor(Math.random() * (Math.floor(910) - Math.ceil(690))) + Math.ceil(690);

}

 

function updatesUsersView() {

var currentUsers = document.querySelectorAll("#viewers span")[0].innerHTML;

var users = Math.floor(Math.random() * (Math.floor(40) - Math.ceil(-40))) + Math.ceil(-40);

currentUsers = parseInt(currentUsers) < 690 ? parseInt(currentUsers) + users * user : parseInt(currentUsers) + users;

document.querySelectorAll("#viewers span")[0].innerHTML = currentUsers;

}

</script>

[Zezé]

12 horas atrás, BK Digital disse:

Código HTML - Estão assinto agora XX pessoas ⤵️
 

<span style="color: #000000;">

<div id="viewers"> ✅

<span></span> <b> - Assistindo agora. <b>

 

<script>

document.querySelectorAll("#viewers span")[0].innerHTML = getUsersView();

 

setInterval(() => {

updatesUsersView();

}, 2500);

 

function getUsersView() {

return Math.floor(Math.random() * (Math.floor(910) - Math.ceil(690))) + Math.ceil(690);

}

 

function updatesUsersView() {

var currentUsers = document.querySelectorAll("#viewers span")[0].innerHTML;

var users = Math.floor(Math.random() * (Math.floor(40) - Math.ceil(-40))) + Math.ceil(-40);

currentUsers = parseInt(currentUsers) < 690 ? parseInt(currentUsers) + users * user : parseInt(currentUsers) + users;

document.querySelectorAll("#viewers span")[0].innerHTML = currentUsers;

}

</script>

Valeu meu mano!

[anonymousx]

Ainda não entendi, nao mudou nada na minha pag, eu uso elementor.. 

é apenas pra html? como faço pag em html? obrigado

[Só Rateiros]

Em 09/04/2022 em 03:40, BK Digital disse:

🔴 Vamos lá, para utilizar é muito fácil, entra em seu o Wordpress, depois crie a sua página nova e clique em: Editar com elementor.

 

▶️ Para poder ter que ir em: Configurações de Página

 

▶️ Depois, vá em avançado, depois clique em: Configurações de Página

 

▶️ Depois clique em Custom CSS e adicione o seu código.

 

✅ Após colocar o código, basta atualizar a página que irá pegar certinho.

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

html, body {
   max-width: 100%;
   overflow-x: hidden;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #FF0000;
  border: 1px solid #FF0000;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #E40B2E;
}
::-webkit-scrollbar-thumb:active {
  background: #2CE9FF;
}
::-webkit-scrollbar-track {
  background: #ff;
  border: 1px none #FFFFFF;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #424242;
}
::-webkit-scrollbar-track:active {
  background: #171717;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

 

 

Conteúdo de ouro isso aqui! Já vou inserir nas minhas PV's.

 

Você também sabe fazer a bordinha da VSL?

Segue o exemplo

[BK Digital]

1 hora atrás, Só Rateiros disse:

Conteúdo de ouro isso aqui! Já vou inserir nas minhas PV's.

 

Você também sabe fazer a bordinha da VSL?

Segue o exemplo

Vai até em borda em seu Elementor, marca a borda e vai em sombra e adiciona uma cor.

[Só Rateiros]

6 horas atrás, BK Digital disse:

até em borda em seu Elementor,

Caraca... pensei q só dava pra fazer com Script oloko mano valeu mesmo ❤️

 

[Mestre do ZAP]

Mano, segui teu passo a passo direitinho mas a barra lateral não ficou com a cor que eu queria, parece que o código tá certo, mas será que tem algo a mais que precisa ajustar? Tipo, tem algum truque pra cor pegar de primeira? Valeu pelo código, tá top, só ajustar esse detalhe aí que vai ficar show!

[Digital Minds]

Top demais o código! Essa dica do CSS salva muito pra personalizar as paradas no Elementor. Só ajustar as cores certinho que dá pra deixar do jeito que quiser, fica muito foda pra dar aquele toque profissional na página.

[Marketeiro Raiz]

Esse custom CSS aí é brabo pra personalizar o scroll, deixa a página com um visual bem mais profissa. Só cuidado com o contraste das cores, dependendo do design geral da página, pode ficar estranho.

[Hunter Zap]

Funciona só no Elementor ou dá pra usar em outro construtor de páginas?