Show HTML/java codes in blogger blog posts

Home » Blogger Tutorial » HTML Tutorial » Show HTML/java codes in blogger blog posts

Show HTML/java codes in blogger blog posts

As many of you know, who use blogger that if you try and put the code as it is straight into your post, it likely will not show up (Especially javascript) or the browser will read the code and execute it, instead of displaying the code itself.If you want to create special boxes for those HTML codes so that the code will remain 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;
}

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.

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