 |
| Snippets de conteúdo /créditos Divulgação |
Neste artigo, vamos guiá-lo passo a passo sobre como adicionar um
carrossel de postagens ao seu blog no Blogger.
Utilizando HTML, CSS e JavaScript, você poderá criar um carrossel
dinâmico que exibirá suas postagens mais recentes ou populares, proporcionando
uma experiência envolvente para seus leitores.
Primeiro vamos apresentar o código explicar e ensinar o uso correto.
Vamos começar!
<p> </p><!-- HTML do Carrossel --><div class="carousel"><div class="carousel-inner"><div class="carousel-item active"><a href="https://www.startpcgame.com/2024/12/dublagem-para-need-for-speed.html"><h3>Título da Postagem 1</h3><p>Trecho descritivo da postagem 1...</p></a></div><div class="carousel-item"><a href="URL_DA_POSTAGEM_2"><h3>Título da Postagem 2</h3><p>Trecho descritivo da postagem 2...</p></a></div><div class="carousel-item"><a href="URL_DA_POSTAGEM_3"><h3>Título da Postagem 3</h3><p>Trecho descritivo da postagem 3...</p></a></div><div class="carousel-item"><a href="URL_DA_POSTAGEM_3"><h3>Título da Postagem 3</h3><p>Trecho descritivo da postagem</p></a></div><!-- Adicione mais itens conforme necessário --></div><button class="carousel-control prev" onclick="prevSlide()">❮</button><button class="carousel-control next" onclick="nextSlide()">❯</button></div><!-- CSS do Carrossel --><style>.carousel {position: relative;width: 100%;overflow: hidden;}.carousel-inner {display: flex;transition: transform 0.5s ease;}.carousel-item {min-width: 100%;box-sizing: border-box;}.carousel-control {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);color: white;border: none;cursor: pointer;padding: 10px;}.carousel-control.prev {left: 10px;}.carousel-control.next {right: 10px;}</style><!-- JavaScript do Carrossel --><script>let currentIndex = 0;function showSlide(index) {const slides = document.querySelectorAll('.carousel-item');if (index >= slides.length) {currentIndex = 0;} else if (index < 0) {currentIndex = slides.length - 1;} else {currentIndex = index;}const offset = -currentIndex * 100;document.querySelector('.carousel-inner').style.transform = `translateX(${offset}%)`;}function nextSlide() {showSlide(currentIndex + 1);}function prevSlide() {showSlide(currentIndex - 1);}document.addEventListener('DOMContentLoaded', () => {showSlide(currentIndex);setInterval(nextSlide, 5000); // Muda de slide a cada 5 segundos});</script>
O intuito desse código é criar um slide carrossel de postagens ao invés de imagens ...
Adaptamos a função a chamar postagens do mesmo ou de outros blogs através de
Links.
Que são inseridos na parte inicial veja como.
Na linha :
- div class="carousel">
- <div class="carousel-inner">
- <div class="carousel-item active">
É a função que chama nosso slide carrossel , agora note que essa função vem junto a essa outra que está separada , agora abaixo.
- <a href="https://www.startpcgame.com/2024/12/dublagem-para-need-for-speed.html">
- <h3>Título da Postagem 1</h3>
- <p>Trecho descritivo da postagem 1...</p>
Na linha:
href=" Aqui é onde devemos colocar o link da pastagem que queros mostrar ,
sempre começando em http:// ou https://">
Na linha:
<h3>Título da Postagem 1, aqui devemos adicionar um título , ele pode
ser ou igual ao título real da postagem</h3>
Para aumentar ou diminuir o tamanho do texto modifique os valores nas tags
<h3> </h3>.
Lembre se que para dimensionar tamanhos de textos com tags <h*>
Os valores vão de <h1> Até <h6> sendo H1 o maior e H6 o menor ,
lembre-se de sempre fechar a tags </> usando a barra
Exemplo:
<H3> olá mundo <h3>
Incorreto*
<H3> olá mundo </h3>
Correto *
Na linha :
<p>Trecho descritivo da postagem 1... Nessa linha podemos adicionar uma
descrição sobre a postagem</p>
Lembre-se apenas de manter as tags <p> para organizar o conteúdo, essas
tags também devem ser fechadas para demarcação da área de uso.
Infelizmente não é possível adicionar as imagens juntos aos links isso por que
grandes requisições Java Scripts quando usadas no blogger fazem o código
quebrar devido a incapacidade do servidor de atender.
Para mudar o tempo de exibição de cada postagem de comandos na linha;
document.addEventListener('DOMContentLoaded', () => {
showSlide(currentIndex);
setInterval(nextSlide, 5000); // Muda de slide a cada 5 segundos
});
</script>
O tempo do slide carrossel está definido para 5000 milissegundos ou 5 segundos
para aumentar ou diminuir esse tempo alterar os valores em ;
setInterval(nextSlide, 5000);
Sempre use em milissegundos;
Exemplo ; 6000 ( 6 segundos ) 7000 ( 7 segundos )
O código entenderá apenas em milissegundos
O css já é responsivo e foi trabalhado para adaptação total sem quebrar o
Blogger.
Para adicionar ou excluir lotes de exibição crie um novo ou exclua o
seguinte trecho
<div class="carousel-item">
<a href="URL_DA_POSTAGEM_3">
<h3>Título da Postagem 3</h3>
<p>Trecho descritivo da postagem
...</p>
</a>
</div>
Por padrão e organização do código lembre-se que deve sempre começar e
terminar em <div> </div>
Pronto agora você já está pronto para usar seu novo slide carrossel de
snippets de conteúdo no seu Blogger |Blogspot
Lembre-se também que para adicionar códigos ao Blogger é nescessário fazer as
edições em código para que funcione ou seja
Sempre use a opção
"<> Visualização em HTML "
Ok agora vejamos como fica nosso slide carrossel de snippets de conteúdo já
implementados na postagem !!