[Premium] Blockquote With Copy And Share Button | Caption Status Box Script for Blogger and Wordpress

How To Add Digital Clock In Blogeer

নিচের কিছু সহজ ধাপ অনুসরণ করুন এবং আপনার ব্লগার সাইটে একটি ডিজিটাল ঘড়ি যোগ করুন।

কিভাবে ব্লগারে ডিজিটাল ঘড়ি যোগ করবেন

ধাপ 1: ব্লগারের ড্যাশবোর্ডে যান

ধাপ 2 : একটি নতুন পৃষ্ঠা/পোস্ট তৈরি করুন বা একটি পৃষ্ঠা/পোস্ট সম্পাদনা করুন

ধাপ 3: HTML ভিউতে স্যুইচ করুন 

ধাপ 4 : নিচের কোডটি কপি করে পেস্ট করুন

<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>

ধাপ 5: আপনার পৃষ্ঠা/পোস্ট সংরক্ষণ করুন 

 

আমাদের কাজের প্রশংসা করতে, কোডে ক্রেডিট রাখার কথা বিবেচনা করুন। আমরা কোনোভাবেই এই পোস্টটি পুনরায় লেখার অনুমতি দিই না। অনুমতি ছাড়া এই পোস্ট, কোড বা এই নিবন্ধ থেকে কোন অংশ অনুলিপি করবেন না, এটি কঠোরভাবে নিষিদ্ধ. করলে আইনগত ব্যবস্থা নেওয়া হবে।

Go to Link