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

Weebly এর জন্য অ্যানিমেটেড প্রগ্রেস পাই চার্ট উইজেট

0

প্রোগ্রেস বারগুলি একটি চিত্রগত দৃশ্যে দক্ষতা এবং অন্যান্য ডেটা প্রদর্শনের জন্য ব্যবহার করা হয় যাতে ব্যবহারকারীরা দ্রুত ডেটা বুঝতে পারে। আমাদের পূর্ববর্তী নিবন্ধে আমরা দেখেছি কিভাবে অনুভূমিক অগ্রগতি বার তৈরি করতে হয় এবং এই টিউটোরিয়ালে Weebly সাইটের জন্য অ্যানিমেটেড প্রগ্রেস পাই চার্ট উইজেট তৈরির উপায় পরীক্ষা করা যাক। অনেক উপলব্ধ বিকল্পের মধ্যে সহজ পাই চার্ট প্লাগইন পাই অগ্রগতি চার্ট তৈরির একটি সহজ উপায়। উইজেটটি নীচের মত দেখতে হবে এবং আপনি আপনার প্রয়োজন অনুযায়ী রং এবং বিষয়বস্তু কাস্টমাইজ করতে পারেন।

Weebly এর জন্য অ্যানিমেটেড প্রগ্রেস পাই চার্ট উইজেট

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

বিনামূল্যে jQuery সহজ পাই চার্ট প্লাগইন পরিবর্তন করে এবং এতে কাস্টম স্ক্রিপ্ট এবং CSS যোগ করে উইজেট তৈরি করা হয়েছে। এটি নিম্নলিখিত বৈশিষ্ট্য আছে:

  • সমস্ত ডিভাইসে সম্পূর্ণরূপে প্রতিক্রিয়াশীল
  • অগ্রগতির জন্য কোন শতাংশ নির্দিষ্ট করুন, যদি আপনি চান না যে % চিহ্নটি স্ক্রিপ্ট ফাইল থেকে সরিয়ে দিন।
  • বৃত্তের রং, অগ্রগতি অ্যানিমেশন এবং স্পাইকগুলি কাস্টমাইজ করুন।
  • যে কোনো স্থানে চার্ট রাখুন, উইজেট স্ক্রলে অ্যানিমেশন করবে ।

আপনার Weebly সাইটে উইজেট যুক্ত করতে সোর্স ফাইল ডাউনলোড করুন এবং নিচের ধাপে ধাপে নির্দেশ অনুসরণ করুন। জিপ ডাউনলোড নিম্নলিখিত ফাইল রয়েছে:

  • jquery.min.js – এটি একটি jQuery ফাইল যা শুধুমাত্র ডেমো কাজ করার জন্য প্রয়োজন। যেহেতু Weebly ডিফল্টভাবে jQuery লাইব্রেরি ব্যবহার করে, তাই এই ফাইলটি আপনার Weebly সাইটে প্রয়োজন নেই।
  • jquery.easypiechart.min.js – এটি বেস স্ক্রিপ্ট ফাইল এবং কাস্টম স্ক্রিপ্টটিও এই ফাইলের মধ্যে যোগ করা হয়েছে যাতে এটি একটি একক উৎস হিসেবে তৈরি করা যায়।
  • Progress Pie Chart.html – এটি একটি ডেমো HTML পৃষ্ঠায় CSS এবং HTML কোড রয়েছে।

উইবেলে উইজেট যুক্ত করা হচ্ছে

প্রথম অধীনে আপনার Weebly সাইটটিতে jquery.easypiechart.min.js ফাইল আপলোড করুন "থিম> HTML সম্পাদনা / সিএসএস > সম্পদ"। লিঙ্কের অধীনে প্রয়োজনীয় পৃষ্ঠায় স্ক্রিপ্ট "বিষয়শ্রেণীতে অন্তর্ভুক্ত নিবন্ধসমূহ> পৃষ্ঠা> উন্নত> নির্বাচন করুন শিরোলেখ কোড যোগ করে" নীচের কোড:

<script src="files/theme/jquery.easypiechart.min.js"></script>

CSS- এ তিনটি প্রধান উপাদান রয়েছে-ধারক, পৃথক পাই ব্লক এবং চার্ট-কন্টেইনার, .pr-chart-ctrl এবং .pr-chart ক্লাসের মাধ্যমে নিয়ন্ত্রিত চার্ট।

"পৃষ্ঠা> পৃষ্ঠা নির্বাচন করুন> এসইও সেটিংস> পাদলেখ কোড" বিভাগের অধীনে নিম্নলিখিত CSS (প্রগ্রেস পাই চার্ট.এইচটিএমএল সহ উপলব্ধ) যোগ করুন।

<style> .chart-container .pr-chart-ctrl { display:block; float:left; width:25%; } .chart-container .pr-chart-ctrl .pr-chart { display:block; position:relative; width:100%; margin:0 0 20px 0; text-align:center; margin-top: 30px; } .chart-container .pr-chart-ctrl .pr-chart canvas { display:block; margin:0 auto; padding:0; vertical-align:center; } .chart-container .pr-chart-ctrl .pr-chart i { position:absolute; top:0; left:0; width:100%; height:200px; line-height:200px; font-size:48px; font-style:normal; color: #808080; } .chart-container .pr-chart-ctrl p{ margin:0; padding:0; text-transform:uppercase; color:green; } @media screen and (max-width:500px) { .chart-container .pr-chart-ctrl { width:100%; margin-bottom:50px; } } @media screen and (min-width:501px) and (max-width:900px) { .chart-container .pr-chart-ctrl { width:50%; margin-bottom:50px; } } </style>

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

<ul class="chart-container"> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="25"><i></i></div> <p>WordPress Development</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="50"><i></i></div> <p>Weebly Development</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="75"><i></i></div> <p>Search Engine Optimization</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="100"><i></i></div> <p>Blog Consulting</p> </li> </ul>

উইজেট কাস্টমাইজ করা

Jquery.easypiechart.min.js ফাইলে পাই অগ্রগতি অ্যানিমেশনের আচরণ নিয়ন্ত্রণ করতে নিচের স্ক্রিপ্ট রয়েছে।

size: 200, barColor: '#F85656', trackColor: '#f1f1f1', scaleColor: 'violet', scaleLength: 5, lineWidth: 5, lineCap: 'square', onStep: function(from, to, percent) { $(this.el).find('i').text(Math.round(percent) + '%');

আপনি চার্ট ডিসপ্লে থেকে এটি মুছে ফেলতে % অপসারণ করতে পারেন এবং অবশিষ্ট ভেরিয়েবলের নিয়ন্ত্রণ নিম্নরূপ:

পরিবর্তনশীল

নিয়ন্ত্রণ

আকার পাই চার্ট বৃত্তের আকার নির্ধারণ করুন।
বার কালার অগ্রগতি অ্যানিমেশনের রঙ।
ট্র্যাক কালার পাই বৃত্তের রঙ।
স্কেল রঙ স্পাইকের রঙ।
স্কেল দৈর্ঘ্য স্পাইকের দৈর্ঘ্য।
লাইন প্রস্থ প্রগতি পাই চার্ট বৃত্তের প্রস্থ।
লাইনক্যাপ অগ্রগতি অ্যানিমেশন শেষ, সম্ভাব্য মান বৃত্তাকার, বর্গক্ষেত্র এবং বাট।

সম্পূর্ণ প্রস্থ প্যারাল্যাক্স পাই চার্ট

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

Weebly এর জন্য অ্যানিমেটেড প্রগ্রেস পাই চার্ট উইজেট

Weebly প্যারাল্যাক্স পাই চার্ট

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

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

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

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