আপনার ওয়েব সাইটে যুক্ত করুন Clock Widget খুব সহজেই।
টিউনের শুরুতেই আমার প্রণাম / সালাম গ্রহন করবেন।
জাতি ভেদে নমস্কার / আদাব।
কেমন আছেন আপনারা ? আশা করি আজকেও আপনারা অনেক ভালো আছেন।
আমিও মহান পরমেশ্বরের কৃপায় ভালোই আছি।
আজ আমি কোন বিষয়ে শেয়ার করতে যাচ্ছি আশা করি আমার টিউনের টাইটেল দেখেই বুঝে গেছেন।
হ্যা , আজ আর আমি বেশি কথা বারাব না। সরাসরি আমাদের মূল টিউনে আসা যাক।
আপনারা হয়ত জানেন বা জানে না আমি যখন ছোট ছিলাম , আমি দেখেছি প্রত্যেক টা বাড়িতেই দেয়াল ঘড়ি ব্যবহার করত।
এখন কার মত তখন কার দিনে ডিজিটাল ঘড়ি এত ছিল না।
১ টাই ঘড়ি আর সেটাও এই দেওয়াল ঘড়ি।
 |
| Html , css and javascript Clock Widget |
এটি সুন্দর করে দেওয়ালে ঝুলিয়ে রাখা হত বাড়িতে , দোকানে , অফিস এবং আদালতে।
যদিও আমাদের দিনে দিনে প্রযুক্তি গত উন্নতি হয়েছে , কিন্তু আমরা পুরনো অতীত কে আমরা ভুলে থাকতে পারিনা।
আর সেই পুরনো দিন কে স্মরন করতেই আজ মনে হলো যদি সেই পুরনো অতিত দেওয়াল ঘড়ি ওয়েব সাইট এ লাগানো হয়।
কেমন হয় ?
আর সেই বিষয়ে একটু ঘাটাঘাটি করেই বানিয়ে ফেললাম সেই কাক্ষিত দেওয়াল ঘড়ি।
জানি না , আপনার বিষয় টা কেমন ভাবে দেখতেছেন।
কিন্তু আমার এই বিষয়ে যথেষ্ট ইন্টারেস্ট বা আগ্রহ থেকেই আজ লিখতে বসলাম।
আমি আজ যে Widget টি বানিয়েছি , সেটি আসলে ব্লগার কে অনুসরন করেই বানিয়েছি।
আপনারা যদি একটু Widget টির কোড মডিফাই করেন , আশা করি অন্যান্য সার্ভারেও এটি সফল ভাবে কাজ করবে।
যদি আপনি আপনার ব্লগার সাইট এ এটি ব্যবহার করতে চান তবে আমার টিউন টি মনো যোগ দিয়ে পড়ুন এবং যথাযথ ভাবে অনুরুপ করে আপনার কাজে এগিয়ে যান।
তো চলুন শুরু করি।
প্রথম ধাপঃ -
আপনার ব্লগারে লগিন করুন।
লগিন হয়ে গেলে Layout এ চলে যান।
আপনি যে স্থানে এই ঘড়ি Widget টি দেখাতে চান সেই স্থানে ১ টি html/javascript Widget যুক্ত করে নিন।
আর যারা html/javascript Widget যুক্ত করতে পারেন না তারা আমার স্কিন শট গুলো একটু ভালো করে অনুসরন করুন।
আমরা সাধারনত এটি Sidebar section এ এটি যুক্ত করে থাকি। তবে আপনার সুবিধা মত স্থানে আপনি এটি যুক্ত করতে পারেন।
আপনার Layout এ খুজে বের করুন কোথায় Sidebar আছে।
আর সেখানেই আপনি Add a Gadget লেখাটা পেয়ে যাবেন।
আপনি এই লেখা টির উপর ক্লিক করবেন।
 |
| Add A Gadget |
আপনি দেখতে পাবেন যে ১ টি ট্যাব ওপেন হয়েছে এবং ব্লগারের ডিফল্ট Widget গুলো দেখাচ্ছে।
আপনাকে এখানে থেকে html/javascript Widget এর উপর ক্লিক করতে হবে।
 |
| html/javascript Widget |
যদি আপনি ক্লিক করে থাকেন তবে আপনি দেখতে পাবেন html/javascript Widget এর টাইটেল বক্স এবং কনটেন্ট বক্স।
আপনি আপনার ইচ্ছা মত ঘড়ি html/javascript Widget টির টাইটেল দিতে পারেন।
কোন সমস্যা নেই।
 |
