Kanban boards are increasingly being used in project management for prioritizing tasks and improving the rate of work. In this article, we’ll go through the process of building a basic Kanban board with HTML, CSS, and JavaScript that you can include into your Blogger blog.
What is a Kanban Board?
A Kanban board is a system that helps to track items on their way through several states, and the most common columns to use are “Backlogs,” “In Progress,” and “Done.” This makes it possible to give priorities and update the task as they are being undertaken.
As a blogger, it might be important to communicate to readers on what you are doing with your blog, what are your plans and ideas, how you are engaging and what achievements you have made. It is not mandatory to have such a page however the trend is growing with many websites including www.example.com/now page.
The design concept and idea came when I was building a similar page for my personal portfolio on NextJS, why not make one for blogger? And here it is : A kanban board or todo page or now page for blogger.
View the design live at,
Image demo:
How to add a Kanban page in blogger?
The steps involve simple copy pasting the HTML, CSS and Javascript code to your blogger page. Please follow this guide on how to create a page in blogger.
HTML Code
<!-- Kanban Code by www.TwistBlogg.com -->
<div class="kanban-board">
<div class="kanban-board-header">
<h2>Welcome to my Kanban Board 📋</h2>
<p>In this space, I share my progress, plans, accomplishments, and random ideas. While it doesn't capture everything I'm doing, it offers a glimpse into key parts of my journey. This keeps me alert and focused! <i>The design is inspired from <a href='https://amanbhattarai.com.np/board' target='_blank'>Aman's portfolio.</a></i></p>
<p><i>Last updated on: Sept 25, 2024</i></p>
</div>
<div class="kanban-board-columns">
<div class="kanban-column">
<div class="kanban-column-header">
<span class="column-title">🪵 Backlogs</span>
<span class="column-count">(6)</span>
</div>
<div class="kanban-column-items">
<div class="kanban-item" draggable="true">
<span class="item-type project">Project</span>
<h4 class="item-title">Do a combined SQL and Tableau Project.</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type goal">Goal</span>
<h4 class="item-title">Give IELTS and French Exam.</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type goal">Goal</span>
<h4 class="item-title">Finish reading at least a book by the end of year.</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type learning">Learning</span>
<h4 class="item-title">Learn Tableau concepts.</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type task">Task</span>
<h4 class="item-title">Utilize Apple Keynote for creative presentations.</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type goal">Goal</span>
<h4 class="item-title">Join Gym by the end of year.</h4>
</div>
</div>
</div>
<div class="kanban-column">
<div class="kanban-column-header">
<span class="column-title">💡 Ideas</span>
<span class="column-count">(4)</span>
</div>
<div class="kanban-column-items">
<div class="kanban-item" draggable="true">
<span class="item-type project">Project</span>
<h4 class="item-title">Implement available Regression model on a Kaggle dataset.</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type task">Task</span>
<h4 class="item-title">Detailed article on creating blog theme from scratch.</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type project">Project</span>
<h4 class="item-title">Build a Python program for activating theme licenses in blogger.</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type task">Task</span>
<h4 class="item-title">Create and share Dashboards on Tableau Public.</h4>
</div>
</div>
</div>
<div class="kanban-column">
<div class="kanban-column-header">
<span class="column-title">👷 In Progress</span>
<span class="column-count">(5)</span>
</div>
<div class="kanban-column-items">
<div class="kanban-item" draggable="true">
<span class="item-type goal">Goal</span>
<h4 class="item-title">Get active on LinkedIn.</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type learning">Learning</span>
<h4 class="item-title">Learning advanced SQL concepts.</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type learning">Learning</span>
<h4 class="item-title">Reading French language.</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type dev">Dev</span>
<h4 class="item-title">Leveraging Quarto for Notebook reports.</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type learning">Learning</span>
<h4 class="item-title">Enrolled with NPower for junior data analyst program.</h4>
</div>
</div>
</div>
<div class="kanban-column">
<div class="kanban-column-header">
<span class="column-title">💪 Completed</span>
<span class="column-count">(3)</span>
</div>
<div class="kanban-column-items">
<div class="kanban-item" draggable="true">
<span class="item-type task">Task</span>
<h4 class="item-title">Building my personal Portfolio!</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type project">Project</span>
<h4 class="item-title">Complete IBM Capstone project.</h4>
</div>
<div class="kanban-item" draggable="true">
<span class="item-type goal">Goal</span>
<h4 class="item-title">Get IBM data analyst certificate from coursera.</h4>
</div>
</div>
</div>
</div>
</div>
CSS Code
.kanban-board {
margin: 40px auto;
overflow-x: auto;
}
.kanban-board-header {
max-width: 550px;
margin: 0 auto 40px;
}
.kanban-board-header h2 {
font-size: 32px;
font-weight: 800;
margin-top: 12px;
margin-bottom: 24px;
}
.kanban-board-header p {
font-size: 16px;
font-weight: 400;
margin-bottom: 40px;
}
.kanban-board-columns {
display: flex;
flex-grow: 1;
gap: 24px;
}
.kanban-column {
flex-shrink: 0;
width: 384px;
}
.kanban-column-header {
display: flex;
align-items: center;
height: 40px;
padding: 0 8px;
margin-bottom: 8px;
}
.column-title {
font-weight: 600;
}
.column-count {
display: flex;
align-items: center;
justify-content: center;
margin-left: 8px;
font-weight: 600;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
.kanban-column-items {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 8px;
}
.kanban-item {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 16px;
background-color: #fff;
border: 1px solid #d1d5db;
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
cursor: move;
transition: transform 0.2s, box-shadow 0.2s;
}
.kanban-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 8px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.06);
}
.kanban-item.dragging {
opacity: 0.5;
transform: scale(1.05);
box-shadow: 0 8px 10px -4px rgba(0, 0, 0, 0.1), 0 6px 8px -4px rgba(0, 0, 0, 0.06);
}
.item-type {
display: inline-block;
padding: 2px 8px;
font-size: 14px;
font-weight: 300;
border-radius: 16px;
}
.item-type.project {
background-color: #fef3c7;
color: #92400e;
}
.item-type.goal {
background-color: #e9d5ff;
color: #6b21a8;
}
.item-type.task {
background-color: #cffafe;
color: #155e75;
}
.item-type.dev {
background-color: #d1fae5;
color: #065f46;
}
.item-type.learning {
background-color: #ffe4e6;
color: #9f1239;
}
.item-title {
margin-top: 12px;
font-weight: 400;
font-size: 16px;
}JavaScript Code
<script>
document.addEventListener('DOMContentLoaded', function() {
const items = document.querySelectorAll('.kanban-item');
items.forEach(item => {
item.addEventListener('dragstart', function() {
this.classList.add('dragging');
});
item.addEventListener('dragend', function() {
this.classList.remove('dragging');
});
});
});
</script>Now, you should have a good looking kanban page on blogger. Modify and make changes accordingly. Happy blogging. 🙋