How to create a code block on Blogger

This thing has been my problem since the day I started blogging how to display HTML, CSS or Javascript code block on Blogger. This is when you paste your code on the Blogger editor it gets interpreted as code and don’t display as you wanted it to be a sample code. Now I assure you that I found the easiest way to resolve that problem. Hit on the continue link to see the steps in displaying code block on Blogger.

  1. Be sure that you already log on to your blogger account. Then go to Layout–>Edit HTML tab.
  2. Search for this code: </style>
  3. Then after you find it, just before that paste this code:
    .post code {
    width: 500px;
    font-family: Courier;
    margin:.75em 0;
    border:1px solid #596;
    border-width:1px 1px;
    padding:5px 15px;
    display: block;
    background-color: #202020;
    white-space: pre;
    }
  4. Then save your template.

This piece of code we add is the code block format you can further customized it if you want.

The main problem here is that the editor interpret the HTML (or any language) special characters as code. So to eliminate those special character we have to encode the piece of code by going to this HTML Encoder.

  1. Just copy your code to the Encode input text box.
  2. Then click Encode.
  3. Copy the encoded piece of code.

Now after you have encode the piece of code you want to display.

  1. Go to Posting–>New Post.
  2. Type or copy your article you need to post.
  3. Then go to Edit Html tab of your editor (upper right).
  4. Paste there the encoded code, enclosed in <code> </code>
  5. After that Publish Post.
  6. Then view your article.

As usual I can lend open hand if things didn’t go right on your implementation.

  • AutoGeeze

    Great finally I found what I've been searching for.

  • TechGeeze | Latest Gadgets

    Now I was trying to test something so I'm writing this on the comment form. Anything great thing you post this thing. I almost lose myself finding the solution to display a piece of code on blogger.

  • coach handbags

    The article is good and very helpful as it encourages user to contribute and is a very good way to clean your do follow lists.Thank you SO MUCH for the list you created.

  • BloggerGeeze

    No problem, just let me know if you need any other help.

  • Does it still work? I will try to implement this on my tutorial blog. 🙂 Thanks

  • Stokescomp

    This is very useful

  • very very useful.