Professional Single Blog Page Design with Categories and Tag

Mycodingtutorial June 20, 2026 12 min read 0 Comments

A Single Blog Page Design is an essential part of any modern website, providing readers with a clean and engaging reading experience. This responsive blog layout includes a featured image, post title, categories, author information, social sharing buttons, comment section, recent posts widget, category list, and tag cloud.

Built with HTML and CSS, this modern blog page design offers a professional user interface that works seamlessly across desktops, tablets, and mobile devices. The clean typography, spacious layout, and organized sidebar help improve readability and user engagement.

The design also includes SEO-friendly elements such as structured headings, optimized content sections, responsive images, and intuitive navigation. Whether you’re creating a personal blog, business website, news portal, magazine site, or WordPress theme, this blog page template provides a solid foundation for publishing high-quality content.

With modern styling, mobile responsiveness, and user-friendly features, this single blog page design helps improve visitor retention, browsing experience, and overall website performance.

Single Blog Page Design

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Single Page Code By Mycodingtutorial</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="blog-wrapper">
            <!-- Main Content -->
            <div class="blog-content">
                <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=1200"
                class="blog-image" alt="Blog">

                <div class="blog-body">
                    <span class="blog-category">Technology</span>
                    <h1 class="blog-title">How Modern Web Design Improves User Experience</h1>
                    
                    <div class="blog-meta">
                        <span><i class="fa-solid fa-user"></i> Admin</span>
                        <span><i class="fa-solid fa-calendar"></i> June 19, 2026</span>
                        <span><i class="fa-solid fa-comment"></i> 12 Comments</span>
                    </div>
                    <p>Modern web design focuses on creating beautiful, fast, and user-friendly websites that engage visitors and improve conversions.</p>
                    <p>A clean layout, intuitive navigation, and responsive design help users access information easily across all devices.</p>
                    <h2>Why Responsive Design Matters</h2>
                    <p>More than half of internet traffic comes from mobile devices. A responsive website automatically adapts to different screen sizes for the best user experience.</p>
                    <blockquote>Good design is not just what it looks like and feels like. Good design is how it works.</blockquote>
                    <h2>Performance and Speed</h2>
                    <p>Website speed directly affects SEO rankings and user satisfaction. Optimized images, clean code, and modern technologies contribute to faster loading times.</p>

                    <div class="tags-wrapper">
                        <span class="tags-title">Tags:</span>

                        <div class="tags">
                            <a href="#">Design</a>
                            <a href="#">UI/UX</a>
                            <a href="#">Technology</a>
                            <a href="#">Development</a>
                        </div>
                    </div>

                    <div class="author-box">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="John Smith">

                        <div class="author-content">
                            <h3>John Smith</h3>

                            <p>
                                John is a professional web designer and developer with over
                                10 years of experience creating modern digital experiences.
                            </p>

                            <div class="author-social">
                                <a href="#"><i class="fab fa-facebook-f"></i></a>
                                <a href="#"><i class="fab fa-x-twitter"></i></a>
                                <a href="#"><i class="fab fa-instagram"></i></a>
                                <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            </div>
                        </div>
                    </div>

                    <!-- Share Buttons -->

                    <div class="share-section">
                        <h3>Share This Post</h3>

                        <div class="share-buttons">
                            <a href="#" class="share-btn facebook">Facebook</a>
                            <a href="#" class="share-btn twitter">Twitter</a>
                            <a href="#" class="share-btn linkedin">LinkedIn</a>
                            <a href="#" class="share-btn whatsapp">WhatsApp</a>
                        </div>
                    </div>

                    <!-- Comment Form -->

                    <div class="comment-section">

                        <h3>Leave a Comment</h3>

                        <form class="comment-form">

                            <div class="form-row">
                                <input type="text" placeholder="Your Name" required>
                                <input type="email" placeholder="Your Email" required>
                            </div>

                            <input type="text" placeholder="Subject">

                            <textarea rows="6" placeholder="Write Your Comment" required></textarea>

                            <button type="submit">Post Comment</button>

                        </form>

                    </div>
                </div>
            </div>

            <!-- Sidebar -->

            <div class="sidebar">
                <div class="widget">
                    <h3>Search</h3>
                    <div class="search-box">
                        <input type="text" placeholder="Search...">
                        <button>Go</button>
                    </div>
                </div>

                <div class="widget">
                    <h3>Recent Posts</h3>
                    <div class="recent-post">
                        <img src="https://picsum.photos/100?1">
                        <div>
                            <h4>Top Web Design Trends in 2026</h4>
                            <small>June 15, 2026</small>
                        </div>
                    </div>

                    <div class="recent-post">
                        <img src="https://picsum.photos/100?2">
                        <div>
                            <h4>How to Improve Website Speed</h4>
                            <small>June 12, 2026</small>
                        </div>
                    </div>

                    <div class="recent-post">
                       <img src="https://picsum.photos/100?3">
                        <div>
                            <h4>SEO Tips for Beginners</h4>
                            <small>June 10, 2026</small>
                        </div>
                    </div>
                </div>

                <div class="widget categories">
                    <h3>Categories</h3>

                    <ul>
                        <li>
                            <a href="#">Web Design</a>
                            <span>12</span>
                        </li>

                        <li>
                            <a href="#">Development</a>
                            <span>08</span>
                        </li>

                        <li>
                            <a href="#">Marketing</a>
                            <span>15</span>
                        </li>

                        <li>
                            <a href="#">SEO</a>
                            <span>10</span>
                        </li>

                        <li>
                            <a href="#">Business</a>
                            <span>06</span>
                        </li>
                    </ul>
                </div>

                <div class="widget tags-widget">
                    <h3>Popular Tags</h3>

                    <div class="tag-list">
                        <a href="#">Web Design</a>
                        <a href="#">HTML</a>
                        <a href="#">CSS</a>
                        <a href="#">JavaScript</a>
                        <a href="#">WordPress</a>
                        <a href="#">SEO</a>
                        <a href="#">Marketing</a>
                        <a href="#">Business</a>
                        <a href="#">UI/UX</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

