Skip to main content

9+ Defferent Style HTML Code Box For Blogger Blog

9+ Different Style HTML Code Box for Blogger Blog helps you display HTML, CSS, and JavaScript code in a clean, readable, and professional way. Stylish code boxes improve user experience by making code easy to read, copy, and understand. They also make your blog look more modern and developer-friendly. Whether you are sharing tutorials, widgets, or scripts, using different styled code boxes can increase engagement and reduce confusion for your readers.

How To Add HTML Code Box In Blogger Blog : 


Follow these simple steps to add a stylish HTML code box to your Blogger post :

  • Step 1 : Log in to your Blogger Dashboard and select your blog.
  • Step 2 : Click on New Post or open an existing post where you want to add the code box.
  • Step 3 : In the post editor, click on HTML View (not Compose view).
  • Step 4 : Paste the HTML + CSS + JavaScript code box code at the desired location inside the post.
  • Step 5 : Replace the sample text inside the <pre><code> section with your own HTML, CSS, or JavaScript code.
  • Step 6 : Switch back to Compose view (optional), check the preview, and click Publish.

Minimal Diary Page Style HTML Code Box For Blogger Blog (1)

<style>
.diary-note{
  background:#fff;
  padding:24px;
  margin:25px 0;
  font-family:monospace;
  border:1px solid #e5e7eb;
  box-shadow:0 6px 12px rgba(0,0,0,.12);
}
.diary-note small{
  color:#6b7280;
  display:block;
  margin-bottom:10px;
}
</style>

<div class="diary-note">
<small>Code Note</small>
<pre><code>Paste HTML Javascript Code Here</code></pre>
</div>


Handwritten Note Card Style HTML Code Box For Blogger Blog (2)

<style>
.hand-note{
  background:#fff;
  padding:22px;
  margin:25px 0;
  border-radius:12px;
  border:1px dashed #d1d5db;
  font-family:"Courier New",monospace;
}
</style>

<div class="hand-note">
<pre><code>Paste HTML Javascript Code Here</code></pre>
</div>


Spiral Notebook Style HTML Code Box For Blogger Blog (3)

<style>
.spiral-note{
  background:#fff;
  border:1px solid #e5e7eb;
  padding:20px 20px 20px 40px;
  margin:25px 0;
  font-family:monospace;
  position:relative;
}
.spiral-note:before{
  content:"";
  position:absolute;
  left:10px;
  top:0;
  bottom:0;
  width:10px;
  background:radial-gradient(circle,#9ca3af 2px,transparent 2px);
  background-size:10px 20px;
}
</style>

<div class="spiral-note">
<pre><code>Paste HTML Javascript Code Here</code></pre>
</div>


Torn Paper Style HTML Code Box For Blogger Blog (4)

<style>
.torn-note{
  background:#fff;
  padding:20px;
  margin:25px 0;
  font-family:monospace;
  box-shadow:0 8px 18px rgba(0,0,0,.15);
  position:relative;
}
.torn-note:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:10px;
  background:repeating-linear-gradient(
    -45deg,#fff,#fff 6px,#e5e7eb 6px,#e5e7eb 8px
  );
}
</style>

<div class="torn-note">
<pre><code>Paste HTML Javascript Code Here</code></pre>
</div>


Exam Copy Style HTML Code Box For Blogger Blog (5)

<style>
.exam-note{
  background:#fff;
  border:1px solid #e5e7eb;
  border-left:6px solid #ef4444;
  padding:18px;
  margin:25px 0;
  font-family:monospace;
}
</style>

<div class="exam-note">
<pre><code>Paste HTML Javascript Code Here</code></pre>
</div>


Ruled Notebook Style HTML Code Box For Blogger Blog (6)

