1919Live
Mode Gelap
Artikel teks besar

Halaman Khusus Video Untuk Blogger

Berikut ini adalah format halaman khusus video untuk warkasa1919.com yang SEO friendly, responsif di semua perangkat, cepat, ringan, dan canggih. Halaman ini bisa dipasang di Blogger atau WordPress.

Kode HTML + CSS + sedikit JavaScript yang bisa digunakan:

<!-- 🌐 Halaman Khusus Video Warkasa1919.com -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Video Pilihan - Warkasa1919</title>
  <meta name="description" content="Kumpulan video menarik pilihan Warkasa1919 yang informatif, edukatif, dan menghibur.">
  <meta name="keywords" content="video warkasa1919, video edukasi, video inspirasi, kumpulan video">
  <link rel="canonical" href="https://www.warkasa1919.com/p/video.html"/>

  <!-- ✅ SEO Schema Video -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "VideoGallery",
    "name": "Kumpulan Video Pilihan Warkasa1919",
    "url": "https://www.warkasa1919.com/p/video.html",
    "description": "Kumpulan video pilihan dari Warkasa1919 yang menarik, edukatif, dan inspiratif."
  }
  </script>

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0; padding: 0;
      background: #f5f6fa;
      color: #333;
    }
    header {
      background: #0056b3;
      color: white;
      text-align: center;
      padding: 1.2rem;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    header h1 {
      margin: 0;
      font-size: 1.6rem;
    }
    .video-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1rem;
      padding: 1rem;
    }
    .video-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 3px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }
    .video-card:hover {
      transform: translateY(-6px);
    }
    .video-card iframe {
      width: 100%;
      height: 180px;
      border: none;
    }
    .video-info {
      padding: 0.8rem;
    }
    .video-info h3 {
      font-size: 1rem;
      margin: 0 0 6px;
    }
    .video-info p {
      font-size: 0.85rem;
      color: #666;
    }
    footer {
      text-align: center;
      padding: 1rem;
      background: #222;
      color: white;
      margin-top: 2rem;
    }
    /* Responsif */
    @media (min-width:768px) {
      .video-card iframe { height: 220px; }
    }
    @media (min-width:1024px) {
      .video-card iframe { height: 260px; }
    }
  </style>
</head>
<body>

  <header>
    <h1>🎥 Video Pilihan Warkasa1919</h1>
    <p>Informasi, Edukasi, dan Hiburan Terbaik</p>
  </header>

  <main>
    <section class="video-container">

      <!-- ✅ Contoh Video 1 -->
      <article class="video-card">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID1" 
          title="Judul Video 1" allowfullscreen loading="lazy"></iframe>
        <div class="video-info">
          <h3>Judul Video 1</h3>
          <p>Deskripsi singkat video agar SEO lebih kuat dan pembaca paham isi video.</p>
        </div>
      </article>

      <!-- ✅ Contoh Video 2 -->
      <article class="video-card">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID2" 
          title="Judul Video 2" allowfullscreen loading="lazy"></iframe>
        <div class="video-info">
          <h3>Judul Video 2</h3>
          <p>Deskripsi singkat video dengan kata kunci terkait.</p>
        </div>
      </article>

      <!-- Tambahkan video lain dengan pola yang sama -->
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Warkasa1919.com | Ruang berbagi informasi</p>
  </footer>

</body>
</html>

✨ Fitur Canggih:

  1. SEO Ready: pakai meta, schema.org, deskripsi & keyword.

  2. Responsif: grid otomatis menyesuaikan layar HP, tablet, laptop.

  3. Cepat & Ringan: iframe pakai loading="lazy" supaya tidak memberatkan.

  4. Canggih: desain modern, sticky header, animasi hover.

  5. Mudah Tambah Video: tinggal copy-paste <article class="video-card"> ... </article>.

⚡ Versi Blogger Page (pakai tag <data:post.body/>)


