Convert HTML code to use with blogger template

at 9:20 AM Labels:

Scroll Down to use the converter

Many times we might want to add some HTML code for adding boxes, lists or some logic using javascript in our blog. Doing so within a blog post is somewhat easy. Because we just have to paste the code in the "Edit HTML" view of the blog post editor. But how can we add it to the template, so that it will be available in all the posts ?

Here just pasting the code will not work most of the time.

Why ?

Blogger template has a format, in which some of the characters used in HTML code will be having some different meaning. Mostly problems occours with characters like ". These characters should be represented with special kewords in blogger template. 

Advantages of template format

  1. Posts are saved separately in a database which helps in adding/editing of posts easy and reduce the storage space required.
  2. If we want some to show something in all posts, we can add it in the template.
  3. We can easily change the look and feel of blog without touching the posts, just by changing the templates.
How templates work ? 

Templates are XML format files in which different entities of the blog post are represented by special keyword. For example, post.body represents the content of the post and post.title represents the title of the post. So in the XML file using these keywords and html tags, the appearance of the blog will be defined.

Now how to convert normal html code to use with template ?

Simple. Just replace the special characters with keywords.
  1. Replace <  with &lt ;
  2. < with &lt ;
  3.  > with &gt ;
  4.  " with &quot ;
  5.  ± with&plusmn ;
  6.  © with &copy ;
  7.  ® with &reg ;
Note: No Spaces before ";"
    example code before converting
    1
2
3
4
5
6
7
8
    <table border="0" style="width: 176px;"><tbody>
<tr> <td colspan="2" width="168">Select your T-Shirt size</td>   </tr>
<tr>     <td width="119">Small</td>     <td width="49"><input type="radio" /></td>   </tr>
<tr>     <td width="119">Medium</td>     <td width="49"><input checked="true" type="radio" /></td>   </tr>
<tr>     <td width="119">Large</td>     <td width="49"><input type="radio" /></td>   </tr>
<tr>     <td width="119">X-Large</td>     <td width="49"><input type="radio" /></td>   </tr>
</tbody></table>
</div>

    after converting
    1
2
3
4
5
6
7
8
    &lt;table border=&quot;0&quot; style=&quot;width: 176px;&quot;&gt;&lt;tbody&gt;
&lt;tr&gt; &lt;td colspan=&quot;2&quot; width=&quot;168&quot;&gt;Select your T-Shirt size&lt;/td&gt;   &lt;/tr&gt;
&lt;tr&gt;     &lt;td width=&quot;119&quot;&gt;Small&lt;/td&gt;     &lt;td width=&quot;49&quot;&gt;&lt;input type=&quot;radio&quot; /&gt;&lt;/td&gt;   &lt;/tr&gt;
&lt;tr&gt;     &lt;td width=&quot;119&quot;&gt;Medium&lt;/td&gt;     &lt;td width=&quot;49&quot;&gt;&lt;input checked=&quot;true&quot; type=&quot;radio&quot; /&gt;&lt;/td&gt;   &lt;/tr&gt;
&lt;tr&gt;     &lt;td width=&quot;119&quot;&gt;Large&lt;/td&gt;     &lt;td width=&quot;49&quot;&gt;&lt;input type=&quot;radio&quot; /&gt;&lt;/td&gt;   &lt;/tr&gt;
&lt;tr&gt;     &lt;td width=&quot;119&quot;&gt;X-Large&lt;/td&gt;     &lt;td width=&quot;49&quot;&gt;&lt;input type=&quot;radio&quot; /&gt;&lt;/td&gt;   &lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

    For java scripts, if you do not want to use any blogger specific keywords in the javascript code, then it can be pasted by adding a "< ! [ CDATA [" before script tag and "] ] >" the end of script tag(Without spaces).
    Code Converter

    Source HTML code:

    Converted Code

    1 comment :

    Subscribe to: Post Comments ( Atom )