Namaste दोस्तों! अगर आप अपनी Website को ज़्यादा Professional, Interactive और User‑Friendly बनाना चाहते हैं, तो Digital Clock Widget एक बेहतरीन Feature है। यह छोटा‑सा Live Clock आपकी Website पर Real‑Time समय दिखाता है, जिससे Visitors को सही समय की जानकारी मिलती रहती है और आपकी Site ज़्यादा भरोसेमंद लगती है।

इस Beginner‑Friendly Guide में आप सीखेंगे कि HTML, CSS और JavaScript की मदद से Digital Clock Widget कैसे Add करें — वो भी बिना किसी Plugin के। सबसे अच्छी बात यह है कि इस Article में मैं आपको Ready‑To‑Use Code भी दूँगा, जिसे आप सिर्फ Copy‑Paste करके तुरंत इस्तेमाल कर सकते हैं।

तो चलिए शुरू करते हैं और Step‑By‑Step पूरा Process समझते हैं 😊

आज के Digital दौर में Users सिर्फ Content नहीं देखते, बल्कि उन्हें Live Updates और Real‑Time Information भी चाहिए होती है। खासकर News Websites, Blogs, Admin Dashboards और Online Portals पर सही समय दिखाना बहुत ज़रूरी होता है। जब आपकी Website पर एक Live Digital Clock चलता रहता है, तो Visitors को बार‑बार किसी और App या Website पर जाकर Time देखने की जरूरत नहीं पड़ती।

इससे आपकी Website:

• ज़्यादा Professional लगती है।
• User Experience बेहतर होता है।
• Engagement बढ़ता है।
• Trust Factor Strong होता है।

यानी एक छोटा‑सा Widget आपकी Website की Value को काफी बढ़ा सकता है।

Digital Clock Widget क्या होता है?

Digital Clock Widget एक छोटा‑सा Live Time Box होता है जो आपकी Website पर Current Time दिखाता है। यह Clock Automatically Update होता रहता है और हर Second सही Time Show करता है।

इस Widget की खास बात यह है कि:

• यह Browser में Run करता है।
• Server पर कोई Load नहीं डालता।
• Mobile और Desktop दोनों पर काम करता है।
• Lightweight होता है।
• Fast Load होता है।

मतलब यह आपकी Website को Slow नहीं करता और Visitors को Live Time का Perfect Experience देता है।

Website पर Digital Clock Widget लगाने के फायदे

Digital Clock Widget लगाने से आपकी Website को कई Practical Benefits मिलते हैं:

• 🕒 Visitors को Real‑Time Time मिलता है।
• 📈 User Engagement Improve होता है।
• 📰 News Websites ज़्यादा Professional लगती हैं।
• 💻 Admin Dashboards पर बहुत Useful होता है।
• ⚡ कोई Server Load नहीं पड़ता।
• 📱 Mobile और Desktop दोनों पर Perfect चलता है।

खासकर News Portals और Live Update Websites के लिए यह Feature बहुत Important होता है, क्योंकि वहां हर Second मायने रखता है।

Widget Add करने के लिए आपको क्या चाहिए?

Digital Clock Widget Add करने के लिए आपको सिर्फ ये चीज़ें चाहिए:

• WordPress Website या कोई भी Website।
• Custom HTML Block या Page Editor Access।
• HTML + CSS + JavaScript Code मैं दूँगा।

बस इतना ही — कोई Plugin Install करने की जरूरत नहीं।

Step‑By‑Step – Digital Clock Widget कैसे Add करें

अब पूरा Process बिल्कुल Easy Steps में समझते हैं 👇

Step 1: Website Dashboard पर Login करें

सबसे पहले अपनी Website के Admin Panel में Login करें।

अगर WordPress है तो:

yourwebsite.com/wp-admin

Login करने के बाद आप Dashboard पर पहुँच जाएंगे।

Step 2: Widgets या Page Editor खोलें

अब आप दो तरीकों से Clock Add कर सकते हैं:

• Option 1: Appearance → Widgets → Sidebar
• Option 2: जिस Page या Post पर Clock दिखाना है, उसे Edit करें और वहाँ Custom HTML Block Add करें।

Step 3: Custom HTML Block Add करें

• “Add Block” पर Click करें।
• Search करें – Custom HTML
• उस Block को Page या Sidebar में Add करें।

अब आपके सामने एक खाली Box खुलेगा जहाँ आप Code Paste करेंगे।

Step 4: Digital Clock Widget Code Paste करें

अब नीचे दिया गया Code Copy करें और Custom HTML Box में Paste करें 👇

Digital Clock Widget 1

<!-- Digital Clock Widget by mtech4you -->
<div id=\\\\\\\"digitalClock\\\\\\\" style=\\\\\\\"
font-size:22px;
font-weight:bold;
background:#000;
color:#00ff00;
padding:10px 20px;
border-radius:5px;
width:fit-content;
\\\\\\\">

Loading...

</div>

