Follow us to get updates regarding Latest posts Follow Now!

How To Add Digital Clock In Blogger

So today In this Post we have shared a Tutorial about How To Add Digital Clock In Blogger, I hope you have liked It. if you have any Questions Please

In this article I have made a tutorial on How To Add Digital Clock In Blogger

how-to-add-digital-clock-in-blogger


Hello Guys ! Welcome back to Techy DarshaN, Today Our Tutorial is How To Add Digital Clock In Blogger. Follow some easy steps below and add a Digital Clock To Your Blogger Site .

Pros :

  1. Supports Dark Mode 
  2. New Digital Clock Look 
  3. Attractive Look 
Let's Begin !

Demo 

How To Add Digital Clock In Blogger : 

Step 1 : Go to Blogger's Dashboard 
Step 2 : Create a new Page/Post or edit a Page/Post
Step 3 : Switch To HTML view 
Step 4 : Copy and paste the code given below 

   
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"></link>
   
  <section>
    <div class="container">
      <div class="icons">
        <i class="fas fa-moon"></i>
        <i class="fas fa-sun"></i>
      </div>
      <div class="time">
        <div class="time-colon">
          <div class="time-text">
            <span class="num hour_num">08</span>
            <span class="text">Hours</span>
          </div>
          <span class="colon">:</span>
        </div>
        <div class="time-colon">
          <div class="time-text">
            <span class="num min_num">45</span>
            <span class="text">Minutes</span>
          </div>
          <span class="colon">:</span>
        </div>
        <div class="time-colon">
          <div class="time-text">
            <span class="num sec_num">06</span>
            <span class="text">Seconds</span>
          </div>
          <span class="am_pm">AM</span>
        </div>
      </div>
    </div>

  </section>

  <script>
  let section = document.querySelector("section"),
  icons = document.querySelector(".icons");

  icons.onclick = ()=>{
    section.classList.toggle("dark");
  }

  // creating a function and calling it in every seconds
  setInterval(()=>{

    let date = new Date(),
    hour = date.getHours(),
    min = date.getMinutes(),
    sec = date.getSeconds();

    let d;
    d = hour < 12 ? "AM" : "PM"; //if hour is smaller than 12, than its value will be AM else its value will be pm
    hour = hour > 12 ? hour - 12 : hour; //if hour value is greater than 12 than 12 will subtracted ( by doing this we will get value till 12 not 13,14 or 24 )
    hour = hour == 0 ? hour = 12 : hour; // if hour value is  0 than it value will be 12

    // adding 0 to the front of all the value if they will less than 10
    hour = hour < 10 ? "0" + hour : hour;
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;

    document.querySelector(".hour_num").innerText = hour;
    document.querySelector(".min_num").innerText = min;
    document.querySelector(".sec_num").innerText = sec;
    document.querySelector(".am_pm").innerText = d;

  }, 1000); // 1000 milliseconds = 1s

  </script>

  
  <style>
    
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap');

section{
  min-height: 10vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  padding: 0 20px;
}
section.dark{
  background: #fafafa;
}
section .container{
  display: flex;
  align-items : center;
  justify-content: center;
  height: 220px;
  max-width: 560px;
  width: 100%;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  position: relative;
}
section.dark .container{
  background: #323840;
}
section .container .icons i{
  position: absolute;
  right: 17px;
  top: 17px;
  height: 30px;
  width: 30px;
  background: #24292D;
  color: #fff;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
}
section.dark .container .icons i{
  background: #fff;
  color: #323840;
}
.container .icons i.fa-sun{
  opacity: 0;
  pointer-events: none;
}
section.dark .container .icons i.fa-sun{
  opacity: 1;
  pointer-events: auto;
  font-size: 16px;
}
section .container .time{
  display: flex;
  align-items: center;
}
.container .time .time-colon{
  display: flex;
  align-items: center;
  position: relative;
}
.time .time-colon .am_pm{
   display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0;
  right: -50px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}
section.dark .time .time-colon .am_pm{
  color: #fff;
}
.time .time-colon .time-text{
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: #F0F8FF;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
section.dark .time .time-colon .time-text{
  background: #24292D;
}
.time .time-colon .time-text,
.time .time-colon .colon{
  font-size: 35px;
  font-weight: 600;
}
section.dark .time .time-text .num,
section.dark .time .colon{
  color: #fff;
}
.time .time-colon .colon{
  font-size: 40px;
  margin: 0 10px;
}
.time .time-colon .time-text .text{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}
section.dark  .time .time-colon .text{
  color: #fff;
}

  </style> 
Step 5 : Save your Page/Post after pasting the code given above 

Conclusion : 

So today In this Post we have shared a Tutorial about How To Add Digital Clock In Blogger, I hope you have liked It. if you have any Questions Please feel free to ask in the comments section or Join our Telegram Group for discussion.

Getting Info...

About the Author

Student | Developer | Blogger

2 comments

  1. reciprocal interaction

    i gave it 5 stars
    1. Thank You. I hope you liked it .
Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.