Did you know that you can display all your images on the blogger website using an image gallery? And it's very easy to add. Just follow this post tutorial shown by me.
Here, I will show you how to add a responsive image gallery to blogger website. Here, we will only use HTML and CSS. It is fully responsive on desktop, tablet and mobile and doesn't affect page speed either.
Creating an image gallery in Blogger is a great way to showcase your photos or artwork You can also use it to display testimonials, user reviews, product images, services, etc.
Here's a step-by-step guide on how to create an image gallery in Blogger:
1. First open your blogger dashboard and create any blog post or page.
2. Now switch to HTML VIEW and use the below code.
<div>
<h2 style="text-align:center; margin-bottom:5px;"> Image Gallery By ShaonTech.Xyz </h2>
<div class="book_grid">
<div class="child"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1pyZ1dM2QIeNa_i6EJ77cHBe9aUA7cae8NDTIlpqoTolL3gVOQbB-X9BCNoG86870g_kCN3ThGzQQFFkbK7l-dtYpg1zRx0ATwG4dZ7JATQH31XEjMRt2gaONQeITxuqCww7zuqopnkmW6uwuDfB4e-8hr2g29WVRxQXeqL81s1KcFJhjdx_ePRR92g9r/s1600/pexels-esmihel-muhammad-15599167.jpg" /></a> </div>
<div class="child"><a href="#" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQx4jDm9cObbF54HQdpUjbFWV5d5n7EekciKw&usqp=CAU" /></a></div>
<div class="child"><a href="#" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTziAJcxmw1pvvR1UfYhTonlbY4KZ08pGLKiw&usqp=CAU" /></a></div>
<div class="child"><a href="#" ><img src="https://images.pexels.com/photos/4552789/pexels-photo-4552789.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /></a></div>
<div class="child"><a href="#" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTziAJcxmw1pvvR1UfYhTonlbY4KZ08pGLKiw&usqp=CAU" /></a></div>
<div class="child"><a href="#" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQx4jDm9cObbF54HQdpUjbFWV5d5n7EekciKw&usqp=CAU" /></a></div>
<div class="child"><a href="#" ><img src="https://images.pexels.com/photos/4552789/pexels-photo-4552789.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /></a></div>
<div class="child"><a href="#"><img src="https://images.pexels.com/photos/9503239/pexels-photo-9503239.jpeg?cs=srgb&dl=pexels-jeremille-k-9503239.jpg&fm=jpg" /></a> </div>
</div>
</div>
3. Here, you need to add your own Image URL and you can add a Clickable Link to the image by replacing the #.
Here, I have highlighted the URL of the first image.
4. Last stage Now you have to paste the CSS code. You can either use it directly in the same blog post or paste it into the theme code to use it on multiple pages Just use it above the closing body tag (</body>).
<style>
.book_grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 4px;
grid-row-gap: 4px;
}
.book_grid img{
width: 100%;
height: 260px!important;
object-fit: cover;
padding: 0px 4px;
}
@media screen and (max-width: 896px){
.book_grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 640px){
.book_grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 480px){
.book_grid {
grid-template-columns: repeat(1, 1fr);
}}
</style>
5. Now you have successfully added an image gallery to your blogger website. Don't forget to adjust the image width and height according to your needs.
If you have any doubt and you can ask directly in comment section I will solve the problem.
0 Comments