How to Add Event Calendar to Blogger | Add Event Calendar in Blogger
Hello Guys Welcome to AS Theme World. Today in the article we are going to learn "How to Add Event Calendar to Blogger". Adding a events calendar to blogger benefits your site’s users and increase your brand awareness.
What is An Event Calendar
An Events Calendar can be used on your website, to show the events to your visitors based on dates on your website. It is an organized way to show the upcoming events based on calendar dates.
Benefits of Adding Event Calendar
An online events calendar creates awareness around the activities of your organization. It also increases the visibility of your brand as you create more events.
Steps to Add Event Calendar
This is divided into two steps, the first step is adding the CSS code to blog template and the second step is adding the HTML codes in post/page where you want to add Event Calendar.
Step 1. Adding CSS Codes
First of all search for the code ]]></b:skin> and add the following CSS code above it.
/* Event Calender CSS Codes */
.event-container {
font-family: "Roboto", sans-serif;
max-width: 800px;
margin: 0 auto;
}
.event-container h3.year {
font-size: 40px;
text-align: center;
border-bottom: 1px solid #b1b1b1;
}
.event-container .event {
box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.4);
display: flex;
border-radius: 8px;
margin: 32px 0;
}
.event .event-left {
background: #222;
min-width: 82px;
display: flex;
align-items: center;
justify-content: center;
color: #eee;
padding: 8px 48px;
font-weight: bold;
text-align: center;
border-radius: 8px 0 0 8px;
}
.event .event-left .date {
font-size: 56px;
}
.event .event-left .month {
font-size: 16px;
font-weight: normal;
padding-top: 20px;
}
.event .event-right {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 24px;
}
.event .event-right h3.event-title {
font-size: 24px;
margin: 24px 0 10px 0;
color: #ff3b21;
text-transform: uppercase;
}
.event .event-right .event-timing {
background: #edbb5c;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
padding: 8px;
border-radius: 16px;
margin: 24px 0;
font-size: 14px;
}
.event .event-right .event-timing img {
height: 20px;
padding-right: 8px;
}
@media (max-width: 550px) {
.event {
flex-direction: column;
}
.event .event-left {
padding: 0;
border-radius: 8px 8px 0 0;
}
.event .event-left .event-date .date,
.event .event-left .event-date .month {
display: inline-block;
font-size: 24px;
}
.event .event-left .event-date {
padding: 10px 0;
}
}
- You can change the highlighted parts as per your liking.
If you are facing problem in finding the code ]]></b:skin> to put the CSS code. You can search for the code </head> and put the css code right above the code </head> with notes must be squeezed in the code <style> ---- </style>. It looks like this:
<style>
<!-- Fill the above CSS code -->
</style>Step 2. Adding HTML Codes
Now copy following HTML codes and paste to post/page where you want to add Event Calendar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Calendar</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="event-container">
<h3 class="year">2021</h3>
<div class="event">
<div class="event-left">
<div class="event-date">
<div class="date">8</div>
<div class= "month">Feb</div>
</div>
</div>
<div class="event-right">
<h3 class="event-title">Event Title</h3>
<div class="event-description">
Event description here...
</div>
<div class="event-timing">
<img src="https://1.bp.blogspot.com/-cmgiIH7skjE/YA2TW_sPqqI/AAAAAAAAFp0/y2sWK47rtGY3BIeHGyr4j7FSsKB71wkIgCLcBGAsYHQ/s26/time.png" alt="" /> 10:00 am
</div>
</div>
</div>
<div class="event">
<div class="event-left">
<div class="event-date">
<div class="date">14</div>
<div class="month">Feb</div>
</div>
</div>
<div class="event-right">
<h3 class="event-title">Event Title</h3>
<div class="event-description">
Event description here....
</div>
<div class="event-timing">
<img src="https://1.bp.blogspot.com/-cmgiIH7skjE/YA2TW_sPqqI/AAAAAAAAFp0/y2sWK47rtGY3BIeHGyr4j7FSsKB71wkIgCLcBGAsYHQ/s26/time.png" alt="" /> 10:45 am
</div>
</div>
</div>
<div class="event">
<div class="event-left">
<div class="event-date">
<div class="date">8</div>
<div class="month">March</div>
</div>
</div>
<div class="event-right">
<h3 class="event-title">Event Title</h3>
<div class="event-description">
Event description here...
</div>
<div class="event-timing">
<img src="https://1.bp.blogspot.com/-cmgiIH7skjE/YA2TW_sPqqI/AAAAAAAAFp0/y2sWK47rtGY3BIeHGyr4j7FSsKB71wkIgCLcBGAsYHQ/s26/time.png" alt="" /> 10:00 am
</div>
</div>
</div>
<div class="event">
<div class="event-left">
<div class="event-date">
<div class="date">9</div>
<div class="month">May</div>
</div>
</div>
<div class="event-right">
<h3 class="event-title">Event Title</h3>
<div class="event-description">
Event description here...
</div>
<div class="event-timing">
<img src="https://1.bp.blogspot.com/-cmgiIH7skjE/YA2TW_sPqqI/AAAAAAAAFp0/y2sWK47rtGY3BIeHGyr4j7FSsKB71wkIgCLcBGAsYHQ/s26/time.png" alt="" /> 10:30 am
</div>
</div>
</div>
<h3 class="year">2022</h3>
<div class="event">
<div class="event-left">
<div class="event-date">
<div class="date">4</div>
<div class="month">Jan</div>
</div>
</div>
<div class="event-right">
<h3 class="event-title">Event Title</h3>
<div class="event-description">
Event description here....
</div>
<div class="event-timing">
<img src="https://1.bp.blogspot.com/-cmgiIH7skjE/YA2TW_sPqqI/AAAAAAAAFp0/y2sWK47rtGY3BIeHGyr4j7FSsKB71wkIgCLcBGAsYHQ/s26/time.png" alt="" /> 10:00 am
</div>
</div>
</div>
<div class="event">
<div class="event-left">
<div class="event-date">
<div class="date">8</div>
<div class="month">Feb</div>
</div>
</div>
<div class="event-right">
<h3 class="event-title">Event Title</h3>
<div class="event-description">
Event description here....
</div>
<div class="event-timing">
<img src="https://1.bp.blogspot.com/-cmgiIH7skjE/YA2TW_sPqqI/AAAAAAAAFp0/y2sWK47rtGY3BIeHGyr4j7FSsKB71wkIgCLcBGAsYHQ/s26/time.png" alt="" /> 10:00 am
</div>
</div>
</div>
</div>
</body>
</html>
- Change the highlighted parts as per your liking.
Now, your Event Calendar is completely created and working properly. I hope you like this article and you get what you want. Share this article with your friends and on your social profiles. If you face any problem in any section that put your questions and problems in comment box provided below.