Como adicionar o controle deslizante de imagem em postagens do blogger – adicionar uma imagem usando o recurso de controle deslizante é, na verdade, uma opção. Ou seja, pode ou não ser instalado. Se você acha que esse recurso é importante, não há problema em usá-lo para tornar seu blog mais atraente.
Mas você pode estar se perguntando, o controle deslizante de imagem afeta o carregamento do blog? Calma, os únicos scripts usados são HTML e CSS e ambos os scripts podem ser usados em posts/páginas ou templates HTML.
Mas antes de prosseguirmos, é uma boa ideia saber o que é o controle deslizante de imagem
O que é um controle deslizante de imagem?
Um controle deslizante de imagem ou comumente conhecido como carrossel é um grupo de imagens ou fotos com um recurso de apresentação de slides. Esse recurso é amplamente utilizado porque pode dar vida às páginas da web.
Ah sim, o controle deslizante que estou compartilhando desta vez não é intencionalmente gerado automaticamente para evitar o uso de JavaScript. Isso se destina a garantir que seu blog seja carregado de maneira ideal quando visualizado por seus visitantes.
Confira a Demonstração abaixo:
Como adicionar um controle deslizante de imagem em uma postagem do blog
1. Acesse o Blogger
2. Selecione tema – editar HTML
3. Cole o código abaixo antes de ]]></b:skin> e salve em seguida
/* Imagem Slider - jsbtricks */
.sliderBox .sliderContainer{display:flex;width:100%;white-space:nowrap;flex-direction:row;overflow:auto;scroll-behavior:smooth}
.sliderBox .sliderContent img{margin-right:20px;border-radius:3px;max-width:720px;max-height:225px;scroll-snap-align:start;box-shadow:0 0 10px 0 rgba(0,0,0,.2)}
@media screen and (max-width:500px){.sliderBox .sliderContent img{width:300px}}
::-webkit-scrollbar{height:8px}
::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#ccc;border-radius:50px}
/* Dark Mode */
.drK ::-webkit-scrollbar-thumb,.drK ::-webkit-scrollbar-thumb:hover{background:#666}4. Prossiga para fazer o artigo e selecione a visualização em HTML
<div class="sliderBox">
<div class="sliderContainer">
<!-- Imagem 1 -->
<div class="sliderContent">
<a href="#" target="_blank"><img alt="#" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOS7BsQE8N4frt6A8x-STZ-iMp9LzlnNz6WYxXrszxk7Dc8pIIahghWFFmr2qLnKcqLh-d7F15HzToe4jFylcu7FPtupVBHk4dMQHFX0X3hWM0BcvHL607vUd59qH-6Fxey4V1u8yCLP55XGlt10fntCIaCksi4O-uwiMk_rKlZjjBvIlUu7mWUavn/s16000/Como%20instalar%20o%20controle%20deslizante%20de%20imagem%20em%20postagens%20do%20blog.webp" title="#"/></a>
</div>
<!-- Imagem 2 -->
<div class="sliderContent">
<a href="#" target="_blank"><img alt="#" src="https://2.bp.blogspot.com/-X-k8G1DlmDM/XwOzAn35ijI/AAAAAAAACR4/PpTPS6B1KdE2jMmAr8ROgQVhjAzUz4onQCLcBGAsYHQ/s1600/gradient-creative-landing-page_23-2148261159.jpg" title="#"/></a>
</div>
<!-- Imagem 3 -->
<div class="sliderContent">
<a href="#" target="_blank"><img alt="#" src="https://3.bp.blogspot.com/-Nu1pBJsBZKo/XwOhl3zJZ0I/AAAAAAAACQI/Le63_-ya948LHbt6IsHqUNgPXu1vJSNhgCLcBGAsYHQ/s1600/realistic-online-shopping-landing-page_23-2148548243.jpg" title="#"/></a>
</div>
<!-- Imagem 4 -->
<div class="sliderContent">
<a href="#" target="_blank"><img alt="#" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6XYLUsabgbU4wMuco0PPSbuobr1JEt_UHchAgnq9zEBBWmmUjTYeLxy-zVbRMmpYZ2a951X2vieU2vaYFkbdoIewdCFk9IC2Fi23M2dFv1h-0EQTi8Ex2iAqIB41EkDGKU5MM3FWO-VZ0llUgN-pc6cKU-F4HdKAWBaG1H_2wYG7KL1Dj1jVtOnMu/s16000/Adicione%20automaticamente%20imagens%20ALT%20e%20TITLE%20ao%20Blogspot.webp" title="#"/></a>
</div>
<!-- Controles deslizantes adicionais -->
</div>
</div>
5. Cole o controle deslizante de imagem onde você desejar e salve
Conclusão
Neste artigo eu fiz um tutorial passo a passo sobre Como adicionar o controle deslizante de imagem em postagens do blog – espero que tenham gostado e por favor compartilhem com seus amigos e sigam nosso blog para mais conteúdos.
Se você enfrentar algum problema no código ou tiver alguma dúvida, sinta-se à vontade para perguntar na seção de comentários ou entre em contato conosco.