How to show HTML/java codes in blogger(blogspot) blog posts

14 Flares 14 Flares ×

If you’re a blogspot platform blogger and want to show HTML source codes in your blog posts then you must had a hard time how to make it done. Check out Code BlogKori. You can see that I’ve created special boxes for those HTML codes and the code remains intact inside the post. It’s a nice trick for blogger platform if you’re willing to post tutorials and badges for your readers.

For this you have to take two simple steps,

Step 1

You have to add a special code inside your blogger template. Go to your blogger Dashboard > Layout > Edit HTML. Now hit CTRL+F on your keyboard and search this tag,

]]></b:skin>

Now you have to add this code above that code,

pre { background:#efefef; border:1px solid #A6B0BF; font-size:120%; line-height:100%; overflow:auto; padding:10px; color:#000000 } pre:hover { border:1px solid #efefef; } code { font-size:120%; text-align:left; margin:0;padding:0; color: #000000;} .clear { clear:both; overflow:hidden; }

Now it will look something like this,

After you done it, click the “Preview” button to see if your blog shows or not. If everything’s okay, then click, “Save template

Step 2

Now each time you create a post and you need to add some HTML codes inside your post, you have to convert it into escapable characters. For this go to this tool called Quick escape and insert your code. Click, “Convert to escaped character” the converted code will be different than the original.

Now create a new blog post and add the converted code. You have to enclosed the code with a “pre” tag(marked as blue) For this I’ve added the same code twice. One normally and the other one with the hack.

Publish your post and see the magic! The normal code showed up with the effect but the hacked on remained intact inside the table.

Please leave a comment with your response and any suggestion for this blogger hack. If you run into any trouble, feel free to ask me a question. Please do share/save this page if it helped you.

14 Flares Twitter 3 Facebook 5 Google+ 5 LinkedIn 0 Buffer 0 StumbleUpon 1 14 Flares ×

43 thoughts on “How to show HTML/java codes in blogger(blogspot) blog posts

  1. @scrollock
    @Sylvain
    @sansayan

    ~thanks for letting me know that. Blogspot has changed their HTML couple of times and glad that this tip still works!

  2. dear Tomal, please let us know how do yo give a different background colour for HTML code. in this post you have darker background for bellow code
    pre
    {
    background:#efefef;
    border:1px solid #A6B0BF;
    font-size:120%;
    line-height:100%;
    overflow:auto;
    padding:10px;
    color:#000000 }
    pre:hover {
    border:1px solid #efefef;
    }
    code {
    font-size:120%;
    text-align:left;
    margin:0;padding:0;
    color: #000000;}
    .clear { clear:both;
    overflow:hidden;
    }

    please let us know. thanks for help.
    .-= kamrul´s last blog ..Photo Post: My early days of blogging and how BlogKori started =-.

  3. Great post, thanks! I read about 10 different posts on solving this problem and yours was the best. The one thing that nobody seems to mention is that the final result is not visible until you a. publish the post, or b. preview the post.

    At least that is my experience. In other words, you go through the escaping of your code and it looks terrible in both the Edit HTML view and the Compose view. Only when you Publish or Preview do you see the final results. This is not a criticism of your instructions, which worked great for me. But Blogger really should include this stuff in the program.

    Thanks again…Stephen

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>