Membuat Polling ROADMAP untuk FINAL PIALA DUNIA 2026 di Blogspot

Salam teman teman blogger, wuuppss.. seru buka npertandingan semifinal tadi antara Inggris vs Argentina. Sangat Menyita Andrenalin, gimana tuh para pemain, pelatih, staff dan laiinya yang ada disana.. bayangin! kita yang nonton aja Andrenalin gak karuan. The Best Game lah pokoknya pertandingan semifinal Kamis, 16 Juli 2026 ini!

Setelah Gol dari Antony Gordon 1 kosong, Inggris seperti hilang kendalai menyerang seperti gak tau lagi menyerang, nahh disanalah Argentina menekan habis habisan tanpa ampun dan tanpa kompromi! Itulah Argentina sepakbola Latin memang berbeda gaya khas permainan yang menyerangnya yang ekslusif menurut saya. Dan yang paling utama.. Argentina ya Argentina.. dan siapa lagi Superstarnya kalau bukan "Lionel Messi" Messi is Messi..  tanpa dia mungkin Argentina bukan argentina 2 assisnya kepada Enzo Fernandes dan Lautaro Martinez menandai dia memang seorang "The Best Player in The Word.. GOAT is GOAT"

Namun, Inggris tetap dihati teman teman, Jujur setelah Argentina saya menjagokan Inggris juga. Tetap semagat Lovers England.. mungkin Piala Dunia nanti bisa berjayeee.. berjayyee..ckckckk..

Nah, dari pada suntuk saya  kali ini akan membagikan kode "Membuat Polling ROADMAP unutk FINAL PIALA DUNIA 2026 di Blogspot" seperti nampak pada gambar dibawah ini:

Awalnya saya menetukan layout unutk di tanyakan ke Mode Ai, seperti gambar dibawah ini, 

Bagaimana membuat kode unutk di tampilkan di Blogger kesayangan agar teman teman yang berkunjung dapat menetukan pilihan Negara mana yang dijagokan, tidak sampai 1 detik Mode pintar Google tersebut memberikan kode rancangan.. oprak oprek sana sini, barulah kode yang saya share ini menurut saya paling mumpuni. Dan untuk demo dan support blognya silahkan berkunjung ke URL Toko Bedoeit Online Disini. langsung saja gak pake lama.. berikut kodenya. Cekidot wae..

Saya akan bagikan kode menjadi tiga (3) kotak bagian ya teman teman, silahkan tempel dari kode pertama, lalu kode kedua dibawah kode pertama dan terakhir kode ketiga dibawah kode kedua

Kode Kotak bagian Pertama:

</> kotak 1

