✍️ View source Code

"View source" adalah fitur di peramban web (browser) yang memungkinkan Anda melihat kode dasar suatu halaman web, seperti HTML, CSS, dan JavaScript, yang digunakan untuk membuat tampilan visual situs tersebut. Anda bisa mengaksesnya dengan beberapa cara, seperti mengklik kanan pada halaman dan memilih "Lihat Sumber" atau dengan menambahkan view-source: di awal URL di bilah alamat browser. 
Cara menggunakan view-source
1. Menggunakan klik kanan
  • Buka halaman web yang ingin dilihat kode sumbernya di peramban Anda.
  • Klik kanan di mana saja pada halaman tersebut.
  • Pilih opsi "View Source" atau "Lihat Sumber" (nama opsi dapat bervariasi tergantung peramban). 
2. Menggunakan pintasan keyboard
  • Buka halaman web di peramban Anda.
  • Tekan CTRL + U (di Windows atau Linux) atau Option + Command + U (di macOS). 
3. Menambahkan view-source: ke URL 
  • Buka halaman web yang diinginkan.
  • Klik pada bilah alamat dan tambahkan view-source: tepat sebelum URL yang sudah ada (misalnya, view-source:https://example.com).
  • Tekan Enter untuk melihat kode sumbernya. 
Kegunaan view-source
  • Belajar pemrograman: Melihat kode sumber bisa menjadi cara yang baik untuk belajar bagaimana struktur dan elemen halaman web dibuat.
  • Mencari inspirasi desain: Anda bisa melihat teknik desain yang digunakan oleh situs web lain untuk mendapatkan inspirasi.
  • Analisis keamanan: Pengembang dan peretas sering menganalisis kode sumber untuk mencari potensi celah keamanan pada suatu situs web. 

Cara Memasang View source Code / Script View source Code di Blogspot

Ada beberapa cara untuk memasang sebuah View source Code atau script di Blogspot. Setiap lokasi pemasangan memiliki fungsi dan karakteristik yang berbeda, sehingga penting untuk mengetahui tempat mana yang paling sesuai untuk kebutuhan Anda.

1. Memasang di Halaman Postingan (Artikel)

Cara ini cocok jika tool ingin muncul hanya pada satu artikel tertentu.

Langkah-langkah:

  1. Login terlebih dahulu ke https://www.blogger.com menggunakan email Anda.
  2. Pilih Buat Postingan Baru atau tekan tombol (+).
  3. Pada editor postingan, ubah mode ke HTML (bukan Compose).
  4. Salin dan tempel kode script yang sudah saya sediakan dibawah ke dalam editor HTML.

Setelah itu, tambahkan judul, label, gambar, dan deskripsi sesuai kebutuhan. Klik Publikasikan untuk menyimpan postingan.

2. Memasang di Halaman Statis

Halaman statis biasanya dipakai untuk konten permanen seperti: tool, generator, halaman privacy policy, halaman kontak, atau aplikasi mini. Pemasangan script di halaman statis membuat tool lebih rapi dan mudah diakses.

Langkah-langkah:

  1. Buka Blogger dan masuk ke dashboard.
  2. Pada menu kiri, pilih Halaman → + Halaman Baru.
  3. Ubah mode editor ke HTML agar script dapat berjalan.
  4. Tempelkan script tool Anda ke dalam kolom HTML.
  5. Beri judul halaman, misalnya: Tool Generator.
  6. Klik Publikasikan.

Kelebihan menaruh script di halaman statis adalah tampilannya lebih bersih, URL halaman tetap, dan tidak bercampur dengan konten blog lainnya.

3. Memasang di Template

Cara ini digunakan jika Anda ingin script tampil di semua halaman blog, misalnya script:

  • popup otomatis
  • script SEO
  • script efek animasi background
  • script anti-copy, script tombol mengambang, dll

Langkah-langkah:

  1. Buka Blogger → Tema.
  2. Klik tombol Edit HTML.
  3. Untuk script JS, letakkan sebelum tag </body> agar loading lebih cepat.
  4. Untuk script CSS, letakkan sebelum </head>.
  5. Simpan template.

Menaruh script di Template memberikan kontrol penuh, tetapi harus berhati-hati karena salah penempatan bisa menyebabkan error pada tampilan blog.

4. Memasang di Widget HTML / Gadget HTML

Ini adalah cara paling mudah dan aman, cocok untuk script yang ingin tampil pada area sidebar, footer, atau bagian tertentu.

Langkah-langkah:

  1. Buka Blogger → Tata Letak.
  2. Pilih lokasi widget (Sidebar, Footer, Header).
  3. Klik Tambah Gadget.
  4. Pilih HTML/JavaScript.
  5. Tempelkan script Anda di kolom yang muncul.
  6. Simpan.

Widget HTML ideal untuk script kecil seperti:

  • tombol klik
  • counter visitor
  • iklan
  • tool sederhana
  • shortcode

Kesimpulan

Menentukan lokasi pemasangan script sangat penting agar tool View source Code bekerja maksimal dan sesuai fungsi. Jika tool hanya untuk satu artikel, pasang di postingan. Jika ingin halaman khusus, gunakan halaman statis. Jika ingin seluruh blog terpengaruh, pasang di template. Jika ingin praktis, gunakan widget HTML.

klik untuk menyalin


👇
<!doctype html> <html lang="id"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>View Source — Cara Melihat Kode Sumber Halaman Web</title> <style> #vsBox{font-family:monospace;background:#111;color:#e6e6e6;padding:12px;border-radius:8px} #vsControls{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap} #vsBox textarea{width:100%;height:100vh;background:#0b0b0b;color:#dcdcdc;border:1px solid #222;padding:8px;resize:vertical} #vsControls input[type=text]{flex:1;min-width:180px;padding:8px;border-radius:6px;border:1px solid #333;background:#0f0f0f;color:#fff} .button{padding:8px 10px;border-radius:6px;border:none;cursor:pointer} .btn-primary{background:#1e88e5;color:#fff} .btn-plain{background:#2b2b2b;color:#fff} .small{font-size:12px;padding:6px 8px} </style> </head> <body> <header>View Source HTML</header> <div id="vsBox"> <div id="vsControls"> <input id="vsUrl" type="text" placeholder="Masukkan URL (opsional, kosong = halaman ini)"> <button id="vsLoad" class="button btn-primary small">Tampilkan Source</button> <button id="vsCopy" class="button btn-plain small">Copy</button> <button id="vsDownload" class="button btn-plain small">Download .html</button> <label style="align-self:center;font-size:12px;margin-left:6px;color:#bbb">Note: fetch eksternal butuh proxy/CORS.</label> </div> <textarea id="vsArea" readonly spellcheck="false">Tekan "Tampilkan Source" untuk mulai...</textarea> </div> <script> (function(){ const area = document.getElementById('vsArea'); const urlInput = document.getElementById('vsUrl'); const loadBtn = document.getElementById('vsLoad'); const copyBtn = document.getElementById('vsCopy'); const dlBtn = document.getElementById('vsDownload'); function show(text){ area.value = text; area.scrollTop = 0; } function getThisPageSource(){ // ambil source DOM sebagai HTML terformat const doctype = document.doctype ? new XMLSerializer().serializeToString(document.doctype) + '\n' : ''; const html = document.documentElement.outerHTML; return doctype + html; } async function fetchUrl(u){ try { const res = await fetch(u, {method:'GET', mode:'cors'}); if(!res.ok) throw new Error(res.status + ' ' + res.statusText); const text = await res.text(); return text; } catch(e){ throw e; } } loadBtn.addEventListener('click', async ()=>{ const raw = urlInput.value.trim(); if(!raw){ show('Loading source halaman ini...\n\n'); try{ const src = getThisPageSource(); show(src); }catch(e){ show('Error saat ambil source halaman ini: ' + e.message); } return; } // kalau user minta URL eksternal — CORS berlaku // saran: gunakan proxy seperti https://api.allorigins.win/raw?url= atau CORS-Proxy sendiri let target = raw; // jika bukan http(s) maka tambahkan https:// if(!/^https?:\/\//i.test(target)) target = 'https://' + target; show('Mengambil: ' + target + '\n\n(Perhatian: Jika server target menolak CORS, gunakan proxy seperti https://api.allorigins.win/raw?url= atau server proxy sendiri)\n\n'); // coba langsung dulu; jika gagal, user bisa gunakan proxy try { const txt = await fetchUrl(target); show(txt); } catch (err) { show('Gagal langsung ambil: ' + err.message + '\n\nMencoba via proxy public allorigins...'); // fallback ke allorigins try { const proxy = 'https://api.allorigins.win/raw?url=' + encodeURIComponent(target); const txt2 = await fetchUrl(proxy); show(txt2); } catch (err2) { show('Gagal ambil via proxy juga: ' + err2.message + '\n\nSolusi: pakai proxy/CORS-own server atau ambil source server-side.'); } } }); copyBtn.addEventListener('click', ()=>{ area.select(); try{ document.execCommand('copy'); copyBtn.textContent = 'Copied ✓'; setTimeout(()=> copyBtn.textContent = 'Copy',1200); }catch(e){ copyBtn.textContent = 'Copy failed'; setTimeout(()=> copyBtn.textContent = 'Copy',1200); } }); dlBtn.addEventListener('click', ()=>{ const blob = new Blob([area.value], {type:'text/html'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = (document.title||'source') + '.html'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); }); })(); </script> </body> </html>


🕵️ Preview Code disana
👇

di


Komentar untuk View source Code

View source Code Berhasil Disalin
Tunggu 15 detik