How to create a Blog Archive using HTML and CSS ?

Last Updated : 04 Dec, 2023

In this article, we will see the process for creating a simple yet effective blog archive using HTML and CSS. A Blog Archive is a crucial feature for any blog website, as it provides an organized way for users. One essential element for any blog or content-driven website is a blog archive. A blog archive allows users to navigate through and access the older blog posts with ease.

Preview

Preview Image of Blog Archive

Approach

First, create the HTML structure for the blog archive. We’ll use an unordered list (<ul>) to list the blog posts. Each list item (<li>) will represent a blog post and link to the respective post. Now, let’s style our blog archive using CSS. Create a style.css file and link it to your HTML file.
Create individual HTML files for each blog post and place them in the blog-posts folder. These files will contain the content of your blog posts. Creating a blog archive using HTML and CSS is a great way to showcase a list of your blog posts in an organized and visually appealing manner.
There are four HTML files where file index.html has a list of Blog Archive and three different blog pages and on each page, there are three buttons that navigate to the other three files.

Example: This example illustrates the Creation of a Blog Archive Using HTML and CSS.

HTML

<!-- index.html -->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <link rel="stylesheet" 
          href="style.css"> 
    <title>The Blog Archive</title> 
</head> 
  
<body> 
  
    <header> 
        <h1> 
            GeeksforGeeks Blog Archive 
        </h1> 
    </header> 
    <main> 
        <ul class="blog-list"> 
            <li> 
                <div> 
                    <a id="auti" href="./post1.html"> 
                        Articles 
                    </a> 
  
                </div> 
            </li> 
            <li> 
                <a id="auti1" href="./post2.html"> 
                    Courses 
                </a> 
            </li> 
            <li> 
                <a id="auti2" href="./post3.html"> 
                    Programming Language 
                </a> 
            </li> 
        </ul> 
    </main> 
</body> 
  
</html>

HTML

<!-- post1.html -->
  
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>The Blog Post 1</title> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            margin: 0; 
            padding: 0; 
            background-color: #f5f5f5; 
        } 
  
        header { 
            background-color: rgb(7, 119, 37); 
            color: #fff; 
            text-align: center; 
            padding: 10px 0; 
        } 
  
        header h1 { 
            font-size: 36px; 
        } 
  
        main { 
            max-width: 800px; 
            margin: 20px auto; 
            padding: 20px; 
            background-color: #fff; 
            border-radius: 5px; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
        } 
  
        img { 
            max-width: 100%; 
            height: auto; 
        } 
  
        p { 
            font-size: 18px; 
            line-height: 1.6; 
            margin-top: 20px; 
        } 
  
        .buttonele { 
            height: 50px; 
            width: 200px; 
            border: 2px solid rgb(66, 66, 121); 
            border-radius: 10px; 
        } 
  
        .authordatepub { 
            margin: 5px; 
            color: #171212; 
            width: 300px; 
            border-radius: 10px; 
        } 
  
        .flexutility { 
            display: flex; 
            justify-content: space-around; 
            height: 30px; 
            margin: 10px; 
            text-align: center; 
        } 
  
        .linksut { 
            display: flex; 
            justify-content: space-evenly; 
        } 
    </style> 
</head> 
  
<body> 
    <header> 
        <h1>GeeksforGeeks Articles</h1> 
    </header> 
    <main> 
        <div class="flexutility"> 
            <div class="authordatepub"> 
                Author: GeeksforGeeks Team 
            </div> 
            <div class="authordatepub"> 
                Date : 24, Jan 2023 
            </div> 
        </div> 
        <p> 
            GeeksforGeeks is a popular online 
            platform that provides a wide range 
            of computer science and programming-related 
            content. It offers tutorials, articles, coding 
            challenges, and resources for developers, 
            programmers, and students to enhance their 
            skills and knowledge in various programming 
            languages and computer science topics. 
        </p> 
        <div class="linksut"> 
            <a style="text-decoration: none;" 
               href="a1.html"> 
                <button class="buttonele"> 
                    Blog Archive List 
                </button> 
            </a> 
            <a style="text-decoration: none;" 
               href="post2.html"> 
                <button class="buttonele"> 
                    Courses 
                </button> 
            </a> 
            <a style="text-decoration: none;"
               href="post3.html"> 
                <button class="buttonele"> 
                    Programming Language 
                </button> 
            </a> 
        </div> 
    </main> 
</body> 
  
</html>

HTML

<!-- post2.html -->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>The Blog Post 1</title> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            margin: 0; 
            padding: 0; 
            background-color: #f5f5f5; 
        } 
  
        header { 
            background-color: rgb(7, 119, 37); 
            color: #fff; 
            text-align: center; 
            padding: 10px 0; 
        } 
  
        header h1 { 
            font-size: 36px; 
        } 
  
        main { 
            max-width: 800px; 
            margin: 20px auto; 
            padding: 20px; 
            background-color: #fff; 
            border-radius: 5px; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
        } 
  
        img { 
            max-width: 100%; 
            height: auto; 
        } 
  
        p { 
            font-size: 18px; 
            line-height: 1.6; 
            margin-top: 20px; 
        } 
  
        .buttonele { 
            height: 50px; 
            width: 200px; 
            border: 2px solid rgb(66, 66, 121); 
            border-radius: 10px; 
        } 
  
        .authordatepub { 
            margin: 5px; 
            color: #171212; 
            width: 300px; 
            border-radius: 10px; 
        } 
  
        .flexutility { 
            display: flex; 
            justify-content: space-around; 
            height: 30px; 
            margin: 10px; 
            text-align: center; 
        } 
  
        .linksut { 
            display: flex; 
            justify-content: space-evenly; 
        } 
    </style> 