<style>
.ruled-note{
  background:#fff;
  border:1px solid #e5e7eb;
  padding:20px;
  margin:25px 0;
  font-family:monospace;
  line-height:1.8;
  background-image:linear-gradient(#e5e7eb 1px, transparent 1px);
  background-size:100% 28px;
}
</style>

<div class="ruled-note">
<pre><code>Paste HTML Javascript Code Here</code></pre>
</div>


Window App Style HTML Code Box For Blogger Blog (7)

<style>
.win-box{
  background:#f3f4f6;
  border-radius:14px;
  margin:25px 0;
  font-family:monospace;
  box-shadow:0 10px 20px rgba(0,0,0,.2);
}
.win-head{
  background:#e5e7eb;
  padding:8px 12px;
  border-radius:14px 14px 0 0;
  display:flex;
  gap:6px;
}
.win-head span{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
}
</style>

<div class="win-box">
  <div class="win-head">
    <span style="background:#ef4444"></span>
    <span style="background:#facc15"></span>
    <span style="background:#22c55e"></span>
  </div>
  <pre style="padding:14px;margin:0;"><code>Paste HTML Javascript Code Here</code></pre>
</div>


Mobile App Card Style HTML Code Box For Blogger Blog (8)

<style>
.app-box{
  background:#ffffff;
  border-radius:22px;
  padding:16px;
  margin:25px 0;
  font-family:monospace;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.app-title{
  font-weight:700;
  margin-bottom:10px;
  color:#3b82f6;
}
</style>

<div class="app-box">
  <div class="app-title">JS Snippet</div>
  <pre><code>Paste HTML Javascript Code Here</code></pre>
</div>


Black Background Style HTML Code Box For Blogger Blog (9)

<!-- Stylish Code Box Start -->
<style>
.code-box{
  background:#0f172a;
  border-radius:14px;
  margin:25px 0;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-family:Consolas,monospace;
}
.code-box-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:#020617;
  color:#38bdf8;
  font-size:14px;
  font-weight:600;
}
.copy-btn{
  background:#38bdf8;
  color:#020617;
  border:none;
  padding:5px 12px;
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
}
.copy-btn:hover{
  background:#0ea5e9;
}
.code-box pre{
  margin:0;
  padding:16px;
  color:#e5e7eb;
  font-size:13px;
  line-height:1.6;
  overflow-x:auto;
}
@media(max-width:600px){
  .code-box pre{font-size:12px;}
}
</style>

<div class="code-box">
  <div class="code-box-header">
    <span>HTML / JavaScript Code</span>
    <button class="copy-btn" onclick="copyCode(this)">Copy</button>
  </div>
  <pre><code>
Paste HTML Javascript Code Here 
  </code></pre>
</div>

<script>
function copyCode(btn){
  let code = btn.parentElement.nextElementSibling.innerText;
  navigator.clipboard.writeText(code);
  btn.innerText = "Copied!";
  setTimeout(()=>btn.innerText="Copy",2000);
}
</script>
<!-- Stylish Code Box End -->


White Background Style HTML Code Box For Blogger Blog (10)

<!-- White Stylish Code Box Start -->
<style>
.code-box{
  background:#ffffff;
  border-radius:14px;
  margin:25px 0;
  overflow:hidden;
  border:1px solid #e5e7eb;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  font-family:Consolas,monospace;
}
.code-box-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:#f9fafb;
  color:#2563eb;
  font-size:14px;
  font-weight:600;
  border-bottom:1px solid #e5e7eb;
}
.copy-btn{
  background:#2563eb;
  color:#ffffff;
  border:none;
  padding:5px 12px;
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
}
.copy-btn:hover{
  background:#1d4ed8;
}
.code-box pre{
  margin:0;
  padding:16px;
  color:#111827;
  font-size:13px;
  line-height:1.7;
  overflow-x:auto;
  background:
    linear-gradient(#e5e7eb 1px, transparent 1px);
  background-size:100% 28px; /* notebook lines */
}
@media(max-width:600px){
  .code-box pre{font-size:12px;}
}
</style>

<div class="code-box">
  <div class="code-box-header">
    <span>HTML / JavaScript Code</span>
    <button class="copy-btn" onclick="copyCode(this)">Copy</button>
  </div>
  <pre><code>
Paste HTML JavaScript Code Here
  </code></pre>
</div>

<script>
function copyCode(btn){
  let code = btn.parentElement.nextElementSibling.innerText;
  navigator.clipboard.writeText(code);
  btn.innerText = "Copied!";
  setTimeout(()=>btn.innerText="Copy",2000);
}
</script>
<!-- White Stylish Code Box End -->


Using 9+ different style HTML code boxes in Blogger is the best way to present code professionally without using any plugin. These code boxes are lightweight, responsive, and fully compatible with Blogger themes. If you regularly share tutorials or scripts, stylish code boxes will make your content more readable, attractive, and user-friendly.
Labels:

Comments

Post a Comment