| Configure html/javascript |
ঠিক তার একটু নিচেই আরেকটি বক্স দেখতে পাবেন , তবে আগের বক্সের তুলোনায় এটি অনেক বড়।
আর এই বক্সে আমার দেওয়া কোড টি পেস্ট করে দিবেন।
[CODE]<!-- SMsudipBD.Com Clock Widget start -->
<style type='text/css'>
.clock {
width: 300px;
height: 300px;
margin: 8% auto 0;
border-radius: 50%;
border: 5px solid #ffffff;
background-color: #ff12cf;
background-image: -webkit-gradient(linear,left top,right top,from(#ff12cf),to(#4f37ac));
background-image: linear-gradient(to right,#de11d2,#583dc1);
position: relative;
box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,0.8);
}
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: #ccc;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
z-index: 10;
box-shadow: 0 2px 4px -1px black;
}
.dot:after {
content: 'SMsudipBD.Com';
width:130px;
position: absolute;
color: #ffffff;
font-size: 15px;
margin: 20px 0 0 -48px;
}
.hour-hand {
position: absolute;
z-index: 5;
width: 4px;
height: 65px;
background: #fff;
top: 79px;
transform-origin: 50% 72px;
left: 50%;
margin-left: -2px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.minute-hand {
position: absolute;
z-index: 6;
width: 4px;
height: 100px;
background: #fff;
top: 46px;
left: 50%;
margin-left: -2px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform-origin: 50% 105px;
}
.second-hand {
position: absolute;
z-index: 7;
width: 2px;
height: 120px;
background: gold;
top: 26px;
lefT: 50%;
margin-left: -1px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform-origin: 50% 125px;
}
span {
display: inline-block;
position: absolute;
color: #fff;
font-size: 22px;
font-family: 'Poiret One';
font-weight: 700;
z-index: 4;
}
.h12 {
top: 30px;
left: 50%;
margin-left: -9px;
}
.h3 {
top: 140px;
right: 30px;
}
.h6 {
bottom: 30px;
left: 50%;
margin-left: -5px;
}
.h9 {
left: 32px;
top: 140px;
}
.diallines {
position: absolute;
z-index: 2;
width: 2px;
height: 15px;
background: #fff;
left: 50%;
margin-left: -1px;
transform-origin: 50% 150px;
}
.diallines:nth-of-type(5n) {
position: absolute;
z-index: 2;
width: 4px;
height: 25px;
background: #fff;
left: 50%;
margin-left: -1px;
transform-origin: 50% 150px;
}
.info {
position: absolute;
width: 120px;
height: 20px;
border-radius: 7px;
background: #ccc;
text-align: center;
line-height: 20px;
color: #000;
font-size: 11px;
top: 200px;
left: 50%;
margin-left: -60px;
font-family: "Poiret One";
font-weight: 700;
z-index: 3;
letter-spacing: 3px;
margin-left: -60px;
left: 50%;
}
.date {
top: 80px;
}
.day {
top: 200px;
}
</style>
<div class="clock">
<div>
<div class="info date"></div>
<div class="info day"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h3">3</span>
<span class="h6">6</span>
<span class="h9">9</span>
<span class="h12">12</span>
</div>
<div class="diallines"></div>
</div>
<!-- js call date time js (Start) -->
<script>
var dialLines = document.getElementsByClassName('diallines');
var clockEl = document.getElementsByClassName('clock')[0];
for (var i = 1; i < 60; i++) {
clockEl.innerHTML += "<div class='diallines'></div>";
dialLines[i].style.transform = "rotate(" + 6 * i + "deg)";
}
function clock() {
var weekday = new Array(7),
d = new Date(),
h = d.getHours(),
m = d.getMinutes(),
s = d.getSeconds(),
date = d.getDate(),
month = d.getMonth() + 1,
year = d.getFullYear(),
hDeg = h * 30 + m * (360/720),
mDeg = m * 6 + s * (360/3600),
sDeg = s * 6,
hEl = document.querySelector('.hour-hand'),
mEl = document.querySelector('.minute-hand'),
sEl = document.querySelector('.second-hand'),
dateEl = document.querySelector('.date'),
dayEl = document.querySelector('.day');
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var day = weekday[d.getDay()];
if(month < 9) {
month = "0" + month;
}
hEl.style.transform = "rotate("+hDeg+"deg)";
mEl.style.transform = "rotate("+mDeg+"deg)";
sEl.style.transform = "rotate("+sDeg+"deg)";
dateEl.innerHTML = date+"/"+month+"/"+year;
dayEl.innerHTML = day;
}
setInterval("clock()", 100);
</script>
<!-- js call date time js (End) -->
<!-- SMsudipBD.Com Clock Widget End -->[/CODE]
যদি আপনি ঠিক ঠাক ভাবে কোড টি কপি করে পেস্ট অরে থাকেন , তবে আবার আপনি html/javascript Widget টি নিচের Save এ ক্লিক করে html/javascript Widget
টি Save করুন।
শেষ ধাপঃ -
এবার আপনি আপনার সাইট টি ভিজিট করে দেখুন। যদি আপনি কাজ গুলো সঠিক ভাবে করে থাকেন তবে দেওয়াল ঘড়ি দেখতে পারবেন।
যদি কাজ না হয় তবে পুনরায় আবার চেষ্টা করবেন।
যদি এবারও আপনি সফল না হয়ে থাকেন , তবে নিচের কমেন্ট বক্সে কমেন্ট করে জানাতে ভুলবেন না।
পরিশেষে বলতে চাই , এই টিউন টি করতে গিয়ে যদি আমার কোন রুপ ভুল ত্রুটি হয়ে থাকে তবে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন।
কেননা টাইপিং মিস্টেক করে ফেলতে পারি।
সকলের সুসাস্থ কামনা করছি। উজ্জ্বল ও সুন্দর হোক আগামির পথ চলা।
এত ক্ষন সাথে থাকার জন্য আপনাকে অসংখ্য ধন্যবাদ।
ক্রেডিট বাইঃ - SMsudipBD.Com
আপনার সাথে আমি ব্যাক্তিগত কথা বলতে চাই। থিম বানিয়ে নিবো।
ReplyDeleteSir,
DeleteContact Me Facebook.