How to display HTML Code in blogger post

Surely you’ve seen that I often feature the programming codes such as HTML, CSS, Javascript, PHP and others on this blog, haven’t you?

Need a special technique to display the HTML code in blog posts, because if you just directly copy paste the code to your posts editor, then you will find the blank page without any code.

Display HTML code in Blogger post

In order to display HTML, Javascript, CSS, PHP and other codes in post page, you need to parse or modify the existing code with the entity of those codes.
The following table are some of the entities that often used:

Characters	Entity (Name Code)	Entity (Number Code)	Remarks
<	&lt;	&#60;	less-than sign
>	&gt;	&#62;	greater-than sign
&	&amp;	&#38;	and
“	&quot;	&#34;	Double quote
±	&plusmn;	&#177;	Plus minus sign
Space	&nbsp;	&#160;	nonbreaking space
©	&copy;	&#169;	copyright
®	&reg;	&#174;	Registered

The most important, when you are about to enter the code you want to display, you should to click the Edit HTML first:

<pre>
............................
</pre>

or

<code>
............................
</code>

In order to be easier to understood, i take an example. If you want to display this following code:

<ul id="soc">
<li><a class="facebook" title="Be my facebook fan" href="http://www.facebook.com/pages/How-To-In-Blogger/166729273361572">Facebook</a></li>
<li><a class="twitter" title="Folow me on Twitter" href="http://twitter.com/howtoinblogger">Twitter</a></li>
<li><a class="rss" title="Subscribe via RSS" href="http://feeds.feedburner.com/howtoinblogger">rss</a></li>
<li><a class="email" title="Subscribe via Email" href="http://feedburner.google.com/fb/a/mailverify?uri=howtoinblogger">email</a></li>
</ul>

Then the code on your posts must be as follows:

<pre>
&lt;ul id=&quot;soc&quot;&gt;
&lt;li&gt;&lt;a class=&quot;facebook&quot; title=&quot;Be my facebook fan&quot; href=&quot;http://www.facebook.com/pages/How-To-In-Blogger/166729273361572&quot;&gt;Facebook&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;twitter&quot; title=&quot;Folow me on Twitter&quot; href=&quot;http://twitter.com/howtoinblogger&quot;&gt;Twitter&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;rss&quot; title=&quot;Subscribe via RSS&quot; href=&quot;http://feeds.feedburner.com/howtoinblogger&quot;&gt;rss&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;email&quot; title=&quot;Subscribe via Email&quot; href=&quot;http://feedburner.google.com/fb/a/mailverify?uri=howtoinblogger&quot;&gt;email&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

HTML Parse Tool

To make your work more easy and not wasting time, you can do the parse using HTML parse tool which avalable on our blog. Please to open the HTML Parse Tool page..
You just need to enter the HTML code you want to parse then click Parse Code button and your HTML code will immediately be parsed.


Good luck!

Categories: Tutorial