বুধবার, ২০ মে, ২০১৫

ব্লগস্পট সাইটে যোগ করে নিন - Simple Digital Clock

ব্লগস্পট সাইটে যোগ করে নিন - Simple Digital Clock

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>

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

MS Design provides high quality premium and free blogger templates. Pick some hand made blogger widgets as well as. TemplateMark.com is unlimited source of free blogger templates

0 comments: