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. Whenever 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 into parsed form by converting certain characters of the code in to escape characters.

After converting a script into escaped version, we can show it on the blog without having any trouble. This tutorial explains how to convert a script into parsed form and show inside the blog posts.


How to Display Code on Blogger Posts
To display codes on a 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 into the escaped format.

How to Convert HTML/JavaScript code into Escaped Characters
You can simply parse a script into the 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 JavaScript or HTML script into the escaped version.

The following links will help you to convert normal HTML and JavaScript codes into 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.


  1. Tools To Check Historical Design Of a Website
  2. Can Guest Posts Attract Google Penalty?
  3. How to Increase Alexa Rank?
  4. How To Identify Low-Quality Backlinks?


It will reduce the time of readers to apply the codes to their Blogspot template. They can copy and paste it directly from our tutorial.


  1. Traffic Needed to Earn $100 Per Day From Google Adsense
  2. How to Increase HubPages Score
  3. How to Promote a Real Estate Website?
  4. Why Do They reject my AdSense Application?


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


  1. Show AdSense Ads Inside Blogger Post Content
  2. How to Change Link Color From Template Designer
  3. Remove Date Number (Year & Month Figure) From Post URL
  4. Average AdSense Revenue For an Indian Publisher


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 


  1. The Requested Operation Requires Elevation (Run as Administrator)
  2. Error 769: The Specified Destination is not Reachable
  3. Stop Redirecting Visitors From ?m=1 Blogspot Pages
  4. How to Activate Free HTTPS For Your Site


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.


  1. Different Methods to Access Device Manager
  2. Change COM Port Assigned to Modem on Your Computer
  3. Error 633: The Modem is Already in Use or not Configured Properly
  4. Either you Specified a Destination Address that is not Valid


To calculate it correctly click on the link below.
How to Calculate CPC of AdSense Ads Shown on Your Blog

Comments