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
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 ;
} h 1 {
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, #auti 1 , #auti 2 {
display : flex;
align-items: center ;
justify- content : center ;
} |
Output:
Article Tags :
Recommended Articles