নিয়ে নিন ব্লগার সাইটে রমজান সেহরি ও ইফতার লাইভ কোড

আশা করি আপনারা সবাই ভালো আছেন। রমজান মাস একটি পবিত্র মাস এবং মুসলিম সম্প্রদায়ের জন্য এটি অত্যন্ত গুরুত্বপূর্ণ। এসময় সেহরি এবং ইফতার সময়গুলো সঠিকভাবে জানাটা গুরুত্বপূর্ণ। অনেকেই এই সময়সূচী জানার জন্য অনলাইনে খোঁজ করেন। আজকের পোস্টে, আমি আপনাদের সাথে শেয়ার করবো কিভাবে ব্লগার (Blogger) সাইটে রমজান ২০২৫ সেহরি ও ইফতার টাইম তৈরি করবেন।

এই পোস্টটি পড়লে আপনি খুব সহজেই আপনার ব্লগের জন্য সেহরি ও ইফতার সময়সূচী তৈরি করতে পারবেন এবং সেই সাথে একটি কাউন্টডাউন টাইমারও যুক্ত করতে পারবেন যা আপনার পাঠকদের জন্য খুবই সহায়ক হবে।

ধাপ ১: ব্লগ ড্যাশবোর্ডে প্রবেশ করুন প্রথমে আপনার ব্লগের ড্যাশবোর্ডে যান। আপনি যদি ব্লগার অ্যাকাউন্টে লগইন না করে থাকেন, তবে লগইন করুন।

ধাপ ২: Pages ট্যাবে ক্লিক করুন ড্যাশবোর্ডে গিয়ে, “Pages” ট্যাবটি সিলেক্ট করুন।

ধাপ ৩: নতুন পেইজ তৈরি করুন “Create new page” বাটনে ক্লিক করুন এবং একটি নতুন পেইজ তৈরি করুন।

ধাপ ৪: HTML ভিউতে কোড পেস্ট করুন পেইজ তৈরির পর, আপনি “HTML” ভিউতে গিয়ে কোডটি পেস্ট করতে পারবেন। “Compose” ভিউতে কোডটি পেস্ট করলে সঠিকভাবে কাজ নাও করতে পারে। তাই HTML ভিউতে কোড পেস্ট করুন।

ধাপ ৫: পাবলিশ করুন সব কিছু ঠিকঠাক হলে, পেইজটি পাবলিশ করে দিন। এরপর আপনার ব্লগে রমজান ২০২৫ সেহরি ও ইফতার টাইম দেখানো হবে।

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Ramadan 2025 – Sehri & Iftar Countdown</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
background: white;
padding: 20px;
margin: auto;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {color: #28a745;}
h2, h3 {margin: 10px 0;}
.time-box {
background: black;
color: white;
padding: 10px;
font-size: 18px;
font-weight: bold;
display: inline-block;
border-radius: 5px;
}
.sehri-iftar {
background: #ddd;
padding: 15px;
margin: 10px 0;
border-radius: 8px;
}
.countdown {
font-size: 20px;
font-weight: bold;
background: black;
color: white;
padding: 10px;
display: inline-block;
border-radius: 5px;
margin-top: 5px;
}
.flag {
width: 40px;
height: auto;
margin-bottom: 10px;

}
.city {
font-size: 18px;
font-weight: bold;
color: black;
}
</style>
</head>
<body>

<div class=”container”>
<img src=”https://upload.wikimedia.org/wikipedia/commons/f/f9/Flag_of_Bangladesh.svg” class=”flag” alt=”Bangladesh Flag”>
<h2 class=”city”>Dhaka, Dhaka Division, Bangladesh</h2>

<h3>Current Time</h3>
<div id=”currentTime” class=”time-box”>Loading…</div>

<div class=”sehri-iftar”>
<h3>Today’s Sehri Ends At</h3>
<div id=”sehriTime”>Loading…</div>
<div id=”sehriCountdown” class=”countdown”>Loading…</div>
</div>

<div class=”sehri-iftar”>
<h3>Today’s Iftar Time</h3>
<div id=”iftarTime”>Loading…</div>
<div id=”iftarCountdown” class=”countdown”>Loading…</div>
</div>

<div class=”sehri-iftar”>
<h3>Tomorrow’s Sehri Time</h3>
<div id=”tomorrowSehriTime” class=”countdown”>Loading…</div>
</div>

<div class=”sehri-iftar”>
<h3>Tomorrow’s Iftar Time</h3>
<div id=”tomorrowIftarTime” class=”countdown”>Loading…</div>
</div>
</div>

function updateTime() {
let now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();

let ampm = hours >= 12 ? ‘PM’ : ‘AM’;
hours = hours % 12 || 12;
minutes = minutes < 10 ? ‘0’ + minutes : minutes;
seconds = seconds < 10 ? ‘0’ + seconds : seconds;

document.getElementById(“currentTime”).innerText = `${hours}:${minutes}:${seconds} ${ampm}`;
setTimeout(updateTime, 1000);
}

function getSehriIftarTimes() {
let today = new Date();
let day = today.getDate();
let month = today.toLocaleString(‘en-US’, { month: ‘long’ });
let currentDateStr = `${month} ${day}`;

let todaySchedule = sehriIftarTimes.find(t => t.date === currentDateStr);
let tomorrowSchedule = sehriIftarTimes.find(t => t.date === `${month} ${day + 1}`);

if (todaySchedule) {
document.getElementById(“sehriTime”).innerText = todaySchedule.sehri;
document.getElementById(“iftarTime”).innerText = todaySchedule.iftar;
}

if (tomorrowSchedule) {
document.getElementById(“tomorrowSehriTime”).innerText = tomorrowSchedule.sehri;
document.getElementById(“tomorrowIftarTime”).innerText = tomorrowSchedule.iftar;
}

startCountdown(“sehriCountdown”, todaySchedule.sehri);
startCountdown(“iftarCountdown”, todaySchedule.iftar);
}

function startCountdown(targetId, timeString) {
let now = new Date();
let [time, meridiem] = timeString.split(” “);
let [hour, minute] = time.split(“:”).map(Number);

if (meridiem === “PM” && hour !== 12) hour += 12;
if (meridiem === “AM” && hour === 12) hour = 0;

let eventTime = new Date();
eventTime.setHours(hour, minute, 0, 0);

function updateTimer() {
let now = new Date().getTime();
let distance = eventTime.getTime() – now;

if (distance < 0) {
document.getElementById(targetId).innerHTML = “<span style=’color:green;’>Time Over!</span>”;
return;
}

let hours = Math.floor((distance / (1000 * 60 * 60)) % 24);
let minutes = Math.floor((distance / (1000 * 60)) % 60);
let seconds = Math.floor((distance / 1000) % 60);

document.getElementById(targetId).innerHTML = `${hours}h ${minutes}m ${seconds}s`;
}
setInterval(updateTimer, 1000);
updateTimer();
}

updateTime();
getSehriIftarTimes();
</script>

</body>
</html>

ব্লগার সাইটে রমজান ২০২৫ সেহরি ও ইফতার টাইম তৈরির জন্য এই কোডটি ব্যবহার করলে আপনি খুব সহজেই আপনার পাঠকদের জন্য একটি উপকারী ও আকর্ষণীয় পেইজ তৈরি করতে পারবেন। আপনার ব্লগের জন্য এই ধরনের একটি পেইজ তৈরির মাধ্যমে আপনি আপনার পাঠকদের রমজান মাসে আরও বেশি সহায়তা করতে পারবেন।