halaman khusus video ini ingin dipasang di Blogger (sebagai halaman statis), saya sudah siapkan versi yang langsung bisa dipasang di menu Laman BloggerHalaman Baru → pilih mode HTML lalu tempel kode berikut 👇

<!-- 🌐 Halaman Khusus Video Warkasa1919.com -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Video Pilihan - Warkasa1919</title>
  <meta name="description" content="Kumpulan video menarik pilihan Warkasa1919 yang informatif, edukatif, dan menghibur.">
  <meta name="keywords" content="video warkasa1919, video edukasi, video inspirasi, kumpulan video">
  <link rel="canonical" href="https://www.warkasa1919.com/p/video.html"/>

  <!-- ✅ SEO Schema Video -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "VideoGallery",
    "name": "Kumpulan Video Pilihan Warkasa1919",
    "url": "https://www.warkasa1919.com/p/video.html",
    "description": "Kumpulan video pilihan dari Warkasa1919 yang menarik, edukatif, dan inspiratif."
  }
  </script>

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0; padding: 0;
      background: #f5f6fa;
      color: #333;
    }
    header {
      background: #0056b3;
      color: white;
      text-align: center;
      padding: 1.2rem;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    header h1 {
      margin: 0;
      font-size: 1.6rem;
    }
    .video-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1rem;
      padding: 1rem;
    }
    .video-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 3px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }
    .video-card:hover {
      transform: translateY(-6px);
    }
    .video-card iframe {
      width: 100%;
      height: 180px;
      border: none;
    }
    .video-info {
      padding: 0.8rem;
    }
    .video-info h3 {
      font-size: 1rem;
      margin: 0 0 6px;
    }
    .video-info p {
      font-size: 0.85rem;
      color: #666;
    }
    footer {
      text-align: center;
      padding: 1rem;
      background: #222;
      color: white;
      margin-top: 2rem;
    }
    /* Responsif */
    @media (min-width:768px) {
      .video-card iframe { height: 220px; }
    }
    @media (min-width:1024px) {
      .video-card iframe { height: 260px; }
    }
  </style>
</head>
<body>

  <header>
    <h1>🎥 Video Pilihan Warkasa1919</h1>
    <p>Informasi, Edukasi, dan Hiburan Terbaik</p>
  </header>

  <main>
    <section class="video-container">

      <!-- ✅ Contoh Video 1 -->
      <article class="video-card">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID1" 
          title="Judul Video 1" allowfullscreen loading="lazy"></iframe>
        <div class="video-info">
          <h3>Judul Video 1</h3>
          <p>Deskripsi singkat video agar SEO lebih kuat dan pembaca paham isi video.</p>
        </div>
      </article>

      <!-- ✅ Contoh Video 2 -->
      <article class="video-card">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID2" 
          title="Judul Video 2" allowfullscreen loading="lazy"></iframe>
        <div class="video-info">
          <h3>Judul Video 2</h3>
          <p>Deskripsi singkat video dengan kata kunci terkait.</p>
        </div>
      </article>

      <!-- Tambahkan video lain dengan pola yang sama -->
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Warkasa1919.com | Ruang berbagi informasi</p>
  </footer>

</body>
</html>

