কিভাবে ব্লগার পোস্টে রিসপন্সসিপ ট্যাবিল এবং সার্চ বার লাগাবেন?

byRocky -March 08, 2021

0

হ্যালো বন্ধুরা, অনলাইন কাজে ব্লগে স্বাগতম আজ এই পোস্টে, আমরা ব্লগার পোস্টে রিজপন্সসিপ ট্যাবিল তৈরি সম্পর্কে জানব। এবং এমন পরিস্থিতিতে, আজকাল অনেক বন্ধু ব্লগিং করতে ব্লগার বা ব্লগস্পট ব্যবহার করে।

কিভাবে ব্লগার পোস্টে রিসপন্সসিপ ট্যাবিল এবং সার্চ বার লাগাবেন?

এমন পরিস্থিতিতে ব্লগারের জন্য কোনও প্লাগইন ইনস্টল করার কোনও সুবিধা নেই। সুতরাং এটির জন্য ব্লগার এইচটিএমএল দিয়ে তৈরি করা হয়েছে। এইভাবে, নতুন ব্লগার রিজপন্সসিপ ট্যাবিল কোডিংয়ের মাধ্যমে তৈরি করা হয়েছে।

রিজপন্সসিপ ট্যাবিল ও সার্চ বার স্ক্রিপ্ট কোডঃ

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

Name	Country
Alfreds Futterkiste	Germany
Berglunds snabbkop	Sweden
Island Trading	UK
Koniglich Essen	Germany
Laughing Bacchus Winecellars	Canada
Magazzini Alimentari Riuniti	Italy
North/South	UK
Paris specialites	France

এমন পরিস্থিতিতে এখন সার্চ বারের বৈশিষ্ট্যযুক্ত সার্চ বারও চালু করা হয়েছে। তারপরে যদি আমাদের এটি আমাদের ব্লগারে যুক্ত করতে হয় তবে আমাদের ব্লগারের জন্য সার্চ বার স্ক্রিপ্ট সহ একটি রিজপন্স টেবিলের প্রয়োজন হবে

রিজপন্সসিপ টেবিল এবং সার্চ বার কিভাবে এ্যড করেন?

সবার আগে ব্লগার ড্যাশবোর্ডে যান
এখন Theme এ যান> থিম Edit Html করুন এবং সার্চ করুন <Head> নিচে
এখানকার সিএসএস কোড CSS এবং উপরে পেস্ট করুন তারপর সেভ করুন।

<style>
* {
  box-sizing: border-box;}

#myInput {
  background-image: url('/css/searchicon.png');  background-position: 10px 10px;
  font-size: 16px;  background-repeat: no-repeat;
  width: 100%;
  margin-bottom: 12px;  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
}

#myTable {
  font-size: 18px;  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  background-color: #15ff0038;
  border-bottom: 1px solid #ddd;}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
}

</style>#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}

এখন নতুন পোস্টে ক্লিক করুন
এইচটিএমএল কোড যান
এইচটিএমএল ভিউ এবং স্ক্রিপ্ট স্ক্রিপ্ট এ যান

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
  </tr>    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  <tr>
  <tr>    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
    <td>Koniglich Essen</td>
    <td>Magazzini Alimentari Riuniti</td>    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Italy</td>
  </tr>
  <tr>
  var input, filter, table, tr, td, i, txtValue;    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

<script>
function myFunction() {
  for (i = 0; i < tr.length; i++) {  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
      } else {    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
</script>        tr[i].style.display = "none";
      }
    }       
  }
}

এখন পোস্ট পাবলিশ করুন

ওপেন পোস্ট! # বাছ! এখন সার্চ বারের সাথে টেবিল দেখুন ব্যবহৃত হয়।

আমাদের শেষ কথা

ও বন্ধুরা আপনি ব্লগার পোস্ট সার্চ বারের সাথে রিজপন্সসিপ টেবিল কীভাবে এ্যড করে তা পছন্দ করেছেন। নিচে কমেন্ট করতে ভুলবেন না। এবং এই পোস্ট আপনার বন্ধুদের সাথে শেয়ার করুন।

By commenting you acknowledge acceptance of Whatisloved.com-Terms and Conditions

Post a Comment