Did you know you can effortlessly display all your images on your Blogger site using an Image Gallery? Let's dive into this tutorial to learn how.
Here, I'll demonstrate how to integrate a responsive image gallery into your Blogger website using Pure HTML & CSS exclusively. This gallery ensures responsiveness across desktops, tablets, and mobile devices without compromising page speed.
Creating an image gallery in Blogger offers a fantastic way to exhibit your photographs, artwork, testimonials, user reviews, product images, services, and more.
Below is a comprehensive, step-by-step guide on setting up an image gallery in Blogger:
Open your Blogger Dashboard and access any existing blog post or page.
Switch to HTML VIEW and insert the provided code snippet:
<div>
<h2 style="text-align:center; margin-bottom:5px;"> Image Gallery Title Here </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>
Replace the placeholder "#"" in the code with your image URLs. Each image can be hyperlinked if desired.
Paste the accompanying CSS code. You can either embed it directly within the blog post or add it to the theme code for consistent use across multiple pages. Place 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>
- Congratulations! You've successfully incorporated an image gallery into your Blogger site. Adjust the image dimensions as needed to fit your preferences.
.png "Image Gallery Blogger")
Post a Comment