TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

Weebly সাইটের জন্য বিনামূল্যে কাউন্টডাউন টাইমার উইজেট

0

কাউন্টডাউন টাইমার উইজেট আপনাকে পণ্য প্রবর্তন, ঘটনা লঞ্চ ইত্যাদি উইজেট কোড "ভিতরে এমবেড করা যেতে পারে উদ্দেশ্যে একটি সহজ টাইমার প্রদর্শন করার অনুমতি দেবে এম্বেড কোড আপনি যদি" উপাদান অত: পর এটা অন্যান্য সামগ্রী সহ পৃষ্ঠার যেকোনো জায়গায় যোগ করা যাবে। এই নিবন্ধে আমরা জন্য বিনামূল্যে কাউন্টডাউন টাইমার উইজেট যোগ করার উপর ফোকাস করা এটি একটি পৃথক পৃষ্ঠাতে তারপর গৌণ মেনু ও ফুটার ছাড়া নির্মাণ সাইট অধীনে জুড়তে একটি নতুন পৃষ্ঠা বিন্যাস তৈরি এবং উইজেট কোড যোগ করতে চান। Weebly একটি পৃষ্ঠায় বিষয়বস্তু মধ্যে সাইট।

কাউন্টডাউন টাইমার উইজেটটি নীচের মত দেখাবে এবং আপনি আপনার সাইটের লেআউটের সাথে মানানসই রঙ পরিবর্তন করতে পারেন।

Weebly সাইটের জন্য বিনামূল্যে কাউন্টডাউন টাইমার উইজেট

এই উইজেট তৈরির জন্য স্ক্রিপ্ট ফাইল ডাউনলোড করুন

ধাপ 1 – স্ক্রিপ্টগুলি ডাউনলোড করুন এবং যুক্ত করুন

উইজেটটি স্ক্রিপ্ট init.js / countdown.js এর উপর ভিত্তি করে তৈরি করা হয়েছে এবং অতিরিক্ত CSS সহ একটি Weebly সাইটে অনুসারে পরিবর্তন করা হয়েছে । স্ক্রিপ্ট ফাইল ডাউনলোড করুন এবং আপনার Weebly সাইটের "থিম> HTML / CSS > সম্পদ সম্পাদনা করুন " বিভাগে আপলোড করুন । তারপরে স্ক্রিপ্ট ফাইলগুলিকে আপনার পৃষ্ঠার " ফুটার কোড " বিভাগের অধীনে লিঙ্ক করুন :

<script src="/files/theme/countdown.js" type="text/javascript"></script> <script src="/files/theme/init.js" type="text/javascript"></script>

আপনি উপরের ইউআরএলগুলিতে আপনার ওয়েবলি সাইটের নাম উপসর্গ করে পরম ফাইল পাথ ব্যবহার করতে পারেন।

ধাপ 2 – CSS যোগ করা

আপনার Weebly পৃষ্ঠার "হেডার কোড" বিভাগের অধীনে নিচের CSS যোগ করুন:

<style> .countdowntimer { background: rgb(92, 57, 57) none repeat scroll 0% 0%; padding:20px 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 25px; } .title #desc { margin: 25px 0 25px 0; text-align:center; color: lightyellow; font-size: 18px; } .title #head { font-size: 30px; color: #ffffff; } ul#countdown { text-align:center; } ul#countdown li { color:#fff; display: inline-block; margin-right:18px; width: 100px; height: 90px; text-align: center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #333333; -webkit-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3); -moz-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3); box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3); } ul#countdown li span { font-size: 42px; font-weight: bold; color: #fff; position: relative; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1); top: 10px; } ul#countdown li p.timeRefDays, ul#countdown li p.timeRefHours, ul#countdown li p.timeRefMinutes, ul#countdown li p.timeRefSeconds { text-shadow: 1px 1px 2px rgba(150, 150, 150, 1); margin-top: 15px; } </style>

