Tutorial: Feed de imagens tipo Carrossel no Blog

Eai Blog, tudo bem? 😎✌

Quer adicionar um visual dinâmico às suas postagens com um carrossel de fotos semelhante ao do Instagram? Este rápido tutorial mostra como fazer isso!

Passo 1: Inicie uma nova postagem no seu blog. Antes de adicionar o conteúdo visual, clique na opção de visualização HTML. Serve também para qualquer local que quiser colocar no blog (Coluna lateral, footer, etc., se precisar, ajuste as medidas;

Passo 2: Copie o código do carrossel que encontra-se citado em amarelo logo abaixo:

Passo 3: No editor HTML da sua postagem, cole o código copiado. Agora, localize as partes do código que indicam os links das imagens (URL_DA_SUA_PRIMEIRA_IMAGEM, URL_DA_SUA_SEGUNDA_IMAGEM, etc.). Substitua cada um desses marcadores pela URL completa da imagem correspondente que você quer no seu carrossel.

<div class="instagram-carousel-container" style="width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; gap: 10px; padding: 10px 0;">

  <img src="URL_DA_SUA_PRIMEIRA_IMAGEM" alt="Imagem 1" style="max-height: 300px; object-fit: contain;">

  <img src="URL_DA_SUA_SEGUNDA_IMAGEM" alt="Imagem 2" style="max-height: 300px; object-fit: contain;">

  <img src="URL_DA_SUA_TERCEIRA_IMAGEM" alt="Imagem 3" style="max-height: 300px; object-fit: contain;">

  </div>

<style>

/* Estilos opcionais para melhorar a aparência */

.instagram-carousel-container::-webkit-scrollbar {

  height: 8px; /* Altura da barra de rolagem */

}

.instagram-carousel-container::-webkit-scrollbar-thumb {

  background-color: #bbb; /* Cor do "polegar" da barra de rolagem */

  border-radius: 4px;

}

.instagram-carousel-container::-webkit-scrollbar-track {

  background-color: #f1f1f1; /* Cor do "trilho" da barra de rolagem */

  border-radius: 4px;

}

</style>

<script>

// Este código JavaScript é opcional e adiciona funcionalidade de "arrastar para rolar"

const carouselContainer = document.querySelector('.instagram-carousel-container');

let isDragging = false;

let startX;

let scrollLeft;

if (carouselContainer) {

  carouselContainer.addEventListener('mousedown', (e) => {

    isDragging = true;

    startX = e.pageX - carouselContainer.offsetLeft;

    scrollLeft = carouselContainer.scrollLeft;

    carouselContainer.style.cursor = 'grabbing';

  });

  carouselContainer.addEventListener('mouseleave', () => {

    isDragging = false;

    carouselContainer.style.cursor = 'grab';

  });

  carouselContainer.addEventListener('mouseup', () => {

    isDragging = false;

    carouselContainer.style.cursor = 'grab';

  });

  carouselContainer.addEventListener('mousemove', (e) => {

    if (!isDragging) return;

    e.preventDefault();

    const x = e.pageX - carouselContainer.offsetLeft;

    const walk = (x - startX) * 2; // Ajuste a velocidade do scroll conforme necessário

    carouselContainer.scrollLeft = scrollLeft - walk;

  });

}

</script>

Dica: Caso queira colocar mais imagens, basta copiar o código abaixo e colar antes da tag </div>

  <img src="URL_DA_SUA_QUARTA_IMAGEM" alt="Imagem 3" style="max-height: 300px; object-fit: contain;">

Passo 4: Clique novamente em Visualização "Escrever", digite seu texto, e finalize a postagem normalmente.

"Eu queria ser interessante. Eu queria ser profundo. Eu queria ser o Grande Talvez."

Blog, antes de finalizar essa postagem, gostaria de indicar dois tumblrs para visita. Um é o @Com-pl1c4d0, com posts mais pessoais, e o outro é o @UmaFolhaeumBackground, onde literalmente ha frases escritas em um pedaço de papel, papelão, ou qualquer outra coisa e um fundo legal atrás kkk.

Então pessoal, foi esse o post. Espero que tenham gostado. Um grande abraço, e, até o próximo!