HTML Code Box

 Aapki website ke liye ek modern, responsive aur "One-Click Copy" button wala Code Box snippet niche diya gaya hai. Isme dark coding theme aur copy animation shamil hai.

​Blogger ke kisi bhi post ya page mein HTML View mein ise paste karein:

Istemal Karne Ka Tarika:

​<code> aur </code> tag ke beech apna code dalein.

​Agar aap HTML code paste kar rahe hain, toh tag ke signs ko badlein:

​< ki jagah &lt;

​> ki jagah &gt;

(Aisa karne se Blogger code ko run karne ke bajay screen par display karega).

<--

HTML / CSS / JS

&lt;!-- <div class="code-container">
  <div class="code-header">
    <span class="code-lang">HTML / CSS / JS</span>
    <button class="copy-btn" onclick="copyBoxCode(this)">📋 Copy Code</button>
  </div>
  <pre class="code-content"><code>&lt;!-- Aapka code yahan paste karein --&gt;
&lt;div class="example"&gt;
  &lt;h1&gt;Hello World!&lt;/h1&gt;
&lt;/div&gt;</code></pre>
</div>

<style>
.code-container {
  background: #1e1e1e;
  border-radius: 8px;
  overflow: hidden;
  margin: 20px auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  font-family: Consolas, Monaco, 'Courier New', monospace;
  max-width: 100%;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2d2d2d;
  padding: 8px 16px;
  border-bottom: 1px solid #3e3e3e;
}

.code-lang {
  color: #9cdcfe;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.copy-btn {
  background: #007acc;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.copy-btn:hover {
  background: #005999;
}

.copy-btn:active {
  transform: scale(0.96);
}

.code-content {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  color: #d4d4d4;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre;
}

.code-content code {
  font-family: inherit;
}
</style>

<script>
function copyBoxCode(button) {
  const codeBlock = button.closest('.code-container').querySelector('.code-content code');
  const textToCopy = codeBlock.innerText;

  navigator.clipboard.writeText(textToCopy).then(() => {
    const originalText = button.innerHTML;
    button.innerHTML = '✅ Copied!';
    button.style.background = '#28a745';

    setTimeout(() => {
      button.innerHTML = originalText;
      button.style.background = '#007acc';
    }, 2000);
  });
}
</script>
 --&gt;
<div class="example">
  <h1>Hello World!</h1>
</div>

-->