Rony: Making my own Custom Blogger Widget

the ready made HTML was:-

<a href='http://gmail.google.com/'>
  <img src='http://rony.yeung.googlepages.com/gmail-28.png' title='GMail'/>
</a>
<a href='http://docs.google.com/'>
  <img src='http://rony.yeung.googlepages.com/dns-28.png' title='Google Doc & Spreadsheet'/>
</a>
<a href='http://picasaweb.google.com/'>
  <img src='http://rony.yeung.googlepages.com/picasa-28.png' title='Google Picasa Web Album'/>
</a>
<a href='http://groups.google.com/'>
  <img src='http://rony.yeung.googlepages.com/uncategorized_28.png' title='Google Discussion Groups'/>
</a>
<a href='http://www.google.com/notebook/'>
  <img src='http://rony.yeung.googlepages.com/notebook-28.png' title='Google Notebook'/>
</a>
<a href='http://rony-yeung.blogspot.com/index.html'>
  <img src='http://rony.yeung.googlepages.com/home_42.gif' title='Home of this Blog'/>
</a>

change them into:-

&lt;a href='http://gmail.google.com/'&gt;
  &lt;img src='http://rony.yeung.googlepages.com/gmail-28.png' title='GMail'/&gt;
&lt;/a&gt;
&lt;a href='http://docs.google.com/'&gt;
  &lt;img src='http://rony.yeung.googlepages.com/dns-28.png' title='Google Doc &amp; Spreadsheet'/&gt;
&lt;/a&gt;
&lt;a href='http://picasaweb.google.com/'&gt;
  &lt;img src='http://rony.yeung.googlepages.com/picasa-28.png' title='Google Picasa Web Album'/&gt;
&lt;/a&gt;
&lt;a href='http://groups.google.com/'&gt;
  &lt;img src='http://rony.yeung.googlepages.com/uncategorized_28.png' title='Google Discussion Groups'/&gt;
&lt;/a&gt;
&lt;a href='http://www.google.com/notebook/'&gt;
  &lt;img src='http://rony.yeung.googlepages.com/notebook-28.png' title='Google Notebook'/&gt;
&lt;/a&gt;
&lt;a href='http://rony-yeung.blogspot.com/index.html'&gt;
  &lt;img src='http://rony.yeung.googlepages.com/home_42.gif' title='Home of this Blog'/&gt;
&lt;/a&gt;

Build a Click Button:

<form method="post" action="http://www.blogger.com/add-widget">
<input type="hidden" name="infoUrl" value="http://rony-yeung.blogspot.com/2007/04/making-my-own-custom-blogger-widget.html"/>
<input type="hidden" name="logoUrl" value="http://www.blogger.com/images/logo50.gif"/>
<input type="hidden" name="widget.title" value="Example Custom Blogger Widget"/>
<textarea name="widget.content" style="display:none;">
&lt;a href='http://gmail.google.com/'&gt; &lt;img src='http://rony.yeung.googlepages.com/gmail-28.png' title='GMail'/&gt; &lt;/a&gt; &lt;a href='http://docs.google.com/'&gt; &lt;img src='http://rony.yeung.googlepages.com/dns-28.png' title='Google Doc &amp; Spreadsheet'/&gt; &lt;/a&gt; &lt;a href='http://picasaweb.google.com/'&gt; &lt;img src='http://rony.yeung.googlepages.com/picasa-28.png' title='Google Picasa Web Album'/&gt; &lt;/a&gt; &lt;a href='http://groups.google.com/'&gt; &lt;img src='http://rony.yeung.googlepages.com/uncategorized_28.png' title='Google Discussion Groups'/&gt; &lt;/a&gt; &lt;a href='http://www.google.com/notebook/'&gt; &lt;img src='http://rony.yeung.googlepages.com/notebook-28.png' title='Google Notebook'/&gt; &lt;/a&gt; &lt;a href='http://rony-yeung.blogspot.com/index.html'&gt; &lt;img src='http://rony.yeung.googlepages.com/home_42.gif' title='Home of this Blog'/&gt; &lt;/a&gt;
</textarea>
<input type="hidden" name="widget.template" value="&lt;data:content/&gt;" />
<input type="image" src="http://www.blogger.com/img/add/add2blogger_lg.gif" value="About submit buttons" alt="[Submit]" name="go" title="Add to Blogger"/>
</form>