<div class="polling-bracket-container"> <h2 class="bracket-title">POLLING ROADMAP TO FINAL PIALA DUNIA 2026</h2> <p class="polling-desc"><b>Klik BULATAN BENDERA</b> tim pilihan Anda untuk memberikan suara!</p> <!-- BARIS SEMIFINAL (Atas) --> <div class="semifinal-row"> <!-- SEMIFINAL 1 --> <div class="bracket-box semi-box"> <h3>SEMIFINAL 1 (CONGRATS To SPAIN)</h3> <div class="match-vs"> <!-- Tim A (Prancis) --> <div class="team-vote" onclick="castVote('semi1', 'Prancis')"> <div class="circle-btn" id="btn-semi1-Prancis"> <!-- SVG Bendera Prancis --> <svg class="flag-svg" viewBox="0 0 3 2"> <rect width="1" height="2" fill="#0055A5"/> <rect x="1" width="1" height="2" fill="#FFFFFF"/> <rect x="2" width="1" height="2" fill="#EF4135"/> </svg> </div> <img class="player-avatar" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRt4cf41kbmPV_bQenL8HDhJvmueuyKqfF0OAPMhff9Vw&s" alt="Mbappe"> <span class="team-name">Prancis <small>(Mbappe)</small></span> <div class="progress-bar"><div id="semi1-Prancis-bar" class="progress fra-bar"></div></div> <span class="vote-count" id="pct-semi1-Prancis">0%</span>0 </div> <span class="vs-text">vs</span> <!-- Tim B (Spanyol) --> <div class="team-vote" onclick="castVote('semi1', 'Spanyol')"> <div class="circle-btn" id="btn-semi1-Spanyol"> <!-- SVG Bendera Spanyol --> <svg class="flag-svg" viewBox="0 0 3 2"> <rect width="3" height="2" fill="#AA1521"/> <rect y="0.5" width="3" height="1" fill="#F1BF00"/> <!-- Simbol Lambang Sederhana Spanyol --> <circle cx="0.7" cy="1" r="0.2" fill="#AA1521"/> </svg> </div> <img class="player-avatar" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXpr64CIKjI2p3mFTrWCpSp9DlOi5mRyjzXzoVsYfGvA&s" alt="Yamal"> <span class="team-name">Spanyol <small>(Yamal)</small></span> <div class="progress-bar"><div id="semi1-Spanyol-bar" class="progress esp-bar"></div></div> <span class="vote-count" id="pct-semi1-Spanyol">0%</span>2 </div> </div> </div> <!-- SEMIFINAL 2 --> <div class="bracket-box semi-box"> <h3>SEMIFINAL 2 (CONGRATS To ARGENTINA)</h3> <div class="match-vs"> <!-- Tim A (Inggris) --> <div class="team-vote" onclick="castVote('semi2', 'Inggris')"> <div class="circle-btn" id="btn-semi2-Inggris"> <!-- SVG Bendera Inggris --> <svg class="flag-svg" viewBox="0 0 5 3"> <rect width="5" height="3" fill="#FFFFFF"/> <rect x="2" width="1" height="3" fill="#CE1126"/> <rect y="1" width="5" height="1" fill="#CE1126"/> </svg> </div> <img class="player-avatar" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYLcH69fnBQ5OsVX4FDM5AA9bn7ANLaSDwtrv1kk1JNw&s" alt="Kane"> <span class="team-name">Inggris <small>(Kane)</small></span> <div class="progress-bar"><div id="semi2-Inggris-bar" class="progress eng-bar"></div></div> <span class="vote-count" id="pct-semi2-Inggris">0%</span>1 </div> <span class="vs-text">vs</span> <!-- Tim B (Argentina) --> <div class="team-vote" onclick="castVote('semi2', 'Argentina')"> <div class="circle-btn" id="btn-semi2-Argentina"> <!-- SVG Bendera Argentina --> <svg class="flag-svg" viewBox="0 0 9 6"> <rect width="9" height="6" fill="#74ACDF"/> <rect y="2" width="9" height="2" fill="#FFFFFF"/> <!-- Simbol Matahari Mei Sederhana --> <circle cx="4.5" cy="3" r="0.4" fill="#F1BF00"/> </svg> </div> <img class="player-avatar" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoKG3m0UukHDYnZb_yYbMA0xO_Ihv-C1rNFSgCCMsw_g&s" alt="Messi"> <span class="team-name">Argentina <small>(Messi)</small></span> <div class="progress-bar"><div id="semi2-Argentina-bar" class="progress arg-bar"></div></div> <span class="vote-count" id="pct-semi2-Argentina">0%</span>2 </div> </div> </div> </div> <!-- BARIS FINAL (Bawah) --> <div class="final-row"> <!-- FINALIST BARAT --> <div class="bracket-box final-box"> <h3>SPANYOL (EROPA TEAM)</h3> <div class="team-vote final-vote" onclick="castVote('final', 'TimBarat')"> <div class="circle-btn" id="btn-semi1-Spanyol"> <!-- SVG Bendera Spanyol --> <svg class="flag-svg" viewBox="0 0 3 2"> <rect width="8" height="5" fill="#AA1521"/> <rect y="0.5" width="3" height="1" fill="#F1BF00"/> <!-- Simbol Lambang Sederhana Spanyol --> <circle cx="0.7" cy="1" r="0.2" fill="#AA1521"/> </svg> </div> <span class="team-name-large">PILIH TIM A</span> <div class="progress-bar large-bar"><div id="final-TimBarat-bar" class="progress gold-bar"></div></div> <span class="vote-count final-pct" id="pct-final-TimBarat">0%</span> </div> </div> <span class="vs-text large-vs">VS</span> <!-- FINALIST TIMUR --> <div class="bracket-box final-box"> <h3>ARGENTINA (LATIN TEAM)</h3> <div class="team-vote final-vote" onclick="castVote('final', 'TimTimur')"> <div class="circle-btn" id="btn-semi2-Argentina"> <!-- SVG Bendera Argentina --> <svg class="flag-svg" viewBox="0 0 9 6"> <rect width="9" height="6" fill="#74ACDF"/> <rect y="2" width="9" height="2" fill="#FFFFFF"/> <!-- Simbol Matahari Mei Sederhana --> <circle cx="4.5" cy="3" r="0.4" fill="#F1BF00"/> </svg> </div> <span class="team-name-large">PILIH TIM B</span> <div class="progress-bar large-bar"><div id="final-TimTimur-bar" class="progress gold-bar"></div></div> <span class="vote-count final-pct" id="pct-final-TimTimur">0%</span> </div> </div> </div> <button class="reset-poll-btn" onclick="resetVotes()">Reset Polling Data (apabila anda ingin mengganti, (<i>malu tapi euyy.. kalah tuh artinya jagoannya..ckckck!<b></b></i>) lalu refresh kembali Browser Anda untuk memilih jagoan Baru!</button> </div>

