Codes for displaying blogger posts in grid view with thumbnails
HTML:
<div class="post-grid">
<b:loop values='data:posts' var='post'>
<div class="post">
<a expr:href='data:post.url'>
<img expr:src='data:post.thumbnailUrl'/>
<h2><data:post.title/></h2>
</a>
</div>
</b:loop>
</div>
CSS:
.post-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));grid-gap: 20px;margin: 0 auto;max-width: 1200px;}.post {position: relative;overflow: hidden;}.post img {width: 100%;height: auto;transition: transform 0.2s ease-out;}.post:hover img {transform: scale(1.1);}.post h2 {position: absolute;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.7);color: #fff;padding: 10px;margin: 0;}
This code uses Blogger's built-in b:loop tag to iterate through all the blog posts and display them as a grid of thumbnails with titles. The CSS code sets up the grid layout, resizes the images, and adds a hover effect to zoom in the images. You can customize the CSS to fit your blog's design.
Where to include these codes
To display Blogger posts in a grid view with thumbnails, you will need to modify your Blogger template's HTML code to include the above HTML and CSS code.
Here's how you can do it:
- Log in to your Blogger account and go to your blog's dashboard.
- Click on "Theme" in the left sidebar.
- Click on "Edit HTML" button.
- Look for the <head> section of your template, and paste the CSS code above it.
- Look for the section of your template where you want to display the grid of posts. You can create a new page or post, or modify an existing one.
- Paste the HTML code above into the section where you want to display the grid of posts.
- Save your changes and preview your blog to see the grid view of posts with thumbnails.
Note that the specific location to paste the HTML code will depend on your template's design and layout. If you're not sure where to add the code, you may want to consult with a developer or a Blogger support forum for assistance. Also, make sure to backup your template before making any changes.
Comments
Post a Comment