style.css

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f8f9fb;
    color:#333;
    line-height:1.8;
}

.container{
    width:90%;
    max-width:1300px;
    margin:auto;
}

.blog-wrapper{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    padding:60px 0;
}

/* Blog Content */

.blog-content{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.blog-image{
    width:100%;
    height:500px;
    object-fit:cover;
}

.blog-body{
    padding:40px;
}

.blog-category{
    display:inline-block;
    background:#111;
    color:#fff;
    padding:6px 15px;
    border-radius:30px;
    font-size:14px;
    margin-bottom:15px;
}

.blog-title{
    font-size:42px;
    line-height:1.3;
    margin-bottom:20px;
}

.blog-meta{
    display:flex;
    gap:20px;
    color:#000;
    margin-bottom:30px;
    flex-wrap:wrap;
}

.blog-body h2{
    margin:30px 0 15px;
}

.blog-body p{
    margin-bottom:20px;
}

blockquote{
    background:#f4f4f4;
    border-left:5px solid #111;
    padding:25px;
    margin:30px 0;
    font-size:18px;
    font-style:italic;
}

/* Tags */

.tags-wrapper{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:30px;
    flex-wrap:wrap;
}

.tags-title{
    font-size:16px;
    font-weight:600;
    color:#111;
    white-space:nowrap;
}

.tags{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.tags a{
    text-decoration:none;
    background:#f1f1f1;
    color:#333;
    padding:10px 18px;
    border-radius:30px;
    transition:.3s;
}

.tags a:hover{
    background:#111;
    color:#fff;
}

/* Mobile */
@media (max-width:768px){
    .tags-wrapper{
        align-items:flex-start;
        gap:12px;
    }

    .tags a{
        padding:8px 14px;
        font-size:14px;
    }
}

/* Author */

.author-box{
    display:flex;
    gap:25px;
    align-items:center;
    padding:30px;
    background:#f8f8f8;
    border-radius:15px;
    margin-top:40px;
}

.author-box img{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
}

.author-content h3{
    margin-bottom:10px;
}

.author-content p{
    color:#666;
    line-height:1.7;
    margin-bottom:15px;
}

.author-social{
    display:flex;
    gap:10px;
}

.author-social a{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#111;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.author-social a:hover{
    transform:translateY(-3px);
}

@media(max-width:768px){
    .author-box{
        flex-direction:column;
        text-align:center;
    }

    .author-social{
        justify-content:center;
    }
}

/* Sidebar */

.sidebar{
    display:flex;
    flex-direction:column;
    gap:30px;

    position:sticky;
    top:30px;
    align-self:start;
}

.widget{
    background:#fff;
    padding:25px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.widget h3{
    margin-bottom:20px;
}

.search-box{
    display:flex;
}

.search-box input{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    outline:none;
}

.search-box button{
    border:none;
    background:#111;
    color:#fff;
    padding:12px 18px;
    cursor:pointer;
}

.recent-post{
    display:flex;
    gap:15px;
    margin-bottom:20px;
}

.recent-post img{
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:10px;
}

.recent-post h4{
    font-size:15px;
    line-height:1.4;
}

.categories ul{
    list-style:none;
}

.categories li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #eee;
}

.categories li:last-child{
    border-bottom:none;
}

.categories a{
    text-decoration:none;
    color:#333;
    transition:.3s;
}

.categories a:hover{
    color:#000;
}

.categories ul li:hover span {
    background: #000;
    color: #fff;
}

.categories span{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f4f4f4;
    border-radius:50%;
    font-size:13px;
    font-weight:600;
    color:#111;
}

/* Sidebar Tags */

.tags-widget .tag-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.tags-widget .tag-list a{
    text-decoration:none;
    color:#333;
    background:#f5f5f5;
    padding:10px 16px;
    border-radius:30px;
    font-size:14px;
    transition:.3s ease;
    border:1px solid #eee;
}

.tags-widget .tag-list a:hover{
    background:#111;
    color:#fff;
    border-color:#111;
    transform:translateY(-2px);
}

/* Share Section */

.share-section{
    margin-top:40px;
    padding-top:30px;
    border-top:1px solid #eee;
}

.share-section h3{
    margin-bottom:15px;
}

.share-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.share-btn{
    text-decoration:none;
    padding:12px 20px;
    border-radius:50px;
    color:#fff;
    font-size:14px;
    transition:.3s;
}

.share-btn:hover{
    transform:translateY(-3px);
}

.facebook{
    background:#1877f2;
}

.twitter{
    background:#000;
}

.linkedin{
    background:#0a66c2;
}

.whatsapp{
    background:#25d366;
}

/* Comment Form */

.comment-section{
    margin-top:50px;
    padding-top:30px;
    border-top:1px solid #eee;
}

.comment-section h3{
    margin-bottom:20px;
}

.comment-form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.comment-form input,
.comment-form textarea{
    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
    font-family:inherit;
}

.comment-form textarea{
    resize:vertical;
}

.comment-form button{
    width:max-content;
    background:#111;
    color:#fff;
    border:none;
    padding:14px 30px;
    border-radius:50px;
    cursor:pointer;
    transition:.3s;
}

.comment-form button:hover{
    background:#333;
}

/* Responsive */

@media(max-width:768px){

    .form-row{
        grid-template-columns:1fr;
    }

    .share-buttons{
        flex-direction:column;
    }

    .share-btn{
        text-align:center;
    }

    .comment-form button{
        width:100%;
    }
}

/* Responsive */

@media(max-width:991px){

.blog-wrapper{
    grid-template-columns:1fr;
}

.blog-title{
    font-size:32px;
}

.blog-image{
    height:350px;
}

}

@media(max-width:768px){

.blog-body{
    padding:25px;
}

.blog-title{
    font-size:28px;
}

.author-box{
    flex-direction:column;
    text-align:center;
}

.blog-image{
    height:250px;
}

}

@media (max-width:991px){

    .sidebar{
        position:static;
        max-height:none;
        overflow:visible;
    }

}

Conclusion

A well-designed Single Blog Page Design plays a vital role in improving user experience and content engagement. With a responsive layout, organized sidebar widgets, category counters, tags, author profile, social sharing buttons, and a comment section, this modern blog design provides everything needed for a professional blogging website. Its clean structure, mobile-friendly design, and user-focused interface help readers navigate content easily while enhancing overall website performance and SEO. Whether for personal blogs, business websites, or online magazines, this single blog page design offers a modern and effective solution for content publishing.

Tags:

Post Rating

6.4 / 10

User rating: 6.4 / 10

Rate this post

Click a number to rate this article.

Web Designer & Developer

Hello, I’m Mohit, is a PHP Developer and Web Designer skilled in PHP, HTML, CSS, JavaScript, MySQL, and WordPress. He creates responsive, modern, and user-friendly websites with a focus on clean UI/UX design.

Single Blog Page Design

You may also like this:

Conclusion

Web Designer & Developer

Related Posts