How To Make Code Box In Blogger

Code Box stands as a robust and adaptable text editor meticulously crafted to elevate your coding journey. Boasting a sleek and user-friendly interface, it offers a frictionless space for crafting, refining, and structuring your code. Laden with functionalities like syntax highlighting, auto-completion, and seamless integration with version control, Code Box is tailored to amplify your efficiency and facilitate the creation of top-notch code with ease. Whether you're a seasoned coder or embarking on your coding odyssey, Code Box emerges as the quintessential tool to breathe life into your concepts, transforming coding into a more enjoyable and productive experience.

Step To Make Code Box In Blogger

Step 1: Go and login to your Blogger Dashboard

Step 2: In Blogger Dashboard, Go to Themes section 

Step 3: Now click on the drop down icon just beside the 'Customize' button.

Step 4: Click on 'Edit HTML', now you'll be redirected to the editing page.

Step 5: Search for ]]></b:skin> and paste the following CSS Just above it.

/* Code Box CSS By ItIsUniqueBlog.Com */
.code-box{max-width:100%;width:100%;background-color:#ffffff;border:1px solid #e0e0e0;border-radius:5px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.code-header{background-color:#f1f1f1;padding:10px;text-align:center;font-size:18px;border-bottom:1px solid #e0e0e0}
.code-content{padding:20px;overflow-x:auto}
.code-actions{text-align:center;padding:10px;background-color:#f1f1f1}
.copy-button{padding:8px 16px;background-color:#4caf50;color:#ffffff;border:none;border-radius:4px;cursor:pointer;font-size:14px}

Step 6: Search for </body> and paste the following JavaScript Just above it.

<script>/*Code Box JavaScript By ItIsUniqueBlog.Com */function copyCode(){var e=document.getElementById("code"),t=document.createRange();t.selectNode(e),window.getSelection().removeAllRanges(),window.getSelection().addRange(t),document.execCommand("copy"),window.getSelection().removeAllRanges(),alert("Code copied to clipboard!")}</script>

Step 7: Save the changes by clicking on this icon .

Typography For Code Box

The following HTML code provides a typographic style for embedding code in your web pages or posts.

<div class="code-box">
  <div class="code-header">#_Your_Code_Name</div>
  <div class="code-content">
    <pre id="code">#_Your_Code_Content</pre>
  </div>
  <div class="code-actions">
    <button class="copy-button" onclick="copyCode()">Copy to Clipboard</button>
  </div>
</div>

Conclusion

Explore the nuances of constructing a code box on the Blogger platform in this in-depth guide. Whether you're in search of assistance on "How To Make Code Box In Blogger" or "How To Create Code Box In Blogger," you've stumbled upon the ultimate reference. If you discover merit in this material, I invite you to express your thoughts in the comments section. Your feedback is immensely valued!