Create Responsive Table with Search Bar in Blogger

Hello friends, welcome to the Techly360 blog. And today in this article, we will know about Create Responsive Table with Search Bar in Blogger SCript. And in such a situation, many friends nowadays use Blogger or Blogspot to do blogging.

In such a situation, there is no facility to install any plugin for Blogger. So Blogger HTML Table has been started for this. In this way, new blogger Responsive Table are being created by coding.

Create Responsive Table with Search Bar in Blogger

Responsive Table with Search Bar Script

If you do blogging too. And use Blogger plateform for your blog. So you will know that in Blogger we do not get the feature to add Responsive Table. In such a situation, we have to create a responsible table using HTML, CSS and JavaScript through Coding.

In such a situation, now the Responsive Table with Search Bar Feature has also been launched. Then if we have to add it to our blogger then we will need a Responsive Table with Search Bar Script for Blogger.

NameCountry
Alfreds FutterkisteGermany
Berglunds snabbkopSweden
Island TradingUK
Koniglich EssenGermany

Also Read:


How to Add Responsive Table with Search Bar in Blogger

  • First of All Go To Blogger Dashboard
  • Now Go To Theme > Edit Theme & Search </Head>
  • Copy CSS Code Bellow & Paste Above </Head> Tag
<style>
* {
  box-sizing: border-box;
}

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

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

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

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>
  • Now Click on New Post
  • Copy HTML Code Bellow
  • Go to HTML View & Paste Script Here
<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>
    <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>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

<script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>
  • Now Publish Post
  • Open Post! #Boom Now You’ll See Table with Search Bar

Conclusion – So friends how did you like this Create Responsive Table with Search Bar in Blogger article. Be sure to comment below. And do share this article with your friends.

Create Responsive Table with Search Bar in Blogger

Leave a Comment

x
Share via
Copy link