🔧 Cara pasang di Blogger:

  1. Masuk ke Blogger → Halaman → Halaman Baru.

  2. Ubah mode editor ke HTML.

  3. Tempelkan kode di atas.

  4. Ganti VIDEO_ID1 dan VIDEO_ID2 dengan ID YouTube dari video kamu.
    (Contoh: https://www.youtube.com/watch?v=abcd1234 → ID-nya abcd1234).

  5. Publikasikan → maka otomatis jadi halaman video di https://www.warkasa1919.com/p/video.html.


Berikut ini fitur filter/kategori video biar halaman lebih interaktif, pengunjung bisa memilih kategori seperti Edukasi, Inspirasi, Hiburan tanpa reload halaman.
Filter ini dibuat dengan JavaScript ringan agar tetap SEO-friendly, cepat, dan responsif.

Berikut kode lengkap versi Blogger (tinggal tempel di Halaman Baru → mode HTML):

<!-- 🌐 Halaman Khusus Video Warkasa1919.com dengan Filter -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Video Pilihan - Warkasa1919</title>
  <meta name="description" content="Kumpulan video menarik pilihan Warkasa1919 yang informatif, edukatif, dan menghibur.">
  <meta name="keywords" content="video warkasa1919, video edukasi, video inspirasi, video hiburan, kumpulan video">
  <link rel="canonical" href="https://www.warkasa1919.com/p/video.html"/>

  <!-- ✅ SEO Schema Video -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "VideoGallery",
    "name": "Kumpulan Video Pilihan Warkasa1919",
    "url": "https://www.warkasa1919.com/p/video.html",
    "description": "Kumpulan video pilihan dari Warkasa1919 yang menarik, edukatif, dan inspiratif."
  }
  </script>

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0; padding: 0;
      background: #f5f6fa;
      color: #333;
    }
    header {
      background: #0056b3;
      color: white;
      text-align: center;
      padding: 1.2rem;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    header h1 {
      margin: 0;
      font-size: 1.6rem;
    }
    /* Tombol filter */
    .filter-buttons {
      text-align: center;
      margin: 1rem;
    }
    .filter-buttons button {
      background: #0056b3;
      color: white;
      border: none;
      padding: 0.6rem 1.2rem;
      margin: 0.3rem;
      border-radius: 25px;
      cursor: pointer;
      transition: background 0.3s;
    }
    .filter-buttons button:hover,
    .filter-buttons button.active {
      background: #ff9800;
    }
    .video-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1rem;
      padding: 1rem;
    }
    .video-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 3px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }
    .video-card:hover {
      transform: translateY(-6px);
    }
    .video-card iframe {
      width: 100%;
      height: 180px;
      border: none;
    }
    .video-info {
      padding: 0.8rem;
    }
    .video-info h3 {
      font-size: 1rem;
      margin: 0 0 6px;
    }
    .video-info p {
      font-size: 0.85rem;
      color: #666;
    }
    footer {
      text-align: center;
      padding: 1rem;
      background: #222;
      color: white;
      margin-top: 2rem;
    }
    /* Responsif */
    @media (min-width:768px) {
      .video-card iframe { height: 220px; }
    }
    @media (min-width:1024px) {
      .video-card iframe { height: 260px; }
    }
  </style>
</head>
<body>

  <header>
    <h1>🎥 Video Pilihan Warkasa1919</h1>
    <p>Informasi, Edukasi, dan Hiburan Terbaik</p>
  </header>

  <!-- ✅ Tombol filter -->
  <div class="filter-buttons">
    <button class="active" onclick="filterVideos('all')">Semua</button>
    <button onclick="filterVideos('edukasi')">Edukasi</button>
    <button onclick="filterVideos('inspirasi')">Inspirasi</button>
    <button onclick="filterVideos('hiburan')">Hiburan</button>
  </div>

  <main>
    <section class="video-container">

      <!-- ✅ Contoh Video Edukasi -->
      <article class="video-card" data-category="edukasi">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID1" 
          title="Judul Video Edukasi" allowfullscreen loading="lazy"></iframe>
        <div class="video-info">
          <h3>Judul Video Edukasi</h3>
          <p>Deskripsi singkat video edukasi untuk pembelajaran dan wawasan baru.</p>
        </div>
      </article>

      <!-- ✅ Contoh Video Inspirasi -->
      <article class="video-card" data-category="inspirasi">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID2" 
          title="Judul Video Inspirasi" allowfullscreen loading="lazy"></iframe>
        <div class="video-info">
          <h3>Judul Video Inspirasi</h3>
          <p>Deskripsi singkat video motivasi & inspirasi hidup.</p>
        </div>
      </article>

      <!-- ✅ Contoh Video Hiburan -->
      <article class="video-card" data-category="hiburan">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID3" 
          title="Judul Video Hiburan" allowfullscreen loading="lazy"></iframe>
        <div class="video-info">
          <h3>Judul Video Hiburan</h3>
          <p>Deskripsi singkat video hiburan ringan dan menyenangkan.</p>
        </div>
      </article>

    </section>
  </main>

  <footer>
    <p>&copy; 2025 Warkasa1919.com | Ruang berbagi informasi</p>
  </footer>

  <script>
    function filterVideos(category) {
      let videos = document.querySelectorAll(".video-card");
      let buttons = document.querySelectorAll(".filter-buttons button");

      // toggle tombol aktif
      buttons.forEach(btn => btn.classList.remove("active"));
      event.target.classList.add("active");

      // filter video
      videos.forEach(video => {
        if (category === "all" || video.dataset.category === category) {
          video.style.display = "block";
        } else {
          video.style.display = "none";
        }
      });
    }
  </script>

