Simple Digital Clock For Blogger/Website - আজকে আমি আপনাদের দেখাবো কিভাবে আপনি আপনার ব্লগার সাইটে একটি সুন্দর ডিজিটাল ঘড়ি যোগ করতে পারবেন। আপনি ইচ্ছা করলে এটি আপনার ব্লগের যেকোন উইডগেট (Widget) অথবা টেমপ্লেট এর ভিতরেও স্থাপন করতে পারবেন।

প্রথমে আপনি আপনার ব্লগার ড্যাশবোর্ডে ঢুকে Template > Edit HTML এ ক্লিক করুন। তারপর "Ctrl+F" চেপে </style> ট্যাগটি খুজে বের করুন এবং নিচের CSS কোডটুকু কপি করে </style> ট্যাগের আগে পেষ্ট করুন।

#realtime { font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; font-weight: 100; display: block; text-align: center; font-size: 12vw; padding: 4rem 0; } #realtime span { display: inline-block; font-family: Avenir Next, Nunito, sans-serif; font-weight: 100; font-size: 8vw; position: relative; top: -2vw; } @media all and (max-width: 600px) { #realtime { font-size: 4rem; padding: 2rem 0; }; } @media all and (max-width: 350px) { #realtime { font-size: 3rem; padding: 2rem 0; }; }

এখন টেমপ্লেটি সেভ করুন এবং Layout থেকে নতুন একটি HTML/Javascript Widget এড করুন এবং নিচের কোডটুকু কপি করে পেষ্ট করুন এবং সেভ করুন।

<time id="realtime"></time> <script type='text/javascript'> var currentTime = document.getElementById("realtime"); function zeropadder(n) { return (parseInt(n,10) < 10 ? '0' : '')+n; } function updateTime(){ var timeNow= new Date(), hh = timeNow.getHours(), mm = timeNow.getMinutes(), ss = timeNow.getSeconds(), formatAMPM = (hh >= 12?'PM':'AM'); hh = hh % 12 || 12; currentTime.innerHTML = hh + ":" + zeropadder(mm) + ":" + zeropadder(ss) + " " + formatAMPM; setTimeout(updateTime,1000); } updateTime(); </script>

ব্যস, কাজ শেষ। এবার উইডগেটটি সেভ করুন এবং পেজ রিফ্রেশ করে দেখুন নতুন একটি ডিজিটাল ঘড়ি যোগ হয়ে গেছে।

এতক্ষন সাথে থাকার জন্য ধন্যবাদ। যদি কোন সমস্যা হয় তাহলে টিউনমেন্ট এ জানাবেন অথবা আমি আছি ফেইসবুকে।