Safelink Generator

Tutorial lengkap membuat website TV Series dan Movie di blogspot menggunakan TMDB API bagian 2

Tutorial Lengkap Membuat Website TV Series dan Movie di Blogspot Menggunakan TMDB API (Step 2)

Pada tutorial sebelumnya di halaman Tutorial tahap 1, kita telah berhasil membuat Landing Page atau Homepage sebagai tampilan utama website Movie & TV Series menggunakan Blogspot

Pada tutorial kali ini kita akan melanjutkan pembuatan website dengan membuat halaman Trending Movie dan Trending TV Shows. Halaman ini berfungsi untuk menampilkan daftar film dan serial TV yang diambil secara otomatis dari TMDB API berdasarkan kategori tertentu.

Seluruh data akan selalu diperbarui mengikuti database TMDB, sehingga ketika ada film atau serial TV terbaru, website Anda akan otomatis menampilkan data terbaru tanpa perlu memperbarui secara manual.

Kategori yang Akan Ditampilkan

Agar pengunjung lebih mudah menemukan film atau serial TV yang ingin ditonton, halaman Trending dibagi menjadi beberapa kategori.

Movie

  • Popular Movie
  • Top Rated Movie
  • Upcoming Movie

TV Shows

  • Popular TV
  • Airing Today
  • On The Air
  • Top Rated TV

Setiap kategori mengambil data langsung dari TMDB API sehingga daftar film maupun serial TV akan selalu mengikuti pembaruan terbaru dari TMDB.

Demo Halaman Trending