</body>
</html>

🚀 Fitur tambahan:

  • Filter kategori: tombol Semua | Edukasi | Inspirasi | Hiburan.

  • Interaktif: klik kategori, video otomatis difilter tanpa reload.

  • SEO tetap terjaga: video tetap ada di halaman (bukan AJAX), hanya disembunyikan dengan JS.



Fitur search bar biar pengunjung bisa mencari video berdasarkan judul atau deskripsi 🔎.
Filter kategori tetap jalan, jadi pengunjung bisa kombinasi kategori + pencarian.

Berikut kode lengkap untuk halaman video interaktif dengan filter & pencarian di Blogger:

<!-- 🌐 Halaman Video Warkasa1919.com dengan Filter + Search -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Video Pilihan - Warkasa1919</title>
  <meta name="description" content="Kumpulan video menarik pilihan Warkasa1919 yang informatif, edukatif, dan menghibur.">
  <meta name="keywords" content="video warkasa1919, video edukasi, video inspirasi, video hiburan, kumpulan video">
  <link rel="canonical" href="https://www.warkasa1919.com/p/video.html"/>

  <!-- ✅ SEO Schema Video -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "VideoGallery",
    "name": "Kumpulan Video Pilihan Warkasa1919",
    "url": "https://www.warkasa1919.com/p/video.html",
    "description": "Kumpulan video pilihan dari Warkasa1919 yang menarik, edukatif, inspiratif, dan menghibur."
  }
  </script>

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0; padding: 0;
      background: #f5f6fa;
      color: #333;
    }
    header {
      background: #0056b3;
      color: white;
      text-align: center;
      padding: 1.2rem;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    header h1 {
      margin: 0;
      font-size: 1.6rem;
    }
    /* Tombol filter */
    .filter-buttons {
      text-align: center;
      margin: 1rem;
    }
    .filter-buttons button {
      background: #0056b3;
      color: white;
      border: none;
      padding: 0.6rem 1.2rem;
      margin: 0.3rem;
      border-radius: 25px;
      cursor: pointer;
      transition: background 0.3s;
    }
    .filter-buttons button:hover,
    .filter-buttons button.active {
      background: #ff9800;
    }
    /* Search bar */
    .search-bar {
      text-align: center;
      margin: 0 1rem 1rem;
    }
    .search-bar input {
      width: 90%;
      max-width: 400px;
      padding: 0.6rem;
      border-radius: 25px;
      border: 1px solid #ccc;
      font-size: 1rem;
    }
    .video-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1rem;
      padding: 1rem;
    }
    .video-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 3px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }
    .video-card:hover {
      transform: translateY(-6px);
    }
    .video-card iframe {
      width: 100%;
      height: 180px;
      border: none;
    }
    .video-info {
      padding: 0.8rem;
    }
    .video-info h3 {
      font-size: 1rem;
      margin: 0 0 6px;
    }
    .video-info p {
      font-size: 0.85rem;
      color: #666;
    }
    footer {
      text-align: center;
      padding: 1rem;
      background: #222;
      color: white;
      margin-top: 2rem;
    }
    /* Responsif */
    @media (min-width:768px) {
      .video-card iframe { height: 220px; }
    }
    @media (min-width:1024px) {
      .video-card iframe { height: 260px; }
    }
  </style>
</head>
<body>

  <header>
    <h1>🎥 Video Pilihan Warkasa1919</h1>
    <p>Informasi, Edukasi, Inspirasi, dan Hiburan Terbaik</p>
  </header>

  <!-- ✅ Tombol filter -->
  <div class="filter-buttons">
    <button class="active" onclick="filterVideos('all', event)">Semua</button>
    <button onclick="filterVideos('edukasi', event)">Edukasi</button>
    <button onclick="filterVideos('inspirasi', event)">Inspirasi</button>
    <button onclick="filterVideos('hiburan', event)">Hiburan</button>
  </div>

  <!-- ✅ Search bar -->
  <div class="search-bar">
    <input type="text" id="searchInput" placeholder="Cari video..." onkeyup="searchVideos()"/>
  </div>

  <main>
    <section class="video-container">

      <!-- ✅ Contoh Video Edukasi -->
      <article class="video-card" data-category="edukasi">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID1" 
          title="Judul Video Edukasi" allowfullscreen loading="lazy"></iframe>
        <div class="video-info">
          <h3>Belajar SEO Dasar</h3>
          <p>Video edukasi untuk memahami dasar-dasar SEO dan optimasi website.</p>
        </div>
      </article>

      <!-- ✅ Contoh Video Inspirasi -->
      <article class="video-card" data-category="inspirasi">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID2" 
          title="Judul Video Inspirasi" allowfullscreen loading="lazy"></iframe>
        <div class="video-info">
          <h3>Motivasi Hidup Sukses</h3>
          <p>Video inspirasi dan motivasi untuk membangun semangat hidup lebih baik.</p>
        </div>
      </article>

      <!-- ✅ Contoh Video Hiburan -->
      <article class="video-card" data-category="hiburan">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID3" 
          title="Judul Video Hiburan" allowfullscreen loading="lazy"></iframe>
        <div class="video-info">
          <h3>Video Lucu Santai</h3>
          <p>Video hiburan ringan yang menyenangkan untuk melepas penat.</p>
        </div>
      </article>

    </section>
  </main>

  <footer>
    <p>&copy; 2025 Warkasa1919.com | Ruang berbagi informasi</p>
  </footer>

  <script>
    let currentCategory = "all";

    function filterVideos(category, e) {
      currentCategory = category;
      let videos = document.querySelectorAll(".video-card");
      let buttons = document.querySelectorAll(".filter-buttons button");
      let searchTerm = document.getElementById("searchInput").value.toLowerCase();

      // tombol aktif
      buttons.forEach(btn => btn.classList.remove("active"));
      e.target.classList.add("active");

      videos.forEach(video => {
        let title = video.querySelector("h3").innerText.toLowerCase();
        let desc = video.querySelector("p").innerText.toLowerCase();
        let matchesSearch = title.includes(searchTerm) || desc.includes(searchTerm);
        let matchesCategory = (category === "all" || video.dataset.category === category);

        video.style.display = (matchesSearch && matchesCategory) ? "block" : "none";
      });
    }

    function searchVideos() {
      filterVideos(currentCategory, { target: document.querySelector(".filter-buttons .active") });
    }
  </script>

</body>
</html>

✨ Fitur Lengkap:

  1. Filter kategori (Semua | Edukasi | Inspirasi | Hiburan).

  2. Search bar untuk mencari video berdasarkan judul/deskripsi.

  3. Bisa digabung → misalnya pilih Edukasi lalu ketik SEO, hanya video edukasi tentang SEO yang tampil.

  4. SEO-friendly karena semua video tetap ada di HTML, hanya disembunyikan dengan JS.

  5. Ringan & responsif di semua perangkat.

itulah beberapa kode untuk membuat halaman vodeo di blog.



Posting Komentar

]]>