Blogger images to link list example

Ok, lets see then... I installed this on my test blog so it really works, if you get it right.

First you have to add the pages, or at least one, to your blog. You can have the Blog tabs gadget inserted, when you create the first page, so you can test the page(s). But we are going to remove that later.

Write down the url(s) of your page(s).

Now you have your page(s) and page tabs gadget, go to blog design, and remove the page gadget. Add Link List gadged to the same spot where page gadget was, below title. Configure the link list: add Home with url to main page, add "Page1" with url to page1, "Page2" -> url to page2 etc.

Test that the link list works as the page gadget worked before.

Upload your images to your Picasa web albums, for example, and get the urls to those pictures ready. Picasa offers https addresses but I always change that to http, quicker loading I think.

Next we edit the template html. Design -> Edit HTML. Expand Widget Templates. Find line:

<li><a expr:href='data:link.target'><data:link.name/></a></li>

Now we need to replace that line with a block of three line code per every link in the link list. For a text link, use:

<b:if cond='data:link.name == &quot;YOUR LINK NAME&quot;'>
  <li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:if>

For a picture link, use:

<b:if cond='data:link.name == &quot;YOUR LINK NAME&quot;'>
  <li style='height:30px'><a expr:href='data:link.target'><img src='YOUR IMAGE URL' style='vertical-align:text-top'/></a></li>

For picture + text link, use:

<b:if cond='data:link.name == &quot;YOUR LINK NAME&quot;'>
  <li style='height:30px'><a expr:href='data:link.target'><img src='YOUR IMAGE URL' style='vertical-align:text-top'/> <data:link.name/></a></li>
</b:if>

I'll give you an example. Lets assume I have 2 pages, so there are 3 links (Home, Page One and Page Two). The code block to replace that one line could be:

<b:if cond='data:link.name == &quot;Home&quot;'>
  <li style='height:30px'><a expr:href='data:link.target'><img src='http://images.findicons.com/files/icons/76/icandy_junior/24/home_1.png' style='vertical-align:text-top'/> <data:link.name/></a></li>
</b:if>
<b:if cond='data:link.name == &quot;Page One&quot;'>
  <li style='height:30px'><a expr:href='data:link.target'><data:link.name/></a></li>
</b:if>
<b:if cond='data:link.name == &quot;Page Two&quot;'>
  <li style='height:30px'><a expr:href='data:link.target'><data:link.name/></a></li>
</b:if>

I used picture + text in home page link, others are just normal text. I added style='height:30px' to make them all same height. If you use same height images for all links, that won't be necessary.

If you add or remove pages, then you must update the template html accordingly.

Hope you get it working!