ধাপ 3 – কাউন্টডাউন টাইমারের জন্য এইচটিএমএল

নীচের HTML কোডটি একটি "এম্বেড কোড" উপাদানটির ভিতরে যোগ করুন এবং অবস্থানটিকে কেন্দ্রে সারিবদ্ধ করুন। শিরোনাম এবং বর্ণনা আপনার নিজের সঙ্গে প্রতিস্থাপন করতে ভুলবেন না।

<div class="countdowntimer"> <div class="title"> <h3 id="head">This is a countdown timer widget</h3> <h5 id="desc">Remaining time for official product or website launch</h5> </div> <ul id="countdown"> <li> <p class="timeRefDays">days</p> <span class="days"></span> </li> <li> <p class="timeRefHours">hours</p> <span class="hours"></span> </li> <li> <p class="timeRefMinutes">minutes</p> <span class="minutes"></span> </li> <li> <p class="timeRefSeconds">seconds</p> <span class="seconds"></span> </li> </ul> </div>

ধাপ 4 – লক্ষ্য তারিখ নির্ধারণ

ডেমো উদ্দেশ্যে "init.js" স্ক্রিপ্ট ফাইলের মধ্যে টাইমারের টার্গেট তারিখ "31 ডিসেম্বর 2016" হিসাবে সেট করা আছে। আপনি আপনার প্রয়োজন অনুযায়ী তারিখ পরিবর্তন করতে পারেন, পরিবর্তনগুলি সংরক্ষণ করতে পারেন এবং কাউন্টডাউন টাইমারকে কার্যকরী দেখতে সাইটটি প্রকাশ করতে পারেন।

Weebly সাইটের জন্য বিনামূল্যে কাউন্টডাউন টাইমার উইজেট

কাউন্টডাউন টাইমারের টার্গেট তারিখ

সম্পূর্ণ প্রস্থ প্যারাল্যাক্স কাউন্টডাউন টাইমার উইজেট

এম্বেড কোড এলিমেন্ট ব্যবহার করে উপরোক্ত উইজেটটি যুক্ত করলে এটি দেখতে সহজ হবে। আপনি নীচের মত বিভাগ উপাদান ব্যবহার করে একটি সুন্দর প্যারাল্যাক্স কাউন্টডাউন টাইমার তৈরি করতে পারেন :

Weebly সাইটের জন্য বিনামূল্যে কাউন্টডাউন টাইমার উইজেট

প্যারাল্যাক্স ইমেজ ব্যাকগ্রাউন্ড সহ কাউন্টডাউন টাইমার উইজেট

প্যারাল্যাক্স ইমেজ ব্যাকগ্রাউন্ড সহ পাই চার্ট তৈরি করতে নিচের নির্দেশাবলী অনুসরণ করুন।

  • একটি সেকশন এলিমেন্ট টেনে আনুন। বিষয়বস্তু বিভাগের সেকশন এলিমেন্টে ক্লিক করুন এবং তারপরে "ব্যাকগ্রাউন্ড সম্পাদনা করুন" বিকল্পে ক্লিক করুন।
  • পটভূমি হিসাবে চিত্র নির্বাচন করুন এবং লম্বন হিসাবে স্ক্রোলিং প্রভাব সেট করুন। আপনি রঙের পটভূমিও সেট করতে পারেন এবং ভিডিও পটভূমি শুধুমাত্র প্রো ব্যবহারকারীদের জন্য উপলব্ধ।
  • এখন একটি এম্বেড কোড এলিমেন্ট টেনে এনে ড্রপ করুন এবং উপরের অংশে প্রদত্ত HTML কোডটি যোগ করুন।
  • আপনার সাইট প্রকাশ করুন এবং প্যারাল্যাক্স ইমেজ ব্যাকগ্রাউন্ড সহ অ্যানিমেটেড পাই চার্ট দেখুন।

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত