Open In App

How to create a Blog Archive using HTML and CSS?

Last Updated : 25 Jul, 2024
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

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

blog11
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;
}

Output:


Next Article
How to Create An Amazon Clone in HTML and CSS ?

M
mguru4c05q
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox