ব্লগার ওয়েবসাইটে কিভাবে ট্যাব যোগ করবেন 

ব্লগার ওয়েবসাইটে কিভাবে ট্যাব যোগ করবেন 

How to Add Tabs in Blogger Website - এই আর্টিকেল , আপনি শিখবেন কিভাবে ব্লগার ওয়েবসাইটে ট্যাব যোগ করতে হয়। যখন আপনার একই বিষয়ের সাথে একাধিক বিভাগ বা তথ্য  থাকে, আপনি হয় একটির পর একটি প্রদর্শন করতে পারেন বা এটিকে একটি ট্যাবে ভেঙে দিতে পারেন। 

এইভাবে, আপনি আরও সংগঠিত পদ্ধতিতে আপনার তথ্য প্রদর্শন করতে পারেন এবং এটি ওয়েবসাইটে ব্যবহারকারীর অভিজ্ঞতা এবং ব্যস্ততা বাড়ায়।

এই ট্যাব ২ টি সাধারণ HTML, CSS এবং JavaScript কোড দিয়ে ডিজাইন করা হয়েছে, যাতে আপনি ব্লগার, ওয়ার্ডপ্রেস বা অন্যান্য প্ল্যাটফর্মে যে কোনো জায়গায় এটি ব্যবহার করতে পারেন। 

তো চলুন দেখি কিভাবে আপনি আপনার ব্লগার ব্লগ পোস্টে একটি সহজ ট্যাব বিভাগ যোগ করতে পারেন।

এটি করার জন্য, আপনার ব্লগার ড্যাশবোর্ডে লগ ইন করুন এবং HTML বিভাগে নিম্নলিখিত কোডটি পেস্ট করুন। নিশ্চিত করুন যে আপনি সমস্ত HTML, CSS এবং JS কোড কপি করেছেন।

কোড গুলো কপি করুনঃ 

HTML Code: 

---

HTML Code

<div class="tabs">
  <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
  <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>
</div>

<div id="tab1" class="tab-content active">
  <h2>Tab 1 Content</h2>
  <p>This is the content of Tab 1.</p>
  <p>Technology is not just a tool. It can give learners a voice that they may not have had before.</p>
  <img src="https://images.pexels.com/photos/356056/pexels-photo-356056.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image 1">
</div>

<div id="tab2" class="tab-content ">
  <h2>Tab 2 Content</h2>
  <p>This is the content of Tab 2.</p>
  <p>Technology is best when it brings people together.</p>
  <img src="https://images.pexels.com/photos/123335/pexels-photo-123335.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image 2">
</div>

<div id="tab3" class="tab-content">
  <h2>Tab 3 Content</h2>
  <p>This is the content of Tab 3.</p>
  <p>The true sign of intelligence is not knowledge but imagination.</p>
  <img src="https://images.pexels.com/photos/256381/pexels-photo-256381.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image 3">
</div>

---

CSS Code: 

---

CSS CODE

<style>
.tabs {
  display: flex;
}

.tablinks {
  background-color: #f2f2f2;
  color: black;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  margin: 2px;
  font-size: 16px;
  transition: background-color 0.3s;
  flex: auto; 
}

.tablinks:hover {
  background-color: #ddd;
}

.tab-content {
  display: none;
  padding: 20px;
  border-top: 2px solid #ccc;
  font-size: 19px;
}

 .active {
  display: block;
}
</style>

---

JavaScript  Code: 

---

JavaScript Code

<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

---

এখানে, আপনি লক্ষ্য করতে পারেন যে আমরা তিনটি ট্যাব বিভাগ যুক্ত করেছি, তিনটি বোতাম সহ এবং আমাদের কাছে তিনটি ট্যাব রয়েছে যার নিজস্ব অনন্য আইডি যেমন tab1, Tab2 এবং Tab3।

আপনি যদি আরও ট্যাব যোগ করতে চান তবে আপনাকে ট্যাব4 এর মতো একটি অনন্য আইডি সহ ডিভি বিভাগের সাথে নতুন বোতাম উপাদান তৈরি করতে হবে।

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

একবার আপনি তিনটি কোড যোগ করলে, পৃষ্ঠাটি প্রকাশ করুন এবং আপনি সফলভাবে আপনার ব্লগার ওয়েবসাইটে একটি ট্যাব বিভাগ যোগ করেছেন। আপনার যদি এখনও প্রশ্ন থাকে, মন্তব্য বিভাগে আমাকে জিজ্ঞাসা করতে বিনা দ্বিধায়।