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.

2. 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">

Popular posts:

  • Word Porn Quotes
  • A voice of hope and faith: In Memoriam
  • The difference between boundaries and rules
  • SOLVED: Command line BPM (beats per minute) Analysis in Linux
  • Nihilism, existentialism, and me
  • If there's one Nazi (or a racist) at the table...
  • Whole house audio, easily, freely, for Linux and MacOSX using SnapCast


  1. February 23, 2016

    Thank you. that works fine in my blog

  2. 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.