How to Add IFSC Finder Tool to Blogger Website BY CHATBABA

How to Add IFSC Finder Tool to Blogger Website

Since Blogger does not support uploading JSON files, we need to include the branch data directly inside the code (instead of using a separate .json file). Here's how:

---

🧩 Updated Blogger-Friendly Code (Self-contained)

html
<!-- Paste this inside an HTML/JavaScript Gadget or Blogger Post (HTML View) -->
<div class="sbi-tool" style="max-width:600px;margin:auto;padding:20px;background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.1);font-family:sans-serif;">
  <h2 style="text-align:center;color:#1d4ed8;">🔍 SBI IFSC & MICR Code Finder</h2>
  <input type="text" id="branchInput" placeholder="Enter SBI Branch Name" style="width:100%;padding:10px;margin-top:15px;border:1px solid #ccc;border-radius:8px;" />
  <div id="result" style="margin-top:20px;display:none;text-align:center;">
    <p style="color:green;font-weight:bold;">✅ Branch Found</p>
    <p><strong>Branch:</strong> <span id="branchName"></span></p>
    <p><strong>IFSC:</strong> <span id="ifscCode" style="color:#1e40af;"></span></p>
    <p><strong>MICR:</strong> <span id="micrCode" style="color:#9333ea;"></span></p>
  </div>
  <p id="noResult" style="color:red;text-align:center;margin-top:10px;display:none;">❌ No matching branch found.</p>
</div>

<script>
  const branches = [
    { branch: "Allahabad Main", ifsc: "SBIN0000001", micr: "211002002" },
    { branch: "Civil Lines Allahabad", ifsc: "SBIN0000607", micr: "211002012" },
    { branch: "Kareli Allahabad", ifsc: "SBIN0008341", micr: "211002013" },
    { branch: "High Court Allahabad", ifsc: "SBIN0001529", micr: "211002018" },
    { branch: "Katra Allahabad", ifsc: "SBIN0000201", micr: "211002009" }
    // Add more branches here...
  ];

  document.getElementById("branchInput").addEventListener("input", function () {
    const input = this.value.toLowerCase();
    const result = branches.find(b => b.branch.toLowerCase().includes(input));
    const resultDiv = document.getElementById("result");
    const noResultDiv = document.getElementById("noResult");

    if (result) {
      document.getElementById("branchName").innerText = result.branch;
      document.getElementById("ifscCode").innerText = result.ifsc;
      document.getElementById("micrCode").innerText = result.micr;
      resultDiv.style.display = "block";
      noResultDiv.style.display = "none";
    } else {
      resultDiv.style.display = "none";
      noResultDiv.style.display = "block";
    }
  });
</script>

---

✅ How to Add This Code in Blogger

1. Go to your Blogger dashboard

2. Click Pages or Posts → New Post (or edit existing)

3. Switch to HTML View

4. Paste the entire code above

5. Publish the post or page

---

🧩 Want Full India Branch List?

• I can help you generate a large dataset of SBI branches in India.

• If you want to load from a file (for performance), we can host the .json on GitHub or Google Drive (public) and fetch from there.

---

Would you like:
✅ Full IFSC list for all India?
✅ Only Allahabad district?
✅ Or let users select Bank → State → District → Branch?

////////////////////////////////////////////////////

🔍 SBI IFSC & MICR Code Finder

✅ Branch Found

Branch:

IFSC:

MICR:

❌ No matching branch found.