Bài 16: Chuẩn Blogspot – Tạo menu khóa học + template trang bài học

🎯 Mục tiêu

Tạo 1 trang Menu khóa học để học viên bấm vào từng bài
Biết cách thay URL thật của mỗi bài trên Blogspot
Có Template bài học dùng lại: Mục tiêu → Lý thuyết → Ví dụ → Bài tập → Đáp án
Có JS hỗ trợ: tìm kiếm bài, copy link, đánh dấu “đã học” (localStorage)

📌 Phần A: Menu khóa học (copy dán vào 1 Trang / 1 Bài viết)

👉 Bạn tạo 1 Trang mới trong Blogspot (ví dụ: “Khóa học Web tĩnh”) rồi dán nguyên khối code dưới đây.
Sau đó chỉ cần thay LINK_BAI_01… thành link bài viết thật.


<div class="course">
  <h1 class="course-title">📚 Khóa học Web tĩnh (HTML • CSS • JavaScript)</h1>

  <div class="course-top">
    <input id="q" class="course-search" type="text" placeholder="Tìm bài học... (vd: flex, grid, form)">
    <button id="btnReset" class="btn dark">Hiện tất cả</button>
  </div>

  <div class="course-note">
    ✅ Click vào tiêu đề để mở bài • ⭐ Bấm “Đã học” để đánh dấu • 🔗 Copy link để chia sẻ
  </div>

  <div class="course-list" id="list">

    <!-- MẪU 1 ITEM: sửa href thành link thật của Blogspot -->
    <div class="item" data-key="bai 1 editor html css js co ban">
      <div class="left">
        <a class="title" href="LINK_BAI_01" target="_blank">Bài 1: Trình soạn thảo + cấu trúc HTML cơ bản</a>
        <div class="meta">HTML cơ bản • bố cục • ví dụ đơn giản</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-01">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_01">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 2 phan tu html co ban heading p div span">
      <div class="left">
        <a class="title" href="LINK_BAI_02" target="_blank">Bài 2: Các phần tử HTML cơ bản</a>
        <div class="meta">Heading • Paragraph • List • Div/Span</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-02">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_02">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 3 bang html table thead tbody tr td">
      <div class="left">
        <a class="title" href="LINK_BAI_03" target="_blank">Bài 3: Bảng trong HTML</a>
        <div class="meta">table • thead • tbody • tr/td • border</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-03">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_03">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 4 media link image audio video iframe">
      <div class="left">
        <a class="title" href="LINK_BAI_04" target="_blank">Bài 4: Link • Ảnh • Audio • Video</a>
        <div class="meta">a/img/audio/video/iframe</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-04">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_04">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 5 form input textarea select button">
      <div class="left">
        <a class="title" href="LINK_BAI_05" target="_blank">Bài 5: Form cơ bản</a>
        <div class="meta">input • textarea • select • validation</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-05">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_05">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 6 semantic header nav main section article aside footer">
      <div class="left">
        <a class="title" href="LINK_BAI_06" target="_blank">Bài 6: Semantic HTML + bố cục trang</a>
        <div class="meta">header/nav/main/section/article/aside/footer</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-06">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_06">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 7 css selector box model padding margin border">
      <div class="left">
        <a class="title" href="LINK_BAI_07" target="_blank">Bài 7: CSS Selector + Box Model</a>
        <div class="meta">tag/class/id • padding • border • margin</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-07">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_07">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 8 flexbox justify align gap wrap">
      <div class="left">
        <a class="title" href="LINK_BAI_08" target="_blank">Bài 8: CSS Flexbox</a>
        <div class="meta">display:flex • justify-content • align-items • wrap</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-08">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_08">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 9 grid repeat minmax responsive">
      <div class="left">
        <a class="title" href="LINK_BAI_09" target="_blank">Bài 9: CSS Grid + Responsive</a>
        <div class="meta">grid-template-columns • repeat • minmax</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-09">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_09">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 10 js bien kieu du lieu dom su kien">
      <div class="left">
        <a class="title" href="LINK_BAI_10" target="_blank">Bài 10: JavaScript cơ bản (DOM + Event)</a>
        <div class="meta">let/const • string/number • DOM • click/input</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-10">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_10">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 11 todo list project">
      <div class="left">
        <a class="title" href="LINK_BAI_11" target="_blank">Bài 11: Mini Project – To-do List</a>
        <div class="meta">Thêm/xóa/đánh dấu • DOM • event</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-11">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_11">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 12 quiz trac nghiem cham diem">
      <div class="left">
        <a class="title" href="LINK_BAI_12" target="_blank">Bài 12: Mini Project – Quiz trắc nghiệm</a>
        <div class="meta">radio • chấm điểm • tô đúng/sai</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-12">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_12">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 13 array object crud them xoa tim">
      <div class="left">
        <a class="title" href="LINK_BAI_13" target="_blank">Bài 13: Array + Object (CRUD mini)</a>
        <div class="meta">push/filter/map/splice • render list</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-13">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_13">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 14 fetch api json render">
      <div class="left">
        <a class="title" href="LINK_BAI_14" target="_blank">Bài 14: Fetch API</a>
        <div class="meta">fetch • async/await • loading/error</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-14">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_14">Copy link</button>
      </div>
    </div>

    <div class="item" data-key="bai 15 landing page one page scroll menu">
      <div class="left">
        <a class="title" href="LINK_BAI_15" target="_blank">Bài 15: Mini Project – Landing Page</a>
        <div class="meta">section • smooth scroll • back to top • menu active</div>
      </div>
      <div class="right">
        <button class="btn ghost mark" data-id="bai-15">Đã học</button>
        <button class="btn primary copy" data-url="LINK_BAI_15">Copy link</button>
      </div>
    </div>

  </div>

  <div class="course-footer" id="status">0/15 bài đã học</div>
