Script Untuk Posting Kode HTML Agar Lebih Elegan

Script Publikasi Kode HTML

Script ini bertujuan untuk mempercantik Publikasi Script / Kode HTML Yang anda bagikan, silahkan Copy dan Paste ke Postingan Blog dalam Mode HTML View sedangkan untuk mengisi kode script dalam mode Compose View (Jangan Terbalik).

Agar lebih aman copy dan paste kode dibawah <style> sampai dengan </style> letakkan di template blogger dan tepat diatas kode </style> yang pertama, jika terdapat beberapa kode </style> didalam template anda.  

📄 HTML CODE

<style>
/* === CODING POST STYLE By GISTARIAU.com === */
.coding-title{
  font-size:24px;
  margin:25px 0 10px;
}
.coding-desc{
  background:#f8f9fa;
  padding:15px;
  border-left:4px solid #0d6efd;
  margin-bottom:20px;
  line-height:1.7;
}
.coding-wrapper{
  background:#1e1e1e;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:20px;
}
.coding-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 15px;
  background:#2c2c2c;
  color:#fff;
  font-size:14px;
}
.coding-header span{
  font-weight:600;
}
.coding-header button{
  background:#0d6efd;
  border:none;
  color:#fff;
  padding:5px 10px;
  margin-left:5px;
  border-radius:5px;
  cursor:pointer;
}
.coding-header button:hover{
  opacity:.85;
}
.coding-body{
  display:none;
  margin:0;
  padding:15px;
  overflow-x:auto;
  font-size:14px;
  color:#f1f1f1;
  line-height:1.6;
}
.coding-body code{
  white-space:pre;
}
.coding-preview{
  margin-top:15px;
}
.coding-preview h4{
  margin-bottom:8px;
}
</style>
<!-- === 1. JUDUL CODE === -->
<h2 class="coding-title">
  Judul Script Anda
</h2>

<!-- === 2. PENJELASAN === -->
<div class="coding-desc">
  <p>
    Deskripsi Script atau Kode HTML Anda!
  </p>
</div>
<p>
<span style="
font-size:0;
line-height:0;
color:transparent;
user-select:text;
white-space:nowrap;
">
&#83;&#117;&#109;&#98;&#101;&#114;&#32;&#97;&#114;&#116;&#105;&#107;&#101;&#108;&#58;&#8203;
<a href="&#104;&#116;&#116;&#112;&#115;&#58;&#47;&#47;&#119;&#119;&#119;&#46;&#103;&#105;&#115;&#116;&#97;&#114;&#105;&#97;&#117;&#46;&#99;&#111;&#109;&#47;" target="_blank" rel="noopener">
&#71;&#73;&#83;&#84;&#65;&#82;&#73;&#65;&#85;&#46;&#99;&#111;&#109;
</a>
</span>
</p>


<!-- === 3. CODE HTML === -->
<div class="coding-wrapper">

  <div class="coding-header">
    <span>📄 HTML CODE</span>
    <div>
      <button onclick="toggleCode(this)">Show</button>
      <button onclick="copyCode(this)">Copy</button>
    </div>
  </div>

  <pre class="coding-body"><code>
ISI DENGAN KODE SCRIPT
  </code></pre>

</div>

<!-- === 4. PREVIEW CODE (CODEPEN) === -->
<div class="coding-preview">
  <h4>🔍 Live Preview</h4>
  <iframe
    height="350"
    style="width:100%; border:1px solid #ddd; border-radius:8px;"
    scrolling="no"
    loading="lazy"
    title="Preview Code"
    src="ISI DENGAN LINK PUBLIKASI codepen.io"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

<!-- === SCRIPT FUNGSI === -->
<script>
function toggleCode(btn){
  var box = btn.closest('.coding-wrapper');
  var body = box.querySelector('.coding-body');
  if(body.style.display === 'block'){
    body.style.display = 'none';
    btn.innerText = 'Show';
  }else{
    body.style.display = 'block';
    btn.innerText = 'Hide';
  }
}

function copyCode(btn){
  var code = btn.closest('.coding-wrapper').querySelector('code').innerText;
  navigator.clipboard.writeText(code);
  btn.innerText = 'Copied!';
  setTimeout(function(){
    btn.innerText = 'Copy';
  },1500);
}
</script>
  

🔍 Live Preview