Sebelum mulai memasang script, Anda dapat melihat contoh hasil akhirnya melalui halaman demo berikut.


    Cara Membuat Halaman Trending

    Masuk ke Dashboard Blogger, kemudian pilih menu Halaman (Pages) dan klik Halaman Baru. Pastikan editor yang digunakan adalah Mode HTML, bukan mode Compose, agar seluruh kode dapat dibaca dengan benar oleh Blogger.

    Buat dua halaman baru, yaitu:

    • Trending Movie
    • Trending TV

    Selanjutnya salin kode berikut sesuai dengan kategori halaman yang ingin dibuat.

    📌 Script Trending Movie

    </>
    <style> body{ margin:0; font-family:Arial; background:#0f0f0f; color:#fff; } /* SECTION */ .section{ margin:20px 0; } .section h2{ font-size:16px; margin:10px 12px; } /* ROW SLIDER */ .row{ display:flex; overflow-x:auto; gap:10px; padding:10px 12px; scroll-behavior:smooth; } .row::-webkit-scrollbar{ display:none; } /* CARD */ .card{ min-width:120px; max-width:120px; flex:0 0 auto; background:#1c1c1c; border-radius:10px; overflow:hidden; } .card img{ width:100%; height:170px; object-fit:cover; } .card p{ font-size:11px; padding:5px; margin:0; text-align:center; } </style> <div class="section"> <h2>Popular</h2> <div id="popular" class="row"></div> </div> <div class="section"> <h2>Upcoming</h2> <div id="upcoming" class="row"></div> </div> <div class="section"> <h2>Top Rated</h2> <div id="toprated" class="row"></div> </div> <div class="section"> <h2>Now Playing</h2> <div id="nowplaying" class="row"></div> </div> <script> const API_KEY = "YOUR_TMDB_API_KEY"; const BASE = "https://api.themoviedb.org/3"; const IMG = "https://image.tmdb.org/t/p/w300"; async function load(type, id){ const res = await fetch(`${BASE}/movie/${type}?api_key=${API_KEY}&language=en-US&page=1`); const data = await res.json(); const box = document.getElementById(id); box.innerHTML = ""; data.results.forEach(m=>{ const poster = m.poster_path ? IMG + m.poster_path : "https://via.placeholder.com/300x450"; box.innerHTML += ` <div class="card"> <img src="${poster}"> <p>${m.title}</p> </div> `; }); } load("popular","popular"); load("upcoming","upcoming"); load("top_rated","toprated"); load("now_playing","nowplaying"); </script>
    Safelink-aza

    📌 Script trending Tv

    </>
    <style> .tabs{ display:flex; gap:10px; overflow-x:auto; margin:15px 0; padding-bottom:5px; scrollbar-width:none; } .tabs::-webkit-scrollbar{display:none;} .tabs-btn{ flex:0 0 auto; padding:10px 18px; border-radius:30px; background:#222; color:#fff; text-decoration:none; font-size:14px; transition:.3s; } .tabs-btn.active{ background:#e50914; } #tvGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:15px; } .card{ display:block; text-decoration:none; color:#fff; background:#1b1b1b; border-radius:10px; overflow:hidden; transition:.3s; } .card img{ width:100%; aspect-ratio:2/3; object-fit:cover; display:block; } .card h3{ margin:10px; font-size:14px; line-height:1.4; } </style> <div class="tabs"> <a href="?id=popular" class="tabs-btn" data-id="popular">Popular</a> <a href="?id=ontheair" class="tabs-btn" data-id="ontheair">On The Air</a> <a href="?id=toprated" class="tabs-btn" data-id="toprated">Top Rated</a> </div> <div id="tvGrid"></div> <script> const api="YOUR_TMDB_API_KEY"; const tvGrid=document.getElementById("tvGrid"); const tabs=document.querySelectorAll(".tabs-btn"); function loadTV(type){ let endpoint="popular"; if(type==="ontheair") endpoint="on_the_air"; if(type==="toprated") endpoint="top_rated"; tabs.forEach(btn=>{ btn.classList.toggle("active",btn.dataset.id===type); }); history.replaceState(null,"","?id="+type); tvGrid.innerHTML="Loading..."; fetch(`https://api.themoviedb.org/3/tv/${endpoint}?api_key=${api}&language=en-US&page=1`) .then(r=>r.json()) .then(data=>{ if(!data.results){ tvGrid.innerHTML="No data"; return; } tvGrid.innerHTML=data.results.map(show=>` <a class="card" href="/2026/06/tv-show.html?id=${show.id}"> <img src="https://image.tmdb.org/t/p/w500${show.poster_path||''}"> <h3>${show.name}</h3> </a> `).join(""); }); } tabs.forEach(btn=>{ btn.addEventListener("click",e=>{ e.preventDefault(); loadTV(btn.dataset.id); }); }); loadTV(new URLSearchParams(location.search).get("id")||"popular"); </script>
    Safelink-aza

    Mengganti API Key

    Sebelum mempublikasikan halaman, cari tulisan berikut pada script:

    YOUR_TMDB_API_KEY

    Kemudian ganti dengan API Key TMDB milik Anda yang telah dibuat pada Tutorial Step 1.

    Pastikan API Key ditulis dengan benar tanpa menghapus tanda kutip didalam script,maupun karakter lainnya. Kesalahan penulisan API Key dapat menyebabkan data dari TMDB tidak dapat ditampilkan.

    Mempublikasikan Halaman

    Apabila API Key sudah diganti, lalu klik tombol Publikasikan.

    Sekarang coba buka halaman Trending Movie maupun Trending TV yang telah dibuat. Jika seluruh langkah dilakukan dengan benar, maka daftar film dan serial TV akan muncul secara otomatis lengkap dengan poster, judul, rating, serta informasi lainnya sesuai data yang tersedia di TMDB.

    Jika Data Tidak Muncul

    Apabila halaman masih kosong atau muncul pesan error, periksa beberapa hal berikut:

    < ul>
  • Pastikan API Key benar & masih aktif.
  • Pastikan tulisan YOUR_TMDB_API_KEY sudah diganti dengan API anda dari TMDB
  • Pastikan script ditempel/Di edit pada Mode HTML di kotak editor posting halaman blogger.
  • Pastikan tidak ada karakter atau tag HTML yang terhapus saat menyalin & menempel kode.
  • Coba Refresh halaman menggunakan browser setelah dipublikasikan.

Sebagian besar masalah biasanya terjadi karena API Key belum diganti atau terdapat kesalahan saat menyalin script.

Tutorial Selanjutnya

Selamat! Sampai tahap ini Anda telah berhasil membuat halaman Trending Movie dan Trending TV Shows menggunakan TMDB API.

Pada Tutorial Step 3, kita akan mulai membuat halaman Detail Movie dan Detail TV Series. Halaman ini akan menampilkan informasi yang lebih lengkap, seperti poster resolusi tinggi, backdrop, sinopsis, genre, rating, durasi, tanggal rilis, trailer, daftar pemeran (Cast), hingga rekomendasi film atau serial TV yang serupa.

Sampai jumpa pada Tutorial Lengkap Membuat Website TV Series dan Movie di Blogspot Menggunakan TMDB API Bagian 3.

Tutorial Step 3 ini akan saya posting pada artikel selanjutnya di halaman Tutorial lengkap membuat website TV Series dan Movie di blogspot menggunakan TMDB API bagian 3, Pantau Update post di blog saya ini tutorial selanjutnya.

Tulis lanjut di kolom komentar untuk tutorial berikutnya

Pertanyaan Umum (FAQ)

Apa fungsi halaman Detail Movie dan Detail TV??

Halaman Detail Movie dan Detail TV berfungsi untuk menampilkan informasi lengkap mengenai film atau serial TV yang dipilih pengguna. Informasi yang ditampilkan meliputi poster, backdrop, judul, rating, durasi atau jumlah episode, genre, tanggal rilis, sinopsis, trailer, daftar pemeran (cast), kru (crew), rekomendasi, hingga informasi pendukung lainnya yang diambil secara langsung dari API TMDB..

Apa perbedaan halaman Detail Movie dengan Detail TV?

Perbedaan utamanya terletak pada data yang ditampilkan. Halaman Detail Movie menampilkan informasi khusus film seperti durasi (runtime) dan tanggal rilis. Sedangkan halaman Detail TV menampilkan informasi serial TV, seperti jumlah season, jumlah episode, episode terakhir, status penayangan, serta jadwal episode berikutnya (jika tersedia). Meskipun tampilannya hampir sama, data yang ditampilkan akan menyesuaikan dengan jenis konten yang dipilih..

🛠 BERKAH JAYA ABADI TEKNIK

Layanan Jasa Service elektronik panggilan

Pesan Jasa Sekarang

📚 Artikel Terbaru