HTML Script Untuk Menampilkan Channel YT di Blogspot

Berikut ini adalah script HTML yang bisa di aplikasikan pada Halaman baru atau Widget di blogspot.com.

Jangan lupa sertakan API Key YT dari Google Console anda.

Sistem kerjanya : Copy Channel YT anda kemudian pastekan di kolom yang tersedia, pilih video yang terbaru atau yang terpopuler kemudian klik tampilkan +12 video.

Jika koneksi internet anda mumpuni dan tentunya tidak lemot bisa klik tampilkan 10 lagi

Klik LINK ini untuk melihat sistem kerjanya

<style>
.yt-multi-wrap { background:#0a0a0a; padding:10px; border-radius:8px; }
.yt-multi-controls { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.yt-multi-controls input,.yt-multi-controls select,.yt-multi-controls button {
  padding:8px 10px; background:#222; border:1px solid #333; color:#fff; border-radius:6px; font-size:14px;
}
.yt-multi-controls input { flex:1; min-width:180px; }
.yt-multi-controls button { background:#f00; cursor:pointer; font-weight:600; }
.yt-multi-controls button:disabled { background:#444; cursor:not-allowed; }
.yt-multi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.yt-multi-grid iframe { width:100%; aspect-ratio:16/9; border:none; background:#000; }
.yt-multi-stats { font-size:12px; color:#888; margin:8px 0; }
@media(max-width:600px){.yt-multi-grid{grid-template-columns:repeat(2,1fr);} }
</style>
<div class="yt-multi-wrap">
  <div class="yt-multi-controls">
    <input id="ytChannel" placeholder="Contoh link channel: youtube.com/@area27b" />
    <select id="ytOrder">
      <option value="date" />Terbaru
      <option value="viewCount" />Terpopuler
    </select>
    <button onclick="ytLoad()" id="ytBtnLoad">Muat 12 Video</button>
    <button onclick="ytLoadMore()" id="ytBtnMore" style="display:none;">+ 10 Lagi</button>
  </div>
  <div class="yt-multi-stats" id="ytStats">Masukkan link channel untuk mulai.</div>
  <div class="yt-multi-grid" id="ytGrid"></div>
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
const YT_API_KEY = 'API Key Google Console Milik Anda';
let ytPlayers = [], ytVideoIds = [], ytChannelId = '', ytNextPage = '', ytCurrentOrder = '';
function onYouTubeIframeAPIReady() {}
async function ytLoad() {
  const url = document.getElementById('ytChannel').value;
  const order = document.getElementById('ytOrder').value;
  const btnLoad = document.getElementById('ytBtnLoad');
  const btnMore = document.getElementById('ytBtnMore');
  const stats = document.getElementById('ytStats');
  const grid = document.getElementById('ytGrid');
  btnLoad.disabled = true;
  btnLoad.textContent = 'Loading...';
  grid.innerHTML = ''; ytPlayers = []; ytVideoIds = []; ytNextPage = '';
  ytCurrentOrder = order;
  try {
    ytChannelId = await getYtChannelId(url);
    if(!ytChannelId) throw 'Link channel salah. Pakai format /@username atau /channel/UCxxx';
    await fetchAndRenderVideos(12, true);
    btnMore.style.display = 'inline-block';
  } catch(err) {
    stats.textContent = 'Error: ' + err;
  } finally {
    btnLoad.disabled = false;
    btnLoad.textContent = 'Muat Ulang';
  }
}
async function ytLoadMore() {
  if(!ytNextPage) return;
  const btnMore = document.getElementById('ytBtnMore');
  btnMore.disabled = true;
  btnMore.textContent = 'Loading...';
  await fetchAndRenderVideos(12, false);
  btnMore.disabled = false;
  btnMore.textContent = '+ 10 Lagi';
  if(!ytNextPage) btnMore.style.display = 'none';
}
async function fetchAndRenderVideos(count, isFirst) {
  const stats = document.getElementById('ytStats');
  const grid = document.getElementById('ytGrid');
  let url = `https://www.googleapis.com/youtube/v3/search?key=${YT_API_KEY}&channelId=${ytChannelId}&part=id&order=${ytCurrentOrder}&maxResults=${count}&type=video`;
  if(ytNextPage) url += `&pageToken=${ytNextPage}`;
  const data = await fetch(url).then(r => r.json());
  if(data.error) throw data.error.message;
  if(!data.items.length) throw 'Tidak ada video ditemukan';
  ytNextPage = data.nextPageToken || '';
  data.items.forEach((video, i) => {
    const videoId = video.id.videoId;
    ytVideoIds.push(videoId);
    const index = ytPlayers.length;
    const div = document.createElement('div');
    div.id = `yt-player-${index}`;
    grid.appendChild(div);
    const player = new YT.Player(`yt-player-${index}`, {
      videoId: videoId,
      playerVars: { autoplay:1, mute:1, controls:0, loop:1, playlist:videoId, modestbranding:1 },
      events: { 'onReady': e => e.target.playVideo() }
    });
    ytPlayers.push(player);
  });
  stats.textContent = `Total ${ytPlayers.length} video dimuat. Semua di-mute otomatis.`;
}
async function getYtChannelId(url) {
  if(url.includes('/channel/')) return url.split('/channel/')[1].split(/[/?]/)[0];
  if(url.includes('/@')) {
    const username = url.split('/@')[1].split(/[/?]/)[0];
    const data = await fetch(`https://www.googleapis.com/youtube/v3/channels?key=${YT_API_KEY}&forHandle=@${username}&part=id`).then(r=>r.json());
    return data.items?.[0]?.id;
  }
  if(url.includes('/c/') || url.includes('/user/')) {
    const username = url.split('/').pop().split(/[/?]/)[0];
    const data = await fetch(`https://www.googleapis.com/youtube/v3/channels?key=${YT_API_KEY}&forUsername=${username}&part=id`).then(r=>r.json());
    return data.items?.[0]?.id;
  }
  return null;
}
</script>

Read More

Untuk Upload Data dan Foto di Blog Jual Beli

Mohon diperhatikan untuk Upload Data dan Foto di Blog Jual Beli dengan Blogspot :

• Posisikan HP/Smartphone anda dalam posisi Vertikal
• Usahakan Aspek Ratio Kamera HP adalah 3:4 atau 9:16 

• Foto yang diupload bisa lebih dari 1 dan foto urutan ke-1 diusahakan merupakan FOTO UNGGULAN/TERBAIK. Baru foto dibawahnya adalah foto penunjang
• Isikan data sesuai yang diberikan contoh, mulai dari HARGA, IDENTITAS PENJUAL, NOMER WA PENJUAL, LOKASI, STOK BARANG, CARA PEMBAYARAN (NO REK TRANSFER), PENGIRIMAN, DSBNYA
• Berikan LABEL, yaitu kategori produk yang ditawarkan.
• Untuk LABEL, upayakan 1 Produk = 1 LABEL - jika lebih dari 1 Label, usahakan yang berkaitan. Misalnya BISKUIT : label yang digunakan adalah KUE dan MAKANAN
• Jika anda memliki VIDEO Produk, bisa diupload di halaman postingan produk dibawah FOTO UNGGULAN Produk.
• Video usahakan durasi tidak lebih dari 3 menit. Dan bisa diupload ke chanel youtube anda.
• Atau bisa dengan menyematkan Link Video (baik dari Tiktok, Instagram, Facebook, X, atau aplikasi lain) pada FOTO PRODUK

Read More