Putting a Code Box On Blogger Posts

technology.pngThis is largely derived this blog post from 2009, but the code was slightly borked, so here’s a fix. (If you’re looking at this on Facebook or somewhere else and it looks strange, swing by https://ideatrash.net/2012/11/putting-code-box-on-blogger-posts.html to see it properly.

If you’ve ever tried to paste a commandline or HTML into a Blogger blog, you’ve ended up with missing characters, weird linewraps, and “smart quotes” where there shouldn’t be any.  This frustrates readers and makes you look like an idiot.

There’s a couple of ways to get around this.

The first is to store snippets of code in something like Pastebin (which I’ve used in the past), but a better (and more professional) option is to use GitHub.  While GitHub is a bit overpowered for code snippets alone, it allows you the flexibility to do and save a lot more if you ever get into it.  Make a free account, and then click on the “Gist” button at the top.  You’ll get a nice place to post your code.  And I think this is cool – you can also “star” the gists you use to help keep track of them later.

But what if it’s just a commandline?  You’ve got some options:

NOTE: If you experience problems with brackets and ampersands, you would want to use this online urlencoder. It’s how I created the little bit of code below.

  1. Ad-hoc simple (but ugly) solution:
    Click the HTML tab at the top of the compose window. Then paste these lines:

<textarea name=”textarea” cols=”40″ rows=”4″ wrap=”VIRTUAL”>

Example of what it looks like.

  1. Edit your blog’s HTML code.
    a. Follow this guide to get to where you press “Edit HTML”.
    b. Then Find (press CTRL+F) this: ]]></b:skin>
    c. Add this code ABOVE ]]></b:skin>
/* Code Box
———————————————– */

.code {
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px ‘Courier New’, Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 10px 10px 10px; width: 90%;

.code:hover {
background: #FAFAFA;

d. Click Save Template.

Then when you go to post your code, click the HTML tab, and just paste this code:

<div class=”code”>

blankWas this post helpful or insightful? Buy me a coffee here or here and share this post with others!

Popular posts:

  • The difference between boundaries and rules
  • Two Ways to get CMYK Separation Using GIMP Instead of Photoshop in 2022
  • Weekend Project: Whole House and Streaming Audio for Free with MPD
  • Word Porn Quotes
  • Organizing and Tiling Your Windows on #Openbox Using Only... Openbox
  • Simple Smart Playlists for MPD (that work!)

Recent Posts


  1. Sulthan A
    February 23, 2016

    Thank you. that works fine in my blog

  2. George
    July 30, 2016

    Thank you very much, this is wah I hve been looking for. Finally I find this.

  3. November 9, 2017

    Thank You. It works in my blog.
    I have alternate method.
    Just go to your Theme>Customize>Add CSS
    Then paste all Codes.

Comments are closed.