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

কিভাবে Weebly সাইটে সংগঠন চার্ট যোগ করবেন?

1

Weebly সাইটে একটি বৃক্ষ বিন্যাসে কাঠামোগত সামগ্রী প্রদর্শন করার জন্য আপনার অনেক প্রয়োজনীয়তা থাকতে পারে। এটি একটি সংস্থার চার্ট বা আপনার সাইটের সাইটম্যাপ হতে পারে যা আপনি ব্যবহারকারীদের কাছে প্রদর্শন করতে চান। যদিও Weebly কোনো ডিফল্ট অ্যাপ বা উপাদান অফার করে না, আপনি সহজেই Weebly সাইটে প্রতিষ্ঠানের চার্ট যোগ করতে পারেন।

সম্পর্কিত: কিভাবে ওয়ার্ডপ্রেস সাইটে চার্ট যুক্ত করবেন?

Weebly এ সংগঠন চার্ট যোগ করুন

Weebly সাইটে প্রতিষ্ঠানের চার্ট যোগ করার দুটি উপায় আছে :

  1. কাস্টম CSS ব্যবহার করে
  2. গুগল চার্ট এম্বেড করুন

আমরা উভয় বিকল্প বিস্তারিতভাবে ব্যাখ্যা করব।

1 CSS অর্গানাইজেশন চার্ট

নীচে একটি সাধারণ সংগঠন চার্টের উদাহরণ দেওয়া হল যা আপনি একটি Weebly সাইটে CSS / HTML কোড যুক্ত করতে পারেন।

কিভাবে Weebly সাইটে সংগঠন চার্ট যোগ করবেন?

CSS অর্গানাইজেশন চার্ট

CSS অর্গানাইজেশন চার্টের বৈশিষ্ট্য

চার্টের কিছু বৈশিষ্ট্য হল:

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

কিভাবে ওয়েবেলি সাইটে CSS অর্গানাইজেশন চার্ট ট্রি যুক্ত করবেন?

এই প্রক্রিয়ায় তিনটি ধাপ রয়েছে:

  • আপনার চার্টের গঠন এবং বিষয়বস্তু প্রস্তুত করা হচ্ছে।
  • CSS কোড যোগ করা (thecodeplayer.com থেকে বেস কোড রেফারেন্স)
  • HTML কোড যোগ করা

ধাপ 1 – চার্ট বিষয়বস্তু প্রস্তুত করা

প্রথম ধাপ হল আপনার জন্য কত স্তরের অনুক্রমের প্রয়োজন সেই সাথে কাঠামো প্রস্তুত করা। আপনার ফন্টের আকার, আপনার চার্টের জন্য প্রয়োজনীয় রং সম্পর্কেও ধারণা থাকতে হবে।

ধাপ 2 – CSS কোড

আপনি যদি আপনার সাইটের এক বা কয়েকটি পৃষ্ঠায় চার্ট যোগ করতে চান তাহলে "পৃষ্ঠা> পৃষ্ঠা নির্বাচন করুন> এসইও সেটিংস> হেডার কোড" এর অধীনে নীচের সিএসএস কোড যোগ করুন।

কিভাবে Weebly সাইটে সংগঠন চার্ট যোগ করবেন?

পৃষ্ঠায় হেডার কোড যোগ করুন

আপনি যদি অনেক পৃষ্ঠায় চার্ট যোগ করতে চান তাহলে "থিম> CSS / HTML সম্পাদনা করুন> সম্পদ> main.less" এর অধীনে CSS কোড যুক্ত করার সুপারিশ করা হয়। Weebly সাইটে সোর্স CSS কিভাবে সম্পাদনা করবেন সে সম্পর্কে আরও জানুন