</div>

<style>
  .course{max-width:980px;margin:16px auto;font-family:Arial;line-height:1.7}
  .course-title{text-align:center;margin:0 0 14px}
  .course-top{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:10px}
  .course-search{padding:10px 12px;border:1px solid #ddd;border-radius:12px;min-width:280px}
  .course-note{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:14px;padding:10px 12px;color:#111;margin-bottom:12px}
  .course-list{display:flex;flex-direction:column;gap:10px}
  .item{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid #e5e5e5;border-radius:16px;padding:12px}
  .left{min-width:240px;flex:1}
  .title{font-weight:800;color:#111;text-decoration:none}
  .title:hover{text-decoration:underline}
  .meta{color:#555;font-size:13px;margin-top:3px}
  .right{display:flex;gap:8px;flex-wrap:wrap}
  .btn{padding:9px 12px;border-radius:12px;border:0;cursor:pointer;font-weight:800}
  .btn.primary{background:#2563eb;color:#fff}
  .btn.dark{background:#111;color:#fff}
  .btn.ghost{background:#f3f4f6;border:1px solid #e5e7eb;color:#111}
  .done .title{color:#16a34a}
  .course-footer{margin-top:12px;text-align:center;color:#555}
</style>

<script>
  const q = document.getElementById("q");
  const list = document.getElementById("list");
  const status = document.getElementById("status");
  const btnReset = document.getElementById("btnReset");

  const KEY = "course_done_v1";

  function getDone(){
    try{ return JSON.parse(localStorage.getItem(KEY) || "[]"); }
    catch(e){ return []; }
  }
  function setDone(arr){
    localStorage.setItem(KEY, JSON.stringify(arr));
  }

  function updateCount(){
    const done = getDone();
    status.textContent = done.length + "/15 bài đã học";
  }

  function applyDoneUI(){
    const done = getDone();
    document.querySelectorAll(".mark").forEach(btn => {
      const id = btn.dataset.id;
      const item = btn.closest(".item");
      const isDone = done.includes(id);
      item.classList.toggle("done", isDone);
      btn.textContent = isDone ? "Đã học ✓" : "Đã học";
    });
    updateCount();
  }

  // Tìm kiếm
  q.addEventListener("input", () => {
    const key = q.value.trim().toLowerCase();
    document.querySelectorAll(".item").forEach(it => {
      const hay = (it.dataset.key || "").toLowerCase();
      it.style.display = (!key || hay.includes(key)) ? "flex" : "none";
    });
  });

  btnReset.addEventListener("click", () => {
    q.value = "";
    q.dispatchEvent(new Event("input"));
  });

  // Mark “đã học”
  document.querySelectorAll(".mark").forEach(btn => {
    btn.addEventListener("click", () => {
      const id = btn.dataset.id;
      const done = getDone();
      const idx = done.indexOf(id);
      if(idx === -1) done.push(id);
      else done.splice(idx, 1);
      setDone(done);
      applyDoneUI();
    });
  });

  // Copy link
  document.querySelectorAll(".copy").forEach(btn => {
    btn.addEventListener("click", async () => {
      const url = btn.dataset.url;
      try{
        await navigator.clipboard.writeText(url);
        btn.textContent = "Đã copy ✓";
        setTimeout(() => btn.textContent = "Copy link", 900);
      } catch(e){
        alert("Không copy được. Bạn hãy copy thủ công: " + url);
      }
    });
  });

  applyDoneUI();
</script>

✅ Cách thay link: mở từng bài viết Blogspot → copy URL → dán vào chỗ LINK_BAI_01, LINK_BAI_02...

🧩 Phần B: Template trang bài học (dùng lại cho Bài 17 trở đi)

👉 Mỗi bài giảng là 1 bài viết/1 trang trên Blogspot. Bạn chỉ cần copy template dưới đây, rồi thay nội dung từng phần.


<div class="lesson">
  <h1 class="lesson-title">[TÊN BÀI] – [CHỦ ĐỀ]</h1>

  <section class="lesson-box">
    <h2>🎯 Mục tiêu</h2>
    <ul>
      <li>...</li>
    </ul>
  </section>

  <section class="lesson-box">
    <h2>📘 Lý thuyết ngắn</h2>
    <p>...</p>
  </section>

  <section class="lesson-box">
    <h2>💻 Ví dụ</h2>
    <pre class="code"><code>
<!-- dán code ví dụ ở đây -->
    </code></pre>
  </section>

  <section class="lesson-box">
    <h2>✍️ Bài tập</h2>
    <ol>
      <li>...</li>
    </ol>
  </section>

  <section class="lesson-box">
    <h2>✅ Đáp án gợi ý</h2>
    <pre class="code"><code>
<!-- gợi ý đáp án ở đây -->
    </code></pre>
  </section>
</div>

<style>
.lesson{max-width:900px;margin:20px auto;font-family:Arial,Helvetica,sans-serif;line-height:1.7}
.lesson-title{text-align:center;margin-bottom:24px}
.lesson-box{border:1px solid #e5e5e5;border-radius:12px;padding:16px 18px;margin-bottom:18px;background:#fff}
.lesson-box h2{margin-top:0}
.code{background:#f8f9fb;color:#111;border:1px solid #ddd;border-radius:10px;padding:14px;overflow-x:auto;font-size:14px}
.code code{font-family:Consolas,monospace}
code{background:#eee;padding:2px 6px;border-radius:6px}
</style>

✍️ Bài tập

Tạo 1 Trang “Menu khóa học” và dán code phần A.
Tạo 1 Bài viết “Bài 1” và dán nội dung bài 1 (bạn đã có ở các bài trước).
Copy link bài 1 và thay vào LINK_BAI_01 trong menu.
Làm tương tự cho Bài 2 → Bài 15.

✅ Đáp án gợi ý (quy trình nhanh)

Blogspot → Pages (Trang) → New Page → dán Menu → Publish
Blogspot → Posts (Bài đăng) → New Post → dán Bài 1 → Publish
Mở bài 1 → copy URL → quay lại Menu → dán vào LINK_BAI_01 → Update

TRUNG TÂM HỌC TẬP ĐAM YI STUDY - DYG

Thứ Sáu, 23 tháng 1, 2026

Bài 16: Chuẩn Blogspot – Tạo menu khóa học + template trang bài học

🎯 Mục tiêu

📌 Phần A: Menu khóa học (copy dán vào 1 Trang / 1 Bài viết)

🧩 Phần B: Template trang bài học (dùng lại cho Bài 17 trở đi)

✍️ Bài tập

✅ Đáp án gợi ý (quy trình nhanh)

Không có nhận xét nào:

Đăng nhận xét

Bài đăng phổ biến

Nhận tin mới qua Email

💬 Bình luận

💬 Bình luận

📌 Danh sách bình luận

ĐỀ ÁN HS
Tin học
Toán học