Kode Kotak bagian Kedua:

</> kotak 2 CSS

<style> .polling-bracket-container { background: #121212; border: 4px solid #cda343; padding: 20px; border-radius: 16px; max-width: 950px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px auto; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.6); text-align: center; box-sizing: border-box; } .bracket-title { font-size: 22px; color: #cda343; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; } .polling-desc { font-size: 13px; color: #aaa; margin-bottom: 25px; } .semifinal-row { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 30px; } .final-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .bracket-box { background: #1e1e1e; border: 3px solid #333; border-radius: 20px; padding: 20px; box-sizing: border-box; transition: border-color 0.3s; } .bracket-box:hover { border-color: #cda343; } .semi-box { width: 49%; } .final-box { width: 44%; min-height: 220px; display: flex; flex-direction: column; justify-content: center; } .bracket-box h3 { margin: 0 0 20px 0; font-size: 16px; color: #cda343; letter-spacing: 1px; text-transform: uppercase; } .match-vs { display: flex; justify-content: space-around; align-items: flex-start; gap: 10px; } .team-vote { display: flex; flex-direction: column; align-items: center; width: 45%; cursor: pointer; } .final-vote { width: 100%; } /* Pengaturan Lingkaran Merah Pembungkus SVG */ .circle-btn { width: 50px; height: 50px; border: 3px solid red; border-radius: 50%; margin-bottom: 12px; background: #222; transition: background 0.3s, transform 0.2s; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .team-vote:hover .circle-btn { transform: scale(1.1); } .large-circle { width: 85px; height: 85px; border-width: 4px; } .circle-btn.voted { border-color: #ffdd44; box-shadow: 0 0 10px #ffdd44; } /* Memastikan SVG Bendera Mengisi Bulatan dan Bulat Sempurna */ .flag-svg { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; } .player-avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; border: 2px solid #cda343; background: #fff; margin-bottom: 8px; } .vs-text { color: red; font-weight: bold; font-size: 16px; align-self: center; margin-top: 15px; } .large-vs { font-size: 32px; color: #cda343; margin-top: 0; } .team-name { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 8px; } .team-name small { display: block; color: #bbb; font-size: 11px; font-weight: normal; margin-top: 2px; } .team-name-large { font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 12px; } .vote-count { font-size: 13px; color: #cda343; font-weight: bold; margin-top: 5px; } .final-pct { font-size: 16px; } .progress-bar { width: 100%; background: #333; height: 10px; border-radius: 5px; overflow: hidden; } .large-bar { height: 14px; max-width: 200px; } .progress { height: 100%; width: 0%; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .fra-bar { background: linear-gradient(90deg, #0055A5, #ffffff, #EF4135); } .esp-bar { background: linear-gradient(90deg, #AA1521, #F1BF00, #AA1521); } .eng-bar { background: linear-gradient(90deg, #ffffff, #CE1126); } .arg-bar { background: linear-gradient(90deg, #74ACDF, #ffffff, #74ACDF); } .gold-bar { background: linear-gradient(90deg, #cda343, #fff2a3); } .reset-poll-btn { margin-top: 25px; padding: 8px 18px; background: #222; color: #aaa; border: 1px solid #444; border-radius: 6px; cursor: pointer; font-size: 12px; transition: 0.2s; } .reset-poll-btn:hover { background: #333; color: #fff; border-color: #cda343; } @media (max-width: 768px) { .semifinal-row, .final-row { flex-direction: column; width: 100%; gap: 20px; } .semi-box, .final-box { width: 100%; } .large-vs { margin: 10px 0; } } </style>

Kode Kotak bagian Ketiga:

</> kotak 3 Script

<script> let bracketData = JSON.parse(localStorage.getItem('wc_roadmap_poll')) || { semi1: { 'Prancis': 5, 'Spanyol': 8 }, semi2: { 'Inggris': 1, 'Argentina': 1 }, final: { 'TimBarat': 0, 'TimTimur': 0 } }; function updateBracketDOM() { for (let match in bracketData) { let total = Object.values(bracketData[match]).reduce((a, b) => a + b, 0); for (let country in bracketData[match]) { let count = bracketData[match][country]; let pct = total > 0 ? Math.round((count / total) * 100) : 0; let barEl = document.getElementById(`${match}-${country}-bar`); let pctEl = document.getElementById(`pct-${match}-${country}`); if (barEl) barEl.style.width = pct + '%'; if (pctEl) pctEl.innerText = pct + '%'; if (localStorage.getItem('voted_roadmap_' + match) === country) { let btnEl = document.getElementById(`btn-${match}-${country}`); if (btnEl) btnEl.classList.add('voted'); } } } } function castVote(match, country) { // TAMBAHKAN BARIS INI DI PALING ATAS DALAM FUNGSI CASTVOTE playClickSound(); let hasVoted = localStorage.getItem('voted_roadmap_' + match); if (hasVoted) { alert('Anda sudah memberikan suara untuk babak ini!'); return; } bracketData[match][country]++; localStorage.setItem('wc_roadmap_poll', JSON.stringify(bracketData)); localStorage.setItem('voted_roadmap_' + match, country); let btnEl = document.getElementById(`btn-${match}-${country}`); if (btnEl) btnEl.classList.add('voted'); updateBracketDOM(); alert('Pilihan Anda berhasil disimpan!'); } function resetVotes() { localStorage.removeItem('wc_roadmap_poll'); localStorage.removeItem('voted_roadmap_semi1'); localStorage.removeItem('voted_roadmap_semi2'); localStorage.removeItem('voted_roadmap_final'); bracketData = { semi1: { 'Prancis': 15, 'Spanyol': 18 }, semi2: { 'Inggris': 12, 'Argentina': 14 }, final: { 'TimBarat': 8, 'TimTimur': 10 } }; const circles = document.querySelectorAll('.circle-btn'); circles.forEach(c => c.classList.remove('voted')); updateBracketDOM(); } document.addEventListener("DOMContentLoaded", function() { updateBracketDOM(); }); // Tambahkan fungsi ini untuk membuat efek suara klik function playClickSound() { try { const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioCtx.createOscillator(); const gainNode = audioCtx.createGain(); oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(600, audioCtx.currentTime); oscillator.frequency.exponentialRampToValueAtTime(150, audioCtx.currentTime + 0.08); gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.08); oscillator.connect(gainNode); gainNode.connect(audioCtx.destination); oscillator.start(); oscillator.stop(audioCtx.currentTime + 0.08); } catch (e) { console.log('Audio otomatis diblokir browser sebelum ada interaksi.'); } } </script>

KESIMPULAN KODE

Silahkan teman teman blogger ganti dan rubah kode:

• semi1: { 'Prancis': 5, 'Spanyol': 8 },
      semi2: { 'Inggris': 1, 'Argentina': 1 },
      final: { 'TimBarat': 0, 'TimTimur': 0 } //dengan hitungan awal dulu misalanya nanti saat polling berjalan maka otomatis berjalan //
• Untuk mengisi hasil skor tambahkan saja di ahir kode seperti yang saya tandai merah <span class="vote-count" id="pct-semi2-Argentina">0%</span>2
• Untuk mengganti tekst Resset Button  ganti kata di kode ini //  <button class="reset-poll-btn" onclick="resetVotes()">Reset Polling Data (apabila anda ingin mengganti, (<i>malu tapi euyy.. kalah tuh artinya jagoannya..ckckck!<b></b></i>) lalu refresh kembali Browser Anda untuk memilih jagoan Baru!</button>
  </div>
• Simpan Edit HTML atau Postingan teman teman blogger.

Nah.. mudah bukan teman teman semua, silahkan berkreasi menjadi lebih baik kodenya apabila ada kekurangan. Untuk pertanyaan silahkan komen deh dibawah kotak disqus, akhir kata Salam Ngerapik Blog..!