<style type="text/css"> .org-chart ul { padding-top: 20px; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .org-chart li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .org-chart li::before, .org-chart li::after{ content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #ccc; width: 50%; height: 20px; } .org-chart li::after{ right: auto; left: 50%; border-left: 1px solid #ccc; } .org-chart li:only-child::after, .org-chart li:only-child::before { display: none; } .org-chart li:only-child{ padding-top: 0;} .org-chart li:first-child::before, .org-chart li:last-child::after{ border: 0 none; } .org-chart li:last-child::before{ border-right: 1px solid #ccc; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; } .org-chart li:first-child::after{ border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; } .org-chart ul ul::before{ content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #ccc; width: 0; height: 20px; } .org-chart li a{ border: 1px solid #ccc; padding: 5px 10px; text-decoration: none; color: #666; font-family: arial, verdana, tahoma; font-size: 11px; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .org-chart li a:hover, .org-chart li a:hover+ul li a { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; } .org-chart li a:hover+ul li::after, .org-chart li a:hover+ul li::before, .org-chart li a:hover+ul::before, .org-chart li a:hover+ul ul::before{ border-color: #808080; } </style>

ধাপ 3 – HTML যোগ করা

যে পৃষ্ঠায় আপনি সংস্থার চার্ট যুক্ত করতে চান সেখানে একটি " এম্বেড কোড " উপাদান টেনে আনুন এবং " এম্বেড কোড " উপাদানটির নীচের কোডটি যুক্ত করুন।

<div class="org-chart"> <ul><li> <a href="#">General Manager</a> <ul><li> <a href="#">Manager</a> <ul><li> <a href="#">Executive</a> </li></ul></li><li> <a href="#">Manager</a> <ul><li> <a href="#">Executive</a> </li><li> <a href="#">Executive</a> <ul><li> <a href="#">Employee</a> </li><li> <a href="#">Employee</a> </li><li> <a href="#">Employee</a> </li></ul></li><li> <a href="#">Executive</a> </li></ul><li> <a href="#">Manager</a> <ul><li> <a href="#">Executive</a> </li></li></ul></li></ul> </div>

চার্টটি উইবলি এডিটরে নাও দেখানো হতে পারে, আপনার সাইটটি প্রকাশ করুন এবং তারপরে উপরের উদাহরণে দেখানো চার্টটি দেখতে হবে। আপনি যে URL গুলি লিঙ্ক করতে চান তার সাথে # প্রতিস্থাপন করুন অথবা যদি আপনি লিঙ্ক করতে না চান তবে নোঙ্গর ট্যাগগুলি সরান। আপনি আরও মাত্রা যোগ করে, রঙ, ফন্ট ইত্যাদি পরিবর্তন করে আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন।

সতর্কতা: চার্টের প্রস্থের কারণে, এটি মোবাইল ডিভাইসে উপযুক্ত নাও হতে পারে। আপনি মোবাইল ডিভাইসে চার্ট লুকিয়ে রাখতে পারেন এবং তার পরিবর্তে তালিকাভুক্ত পাঠ্য বা একটি ছবি দেখাতে পারেন।

2 গুগল অর্গানাইজেশন চার্ট যোগ করা

আপনার Weebly সাইটে প্রতিষ্ঠানের চার্ট যোগ করার জন্য গুগল চার্ট কোড এম্বেড করা অন্য সহজ উপায়। আপনি যেকোনো মাত্রা যোগ করতে পারেন এবং পৃথক শিরোনামে লিঙ্ক যোগ করতে পারেন। নীচে গুগল সাংগঠনিক চার্ট কেমন হবে।

কিভাবে Weebly সাইটে সংগঠন চার্ট যোগ করবেন?

গুগল অর্গানাইজেশন চার্ট

গুগল চার্ট পৃষ্ঠায় যান এবং সংস্থার চার্টের জন্য কোডটি অনুলিপি করুন। Weebly সাইটে এম্বেড করার প্রক্রিয়াটি দুটি ধাপে সম্পন্ন করা প্রয়োজন – স্ক্রিপ্ট যোগ করা এবং HTML যোগ করা।

চার্টের জন্য স্ক্রিপ্ট যোগ করুন

নীচের স্ক্রিপ্ট কোডটি অনুলিপি করুন যা গুগল অর্গানাইজেশন চার্ট পৃষ্ঠাতেও উপলব্ধ।

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages:["orgchart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Manager'); data.addColumn('string', 'ToolTip'); // For each orgchart box, provide the name, manager, and tooltip to show. data.addRows([ [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'], [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]); // Create the chart. var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); // Draw the chart, setting the allowHtml option to true for the tooltips. chart.draw(data, {'allowHtml':true}); } </script>

আপনার Weebly পৃষ্ঠার পাদলেখ বিভাগের অধীনে স্ক্রিপ্ট কোড পেস্ট করতে হবে।

  • Weebly অ্যাকাউন্টে লগইন করুন এবং যে সাইটটিতে আপনি চার্ট যুক্ত করতে চান সেটি সম্পাদনা করুন।
  • যখন আপনি উইবলি এডিটরে থাকবেন, "পৃষ্ঠাগুলি" বিভাগে যান এবং পৃষ্ঠাটি নির্বাচন করুন।
  • "SEO সেটিংস" অপশনে ক্লিক করুন এবং "ফুটার কোড" বিভাগে কোডটি পেস্ট করুন।

HTML কোড যোগ করা

"এম্বেড কোড" উপাদান ব্যবহার করে পৃষ্ঠায় নীচের HTML কোড যোগ করুন।

<div id="chart_div"></div>

চার্ট কার্যকরী দেখতে আপনার সাইট প্রকাশ করুন।

দ্রষ্টব্য: কিভাবে চার্ট কাস্টমাইজ করতে হয় তা বুঝতে গুগল চার্ট পৃষ্ঠায় নির্দেশাবলী অনুসরণ করুন। মূলত প্রতিটি বাক্সে নাম, ম্যানেজার এবং টুলটিপ থাকে যা হোভারে প্রদর্শিত হয় এবং আপনি ব্যবহার করে শৈলী এবং HTML ট্যাগ যুক্ত করতে পারেন

বাক্সে যে কোন উপাদান।

চূড়ান্ত শব্দ

আমরা আশা করি উপরের পদ্ধতিগুলির মধ্যে একটি আপনার সাইটের লেআউটের সাথে মানানসই এবং আপনাকে সংগঠন চার্ট যুক্ত করতে সাহায্য করবে। আপনার প্রয়োজন অনুসারে রঙ এবং অন্যান্য পরামিতিগুলি সামঞ্জস্য করতে ভুলবেন না।

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

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