Skip to main content

How to Show JavaScript or HTML Code on Blogger Blog Posts

When I started blogging I felt difficulty with showing codes (both JavaScript code and HTML code) on blog posts. When ever I type codes on posts, Blogger automatically starts interpreting it even if I select the option Show HTML literally under Blogger post settings options. So I was forced to show the codes as images rather than in text format. Then I realized a way to convert the script in to parsed form by converting certain characters of the code in to escape characters. After converting a script in to escaped version, we can show it on blog without having any trouble. This tutorial explains how to convert a script in to parsed form and show inside the blog posts.

How to Display Code on Blogger Posts
In order to display codes on blogger blog you should convert them to escaped characters and show them under the HTML tag  pre as shown below.

<pre> code in escaped characters </pre>

Now let us check how to convert a script in to escaped form.

How to Convert HTML/Java Script code in to Escaped Characters
You can simply parse a script in to escaped format by following the changes given below.
  • < must be changed with  &lt;

  • > should be changed with &gt;

  • should be changed with &quot;
In case if the script is too big to convert manually, you can use any tools which convert a Java script or HTML script in to escaped version. The following links will help you to convert normal HTML and JavaScript codes in to Escaped Characters automatically.

Showing JavaScript and HTML codes in plain text format will be useful for the readers compared to give them codes in image format. It will reduce the time of readers to apply the codes to their blogspot template by just copy and paste it directly from our tutorial. In the same way if you are looking for a way to improve your blogger  traffic by optimizing the template, follow the link below.
How to Optimize Blogger Page Title by tweaking Blogger Template

If you are looking for a way to reverse the order of blog posts arranged in blogger, follow the link below.
 How to Show Last Blog Articles First on Blogger 

You might be curious to know the AdSense potential of your website. To learn the actual earning potential of your website you should find the CPC value of it. To calculate it correctly click on the link below.
 How to Calculate CPC of AdSense Ads Shown on Your Blog