Kode Script CV Builder For Blogger

Free CV Builder

Script ini berfungsi untuk membuat Curriculum Vitae secara otomatis, anda hanya perlu mengisi bagian yang diperlukan maka script akan otomatis menggenerate CV untuk anda.

📄 HTML CODE

<style>
    :root{
      --bg:#f7f7fb;
      --card:#fff;
      --accent:#0f62fe;
      --muted:#6b7280;
    }

    body{
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
      background:var(--bg);
      margin:0;
      padding:24px;
      color:#111;
    }

    /* WRAPPER LAYOUT (builder atas, preview bawah di mobile) */
    .wrap{
      max-width:1100px;
      margin:0 auto;
      display:grid;
      grid-template-columns:1fr;
      gap:24px;
    }

    /* DESKTOP MODE = 2 kolom */
    @media(min-width:900px){
      .wrap{
        grid-template-columns:1fr 480px;
      }
    }

    .panel{
      background:var(--card);
      border-radius:12px;
      padding:18px;
      box-shadow:0 6px 18px rgba(12,20,40,0.06);
    }

    h2{
      margin:0 0 12px;
      font-size:18px;
    }

    label{
      display:block;
      font-size:13px;
      color:var(--muted);
      margin-top:10px;
    }

    input[type=text],
    textarea{
      width:100%;
      padding:8px 10px;
      border-radius:8px;
      border:1px solid #e6e9ef;
      margin-top:6px;
      font-size:14px;
    }

    textarea{
      min-height:80px;
      resize:vertical;
    }

    .row{
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .btn{
      display:inline-block;
      padding:8px 12px;
      border-radius:8px;
      border:0;
      background:var(--accent);
      color:#fff;
      font-weight:600;
      cursor:pointer;
    }

    .btn.ghost{
      background:transparent;
      color:var(--accent);
      border:1px solid rgba(15,98,254,0.20);
    }

    .small{ font-size:13px; padding:6px 10px; }

    .list{margin-top:10px}

    .entry{
      border:1px dashed #e6e9ef;
      padding:10px;
      border-radius:8px;
      margin-top:10px;
    }

    .preview-wrap{
      padding:18px;
      overflow:auto;
      height:auto;
    }

    @media(min-width:900px){
      .preview-wrap{
        height:80vh;
      }
    }

    /* Resume styles */
    .resume{
      background:#fff;
      padding:28px;
      border-radius:8px;
      min-height:400px;
      color:#111;
    }

    .resume .header{
      display:flex;
      flex-direction:column;
      align-items:center;
    }

    .name{
      font-size:22px;
      font-weight:700;
    }

    .title{color:var(--muted);margin-top:4px}

    .section{margin-top:18px}

    .section h3{margin:0;font-size:14px}

    .muted{color:var(--muted);font-size:13px}

    .flex-between{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }

    /* PRINT MODE */
    @media print{
      body{background:white}
      .wrap, .panel{display:none}
      .resume{
        box-shadow:none;
        border-radius:0;
        padding:0;
      }
    }
  </style>
<div class="wrap">

    <!-- BUILDER -->
    <div class="panel">

      <label>Nama lengkap</label>
      <input id="fullname" type="text" value="Nurlisana Shidqi Saili" />

      <label>Judul / Posisi</label>
      <input id="title" type="text" value="Perencana Wilayah &amp; Kota" />

      <label>Kontak singkat</label>
      <input id="contact" type="text" value="nurlisana@example.com • +62 812 3456 7890 • Riau" />

      <label>Ringkasan profesional</label>
      <textarea id="summary">Perencana wilayah dan kota dengan pengalaman lebih dari 10 tahun dalam konsultasi, perencanaan tata ruang, dan analisis GIS.</textarea>

      <div class="section">
        <h3>Pengalaman Kerja</h3>
        <button class="btn small" id="addExp">+ Tambah</button>
        <div class="list" id="exps"></div>
      </div>

      <div class="section">
        <h3>Pendidikan</h3>
        <button class="btn small" id="addEdu">+ Tambah</button>
        <div class="list" id="edus"></div>
      </div>

      <div class="section">
        <h3>Keahlian (pisahkan koma)</h3>
        <input id="skills" type="text" value="GIS, AutoCAD, QGIS, Analisis Ruang" />
      </div>

      <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 16px;">
        <button class="btn" id="downloadJson">Download JSON</button>
        <button class="btn ghost" id="printPdf">Download / Cetak PDF</button>
        <button class="btn small" id="copyHtml">Copy HTML</button>
        <button class="btn small ghost" id="resetBtn">Reset</button>
      </div>

      <div style="color: var(--muted); font-size: 13px; margin-top: 10px;">
        Tips : Jika ingin tools ini silahkan download

<!-- SETTING TOMBOL -->
<style>
.download-btn{
  display:inline-block;
  padding:10px 16px;
  background:#0b6efd;
  color:#fff;
  text-decoration:none;
  border-radius:6px;
  font-family:Arial, sans-serif;
}
.download-btn:hover{ opacity:0.9; }
</style>
</center>
      </div>
    </div>

    <!-- PREVIEW -->
    <div class="panel preview-wrap">
      <h2 style="margin: 0 0 10px; text-align: center;">Preview</h2>
      <div class="muted" style="margin-bottom: 10px; text-align: center;">
        Live preview yang akan dicetak
      </div>

      <div class="resume" id="preview"></div>
    </div>

  </div>

  <!-- Templates -->
  <template id="expTpl">
    <div class="entry">
      <div class="row">
        <input class="exp-role" placeholder="Jabatan / Peran" type="text" />
        <input class="exp-company" placeholder="Perusahaan / Organisasi" type="text" />
      </div>
      <input class="exp-date" placeholder="Tahun (ex: 2020–2023)" style="margin-top: 8px;" type="text" />
      <label>Deskripsi</label>
      <textarea class="exp-desc" placeholder="Ringkasan tugas"></textarea>
      <button class="btn small ghost removeExp" style="margin-top: 8px;">Hapus</button>
    </div>
  </template>

  <template id="eduTpl">
    <div class="entry">
      <div class="row">
        <input class="edu-degree" placeholder="Gelar / Program Studi" type="text" />
        <input class="edu-school" placeholder="Nama Sekolah" type="text" />
      </div>
      <input class="edu-date" placeholder="Tahun (ex: 2012–2016)" style="margin-top: 8px;" type="text" />
      <label>Keterangan (opsional)</label>
      <input class="edu-note" placeholder="Keterangan singkat" type="text" />
      <button class="btn small ghost removeEdu" style="margin-top: 8px;">Hapus</button>
    </div>
  </template>

  <script>
    const $ = id=>document.getElementById(id)
    const exps = $('exps')
    const edus = $('edus')
    const preview = $('preview')
    const tplExp = document.getElementById('expTpl')
    const tplEdu = document.getElementById('eduTpl')

    function createEntry(container, tpl){
      container.appendChild(tpl.content.cloneNode(true))
      attachListeners()
      refreshPreview()
    }

    function attachListeners(){
      document.querySelectorAll('.removeExp')
        .forEach(btn=>btn.onclick=e=>{ e.target.closest('.entry').remove(); refreshPreview() })

      document.querySelectorAll('.removeEdu')
        .forEach(btn=>btn.onclick=e=>{ e.target.closest('.entry').remove(); refreshPreview() })

      document.querySelectorAll('.entry input, .entry textarea')
        .forEach(e=>e.oninput=refreshPreview)
    }

    function escape(str){
      return (str||"").replace(/&/g,"&amp;").replace(/</g,"&lt;")
    }

    function buildResume(){
      const full = escape($('fullname').value)
      const title = escape($('title').value)
      const contact = escape($('contact').value)
      const summary = escape($('summary').value)
      const skills = $('skills').value.split(',').map(s=>s.trim()).filter(Boolean)

      let html = `
        <div class="header">
          <div class="name">${full}</div>
          <div class="title">${title}</div>
          <div class="muted">${contact}</div>
        </div>
      `

      if(summary){
        html += `<div class="section"><h3>Ringkasan</h3><div class="muted">${summary}</div></div>`
      }

      const ex = [...document.querySelectorAll('#exps .entry')].map(e=>({
        role:e.querySelector('.exp-role').value,
        company:e.querySelector('.exp-company').value,
        date:e.querySelector('.exp-date').value,
        desc:e.querySelector('.exp-desc').value
      }))

      if(ex.length){
        html += `<div class="section"><h3>Pengalaman Kerja</h3>`
        ex.forEach(v=>{
          html += `
            <div style="margin-top:8px">
              <div class="flex-between">
                <strong>${escape(v.role)}</strong>
                <div class="muted">${escape(v.company)} • ${escape(v.date)}</div>
              </div>
              <div class="muted">${escape(v.desc)}</div>
            </div>`
        })
        html += `</div>`
      }

      const ed = [...document.querySelectorAll('#edus .entry')].map(e=>({
        degree:e.querySelector('.edu-degree').value,
        school:e.querySelector('.edu-school').value,
        date:e.querySelector('.edu-date').value,
        note:e.querySelector('.edu-note').value
      }))

      if(ed.length){
        html += `<div class="section"><h3>Pendidikan</h3>`
        ed.forEach(v=>{
          html += `
            <div style="margin-top:8px">
              <div class="flex-between">
                <strong>${escape(v.degree)}</strong>
                <div class="muted">${escape(v.school)} • ${escape(v.date)}</div>
              </div>
              <div class="muted">${escape(v.note)}</div>
            </div>`
        })
        html += `</div>`
      }

      if(skills.length){
        html += `<div class="section"><h3>Keahlian</h3><div class="muted">${skills.join(', ')}</div></div>`
      }

      return html
    }

    function refreshPreview(){
      preview.innerHTML = buildResume()
    }

    // BUTTON EVENTS
    $('addExp').onclick = ()=>createEntry(exps, tplExp)
    $('addEdu').onclick = ()=>createEntry(edus, tplEdu)

    document.querySelectorAll('input, textarea')
      .forEach(el=>el.oninput = refreshPreview)

    $('downloadJson').onclick = ()=>{
      const data = preview.innerText
      const blob = new Blob([data], {type:"application/json"})
      const a = document.createElement('a')
      a.href = URL.createObjectURL(blob)
      a.download = "resume.json"
      a.click()
    }

    $('printPdf').onclick = ()=>{
      const w = window.open('')
      w.document.write("<style>body{font-family:Arial;padding:20px}</style>"+preview.outerHTML)
      w.print()
    }

    $('copyHtml').onclick = ()=>{
      navigator.clipboard.writeText(preview.innerHTML)
      alert("HTML berhasil disalin!")
    }

    $('resetBtn').onclick = ()=>location.reload()

    // first load
    createEntry(exps, tplExp)
    createEntry(edus, tplEdu)
    refreshPreview()
  </script>
  

🔍 Live Preview