Book Affiliate Grid for Blogger

Perfect for showcasing books with vertical cover images. All links include nofollow attributes for SEO compliance.

Book Grid Preview

Auto

2 Columns

3 Columns

4 Columns

Showing: 6 books (4 with prices)

আপনার জন্য কিছু দরকারি বই

Disclosure: Affiliate links - We may earn commission

SEO Compliance: All affiliate links automatically include rel="nofollow noopener noreferrer" attributes for search engine optimization and security.

Perfect for Book Selling:

Vertical Images: Optimized for book cover display
Author Field: Separate field for author names
Book-Specific Design: Colors and layout ideal for books
Nofollow Links: SEO-compliant affiliate links

Manage Books

Grid Title (Bengali)

Affiliate Disclosure

Tip: Use vertical book cover images (approximately 3:4 ratio) for best results. Add author names to make the grid more informative.

HTML Code for Blogger

<style>
.book-grid-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 20px 0;
}
.book-grid-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 15px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #e8eaf6;
}
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
    margin-bottom: 10px;
}
.book-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e8eaf6;
}
.book-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.12);
}
.book-image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f5f5f5;
}
.book-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}
.book-content {
    padding: 10px;
}
.book-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #1a237e;
    line-height: 1.3;
    height: 36px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.book-author {
    font-size: 0.75rem;
    color: #5c6bc0;
    margin-bottom: 5px;
    font-style: italic;
}
.book-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: #e53935;
    margin-bottom: 8px;
}
.book-price.hidden {
    display: none;
}
.book-link {
    display: block;
    background-color: #1a237e;
    color: white;
    text-align: center;
    padding: 6px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.75rem;
    transition: background-color 0.3s;
}
.book-link:hover {
    background-color: #283593;
}
.book-disclosure {
    font-size: 0.7rem;
    color: #7f8c8d;
    font-style: italic;
    border-top: 1px dashed #e8eaf6;
    padding-top: 10px;
    margin-top: 15px;
    text-align: center;
}
@media (max-width: 480px) {
    .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }
}
</style>

<div class="book-grid-container">
    <div class="book-grid-title">আপনার জন্য কিছু দরকারি বই</div>
    <div class="book-grid">
        <div class="book-item">
            <div class="book-image-container">
                <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" class="book-image" alt="The Intelligent Investor" loading="lazy">
            </div>
            <div class="book-content">
                <h3 class="book-title">The Intelligent Investor</h3>
                <p class="book-author">by Benjamin Graham</p>
                <div class="book-price">৳ 450</div>
                <a href="https://example.com/book1" target="_blank" class="book-link" rel="nofollow noopener noreferrer">Buy Now</a>
            </div>
        </div>
        <div class="book-item">
            <div class="book-image-container">
                <img src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" class="book-image" alt="Atomic Habits" loading="lazy">
            </div>
            <div class="book-content">
                <h3 class="book-title">Atomic Habits</h3>
                <p class="book-author">by James Clear</p>
                <div class="book-price">৳ 350</div>
                <a href="https://example.com/book2" target="_blank" class="book-link" rel="nofollow noopener noreferrer">Buy Now</a>
            </div>
        </div>
        <div class="book-item">
            <div class="book-image-container">
                <img src="https://images.unsplash.com/photo-1512820790803-83ca734da794?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" class="book-image" alt="Deep Work" loading="lazy">
            </div>
            <div class="book-content">
                <h3 class="book-title">Deep Work</h3>
                <p class="book-author">by Cal Newport</p>
                <div class="book-price">৳ 380</div>
                <a href="https://example.com/book3" target="_blank" class="book-link" rel="nofollow noopener noreferrer">Buy Now</a>
            </div>
        </div>
        <div class="book-item">
            <div class="book-image-container">
                <img src="https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" class="book-image" alt="Thinking, Fast and Slow" loading="lazy">
            </div>
            <div class="book-content">
                <h3 class="book-title">Thinking, Fast and Slow</h3>
                <p class="book-author">by Daniel Kahneman</p>
                <div class="book-price hidden">৳ 420</div>
                <a href="https://example.com/book4" target="_blank" class="book-link" rel="nofollow noopener noreferrer">Learn More</a>
            </div>
        </div>
        <div class="book-item">
            <div class="book-image-container">
                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" class="book-image" alt="The 7 Habits of Highly Effective People" loading="lazy">
            </div>
            <div class="book-content">
                <h3 class="book-title">The 7 Habits of Highly Effective People</h3>
                <p class="book-author">by Stephen R. Covey</p>
                <div class="book-price">৳ 320</div>
                <a href="https://example.com/book5" target="_blank" class="book-link" rel="nofollow noopener noreferrer">Buy Now</a>
            </div>
        </div>
        <div class="book-item">
            <div class="book-image-container">
                <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" class="book-image" alt="Rich Dad Poor Dad" loading="lazy">
            </div>
            <div class="book-content">
                <h3 class="book-title">Rich Dad Poor Dad</h3>
                <p class="book-author">by Robert Kiyosaki</p>
                <div class="book-price hidden">৳ 280</div>
                <a href="https://example.com/book6" target="_blank" class="book-link" rel="nofollow noopener noreferrer">View Details</a>
            </div>
        </div>
    </div>
    <p class="book-disclosure">Disclosure: Affiliate links - We may earn commission</p>
</div>

How to Use for Book Selling

Add Books: Click "Add New Book" and fill in title, author, price, and affiliate link.
Vertical Images: Use book cover images (taller than wide) for best display.
SEO Automatic: All affiliate links get rel="nofollow noopener noreferrer" attributes.
Copy Code: Get the SEO-optimized HTML for Blogger with Bengali title.
Paste in Blogger: Works in posts, sidebars, or any widget area.

Perfect for Book Affiliate Marketing: This grid is specially designed for selling books with proper book cover display, author names, and Bengali title.

Book-Specific Features:

✅ Vertical Images: 200px height for book covers
✅ Author Field: Separate display for author names
✅ Bengali Title: "আপনার জন্য কিছু দরকারি বই"
✅ Book Colors: Blue theme suitable for educational content
✅ Nofollow Links: SEO-compliant affiliate links
✅ Responsive: Mobile-friendly book grid

oAI

Menu