How to display html code in blog post

Suppose you are writing a article which includes HTML code and that code you want to share with rest of the world. But displaying HTML Code on a webpage is not easy because the browser tends to interpret the HTML tags instead of displaying them. It will be simple to understand the reason behind it if we know how does the browser know something is an HTML tag? Browser looks for opening and closing brackets that starts and ends a tag. So those brackets (i.e. < & >) are the key. Now it is obvious that if we change those starting and ending brackets sign with something else, our problem will be solved.

Solution:

1. Replace < (i.e. less than sign) with &lt;

2. Replace > (i.e. greater than sign) with &gt;

3. Replace “ (i.e. quote mark) with &quot;

Example:

We want to display the code below on our webpage –

<a href=http://topaix.blogspot.com/>Digital Knowledge Center</a>

We would replace <> sign with &lt; and &gt; respectively. The result will look like this –

<a href=http://topaix.blogspot.com/>Digital Knowledge Center</a>

Making links in a Blogger Beta link list open in new window

In Blogger Beta, if you add a Link List, the links created open in the same folder by default.

Here is how you can make links open in new windows/tabs. Sign into Dashboard, for the relvant blog, click LAYOUT, then EDIT TEMPLATE. Check EXPAND WIDGET TEMPLATES. Look for this block of codes:


<b:widget id='LinkList1' locked='false' title='Blogger Resources' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<div id='link'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' ><data:link.name/></a></li>
</b:loop>
</div>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>



Look particularly for this code:
<li><a expr:href='data:link.target' ><data:link.name/></a>

Replace it with
<li><a expr:href='data:link.target'target="_blank"><data:link.name/></a> //in other words, add target="_blank" after expr:href='data:link.target'. Make sure there is a space between them (see update).

Save template and check that the links actually open in a new window. This has been done for this blog. Try clicking on the links in the link lists (Blogger Resources) and confirm that they actually open in a new window/tab.

Note: As always, whenever you make changes to the template, backup the current template first.

UPDATE: 2 person commented of problems executing this hack. Read the comments. I retested it for this blog Good Health Information and confirmed the hack work. Check for yourself. The link list is titled "Blogger Resources" and is the second last in the right sidebar. Click on the links and confirm for yourself that they open in new windows/tabs. Just a note. Make sure that there is a space between
expr:href='data:link.target'
and
target="_blank".
AddThis Social Bookmark Button