<script>
function updateClock() {
    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;
    hours = hours ? hours : 12;

    hours = hours < 10 ? \\\\\\\'0\\\\\\\'+hours : hours;
    minutes = minutes < 10 ? \\\\\\\'0\\\\\\\'+minutes : minutes;
    seconds = seconds < 10 ? \\\\\\\'0\\\\\\\'+seconds : seconds;

    let timeString = hours + \\\\\\\":\\\\\\\" + minutes + \\\\\\\":\\\\\\\" + seconds + \\\\\\\" \\\\\\\" + ampm;

    document.getElementById(\\\\\\\"digitalClock\\\\\\\").innerHTML = timeString;
}

setInterval(updateClock, 1000);
updateClock();
</script>

Digital Clock Widget 2

<div class=\\\"news-clock\\\">
  <div class=\\\"clock-day\\\" id=\\\"day\\\"></div>
  <div class=\\\"clock-time\\\" id=\\\"time\\\"></div>
  <div class=\\\"clock-date\\\" id=\\\"date\\\"></div>
</div>

<style>
.news-clock{
width:100%;
max-width:280px;
margin:auto;
background:#b91c1c;
color:#fff;
padding:10px;
border-radius:6px;
text-align:center;
font-family:Segoe UI,Arial;
box-shadow:0 4px 10px rgba(0,0,0,.3)
}
.clock-day{
font-size:13px;
font-weight:600;
letter-spacing:1px;
}
.clock-time{
font-size:28px;
font-weight:700;
margin:3px 0;
}
.clock-date{
font-size:12px;
opacity:.9
}
</style>

<script>
function runNewsClock(){
let d=new Date();

let days=[\\\"Sunday\\\",\\\"Monday\\\",\\\"Tuesday\\\",\\\"Wednesday\\\",\\\"Thursday\\\",\\\"Friday\\\",\\\"Saturday\\\"];
let day=days[d.getDay()];

let h=d.getHours();
let m=d.getMinutes();
let s=d.getSeconds();
let ampm=h>=12?\\\"PM\\\":\\\"AM\\\";

h=h%12||12;
h=h<10?\\\"0\\\"+h:h;
m=m<10?\\\"0\\\"+m:m;
s=s<10?\\\"0\\\"+s:s;

document.getElementById(\\\"day\\\").innerHTML=day;
document.getElementById(\\\"time\\\").innerHTML=h+\\\":\\\"+m+\\\":\\\"+s+\\\" \\\"+ampm;
document.getElementById(\\\"date\\\").innerHTML=d.toDateString();
}
setInterval(runNewsClock,1000);
runNewsClock();
</script>

Digital Clock Widget 3

<div id=\\\"digital-clock\\\" style=\\\"font-size:24px;font-weight:bold;text-align:center;padding:10px;border:1px solid #ddd;border-radius:6px;\\\">
  Loading Time...
</div>

<script>
function showTime(){
    var date = new Date();
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
    var session = \\\"AM\\\";

    if(h == 0){
        h = 12;
    }
    if(h > 12){
        h = h - 12;
        session = \\\"PM\\\";
    }

    h = (h < 10) ? \\\"0\\\" + h : h;
    m = (m < 10) ? \\\"0\\\" + m : m;
    s = (s < 10) ? \\\"0\\\" + s : s;

    var time = h + \\\":\\\" + m + \\\":\\\" + s + \\\" \\\" + session;
    document.getElementById(\\\"digital-clock\\\").innerText = time;

    setTimeout(showTime, 1000);
}
showTime();
</script>

जो भी Digital Watch Widget आपने Copy किया है उसे, अपने Custom HTML Box में Paste करदे और Save करके Done करदे Code Update हो जायेगा।

Step 5: Final Preview करें

अब अपनी Website Open करें और Check करें:

• Digital Clock दिख रहा है।
• Time सही Update हो रहा है।
• हर Second Refresh हो रहा है।

अगर तुरंत न दिखे तो:

वेब Page Refresh करें या ब्राउज़र Cache Clear करें।

क्या यह Safe है?

Yes क्योंकि:

• यह Pure JavaScript Code है।
• Browser में Run करता है।
• Server पर कोई Load नहीं डालता।
• Website Slow नहीं करता।
• SEO Friendly है।

बस ध्यान रखें:

• Code सही से Paste करें।
• Extra Spaces न डालें।

Common Mistakes Avoid करें

• Script गलत जगह Paste करना।
• Code का कोई Part Delete कर देना।
• Cache Clear ना करना।
• HTTPS Site पर HTTP Script लगाना।

अगर आप चाहते हैं कि आपकी Website:

• ज़्यादा Professional लगे।
• Visitors को Real‑Time Info मिले।
• Engagement बढ़े।

तो Digital Clock Widget एक Perfect Feature है। और सबसे अच्छी बात — इसे Add करना इतना आसान है कि कोई भी Beginner 5 मिनट में कर सकता है।

अब आपकी बारी!

अगर यह Article आपको Helpful लगा हो — तो Comment में जरूर बताइए कि आपने Clock Widget कहाँ Add किया और WordPress, Blogging, Tech Tips और Website Tools से जुड़े Daily Updates पाने के लिए हमारे Telegram और WhatsApp Channel जरूर Join करें। आपकी Feedback ही हमारी सबसे बड़ी Motivation है ❤️