</head> 
  
<body> 
    <header> 
        <h1>GeeksforGeeks Courses</h1> 
    </header> 
    <main> 
        <div class="flexutility"> 
            <div class="authordatepub"> 
                Author: GeeksforGeeks Team 
            </div> 
            <div class="authordatepub"> 
                Date : 24, Feb 2023 
            </div> 
        </div> 
        <p> 
           GeeksforGeeks provides various courses like 
           Data structures and algorithms, 
           Full stack development, etc., 
           that helps students and working professionals 
           to enhance their knowledge. It also offers 
           tutorials, articles, coding challenges, and 
           resources for developers, programmers, and 
           students to enhance their skills and knowledge 
           in various programming languages and 
           computer science topics. 
        </p> 
        <div class="linksut"> 
            <a style="text-decoration: none;" 
               href="a1.html"> 
                <button class="buttonele"> 
                    Blog Archive List 
                </button> 
            </a> 
            <a style="text-decoration: none;" 
               href="post3.html"> 
                <button class="buttonele"> 
                    Programming Language 
                </button> 
            </a> 
            <a style="text-decoration: none;" 
               href="post1.html"> 
                <button class="buttonele"> 
                    Articles 
                </button> 
            </a> 
        </div> 
    </main> 
</body> 
  
</html>

HTML

<!-- post3.html -->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>The Blog Post 1</title> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            margin: 0; 
            padding: 0; 
            background-color: #f5f5f5; 
        } 
  
        header { 
            background-color: rgb(7, 119, 37); 
            color: #fff; 
            text-align: center; 
            padding: 10px 0; 
        } 
  
        header h1 { 
            font-size: 36px; 
        } 
  
        main { 
            max-width: 800px; 
            margin: 20px auto; 
            padding: 20px; 
            background-color: #fff; 
            border-radius: 5px; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
        } 
  
        img { 
            max-width: 100%; 
            height: auto; 
        } 
  
        p { 
            font-size: 18px; 
            line-height: 1.6; 
            margin-top: 20px; 
        } 
  
        .buttonele { 
            height: 50px; 
            width: 200px; 
            border: 2px solid rgb(66, 66, 121); 
            border-radius: 10px; 
        } 
  
        .authordatepub { 
            margin: 5px; 
            color: #171212; 
            width: 300px; 
            border-radius: 10px; 
        } 
  
        .flexutility { 
            display: flex; 
            justify-content: space-around; 
            height: 30px; 
            margin: 10px; 
            text-align: center; 
        } 
  
        .linksut { 
            display: flex; 
            justify-content: space-evenly; 
        } 
    </style> 
</head> 
  
<body> 
    <header> 
        <h1>GeeksforGeeks Programming Language</h1> 
    </header> 
    <main> 
        <div class="flexutility"> 
            <div class="authordatepub"> 
                Author: GeeksforGeeks Team 
            </div> 
            <div class="authordatepub"> 
                Date : 24, November 2022 
            </div> 
        </div> 
  
        <p> 
            GeeksforGeeks is a popular online 
            platform that provides a wide range 
            of Data structures and algorithm related 
            content. It offers tutorials, articles, 
            coding challenges, and resources for 
            developers, programmers, and students to 
            enhance their skills and knowledge in 
            various programming languages and 
            computer science topics. 
        </p> 
        <div class="linksut"> 
            <a style="text-decoration: none;"
               href="a1.html"> 
                <button class="buttonele"> 
                    Blog Archive List 
                </button> 
            </a> 
            <a style="text-decoration: none;" 
               href="post2.html"> 
                <button class="buttonele"> 
                    Courses 
                </button> 
            </a> 
            <a style="text-decoration: none;" 
               href="post1.html"> 
                <button class="buttonele"> 
                    Articles 
                </button> 
            </a> 
        </div> 
    </main> 
</body> 
  
</html>

CSS

/* style.css */
body, ul { 
    margin: 0; 
    padding: 0; 
} 
  
body { 
    font-family: Arial, sans-serif; 
    background-color: #f5f5f5; 
    margin: 0; 
    padding: 0; 
} 
  
h1 { 
    font-size: 36px; 
} 
  
header { 
  
    background-color: rgb(7, 119, 37); 
    color: #fff; 
    text-align: center; 
    padding: 10px 0; 
} 
  
main { 
    max-width: 800px; 
    height: 500px; 
    margin: 20px auto; 
    padding: 20px; 
    background-color: #fff; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
} 
  
.blog-list { 
    list-style: none; 
    padding: 0; 
} 
  
.blog-list li { 
    margin-bottom: 20px; 
} 
  
.blog-list li a { 
    text-decoration: none; 
    color: #333; 
    font-weight: bold; 
    display: inline-block; 
    background-color: #f1f1f1; 
    padding: 10px 20px; 
    border-radius: 5px; 
    height: 100px; 
    font-size: 30px; 
    width: 750px; 
} 
  
.blog-list li a:hover { 
    background-color: #3498db; 
    color: #fff; 
} 
  
#auti, #auti1, #auti2 { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}