Как сделать галерею с изображениями на Blogger

Всё началось с того, как в комментариях прозвучал вопрос, часть которого выглядела так:

"Вот у меня много картинок, и мне хотелось бы их выложить на сайт, но, чтобы обязательно внизу были ссылки на них."

Вот его код, который мы вносим во время написания статьи на вкладке "Изменить HTML":

<div style="text-align: center; text-indent: 0px;"><img border="0" height="366" width="550" src="http://4.bp.blogspot.com/-bxHnM4QvRPI/TdOyTz4LQsI/AAAAAAAAB4k/eU4jISr_1h4/s550/gde-doroga.jpg" alt="Где дорога"/>
Код для добавление на сайт или блог
<script> 
 var today=new Date()
 document.write('<textarea cols="45" rows="2" readonly="readonly" onclick="this.select()"><a href="'+window.location+'"><img border="0" height="366" width="550" src="http://4.bp.blogspot.com/-bxHnM4QvRPI/TdOyTz4LQsI/AAAAAAAAB4k/eU4jISr_1h4/s550/gde-doroga.jpg" alt="Где дорога"/></a></textarea>') 
 </script>
Код для вставки в форум (BBCode)
<script> 
 var today=new Date() 
 document.write('<textarea cols="45" rows="2" readonly="readonly" onclick="this.select()">[url='+window.location+'][IMG]http://4.bp.blogspot.com/-bxHnM4QvRPI/TdOyTz4LQsI/AAAAAAAAB4k/eU4jISr_1h4/s550/gde-doroga.jpg[/IMG][/url]</textarea>') 
 </script>
Ссылка на фотографию
<textarea cols="45" rows="2" readonly="readonly" onclick="this.select()">http://4.bp.blogspot.com/-bxHnM4QvRPI/TdOyTz4LQsI/AAAAAAAAB4k/eU4jISr_1h4/s550/gde-doroga.jpg</textarea>
</div>

Жирным цветом выделены фрагменты, которые нужно добавлять самостоятельно, а именно - это код изображения или его URL-адрес.

Вторая часть вопроса: как динамически изменять размер изображения.

"Как можно сделать так, чтобы при нажатии на картинку она увеличивалась..."

Размер:
200
300
550
исходный

Код для добавления на сайт:
<a href="http://shpargalkablog.ru/2011/05/kak-sdelat-galereyu-izobrazhenii.html"><img src="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg" alt="Лестница" border="0" /></a>
Код для добавления на форум:
[url=http://shpargalkablog.ru/2011/05/kak-sdelat-galereyu-izobrazhenii.html][IMG]http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg[/IMG][/url]
Ссылка
http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg

<script src='http://www.google.com/jsapi'/>
<script>
  google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
  $("#listaBanners").change(function() {
    var graphicFileName = $("#listaBanners option:selected").attr("value");
    var newCode = '<a href="'+window.location+'"><img src="' + graphicFileName + '" alt="Название_сайта" /></a>';
    $("#codigoBanner").text(newCode);
    $("#ejemploBanner").html(newCode);
 });
});
$(function() {
  $("#listaBanners").change(function() {
    var graphicFileName = $("#listaBanners option:selected").attr("value");
    var newCode = '[url='+window.location+'][IMG]' + graphicFileName + '[/IMG][/url]';
    $("#codigo1Banner").text(newCode);
 });
});
$(function() {
  $("#listaBanners").change(function() {
    var graphicFileName = $("#listaBanners option:selected").attr("value");
    var newCode = '' + graphicFileName + '';
    $("#codigo2Banner").text(newCode);
 });
});
//]]>
</script>

<form action="#" id="misBanners" style="text-align: center; text-indent: 0px;">
Размер: <select name="listaBanners" id="listaBanners">
<option value="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s200/lestnica.jpg">200</option>
<option value="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s300/lestnica.jpg">300</option>
<option selected="selected" value="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg">550</option>
<option value="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s1600/lestnica.jpg">исходный</option>
</select>
<div id="ejemploBanner">
<img src="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg" alt="Лестница" height="375" width="550" id="redimimg"/>
</div>
Код для добавления на сайт: 
<textarea cols="45" rows="2" readonly="readonly" onclick="this.select()" id="codigoBanner">&lt;a href="адрес_страницы"&gt;&lt;img src="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg" alt="Лестница" border="0" /&gt;&lt;/a&gt;</textarea>
Код для добавления на форум: 
<textarea cols="45" rows="2" readonly="readonly" onclick="this.select()" id="codigo1Banner">[url='адрес_страницы'][IMG]http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg[/IMG][/url]</textarea>
Ссылка
<textarea cols="45" rows="2" readonly="readonly" onclick="this.select()" id="codigo2Banner">http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg</textarea>
</form>

Здесь первоначальная ширина картинки, которую пользователи видят без изменения размера, равна 550px, о чём говорит s550 в URL-адресе фотографии. То, что выделено жирным стоит изменить на свои данные. А вместо адрес_страницы указываем текущий URL, например, http://shpargalkablog.ru/2011/05/kak-sdelat-galereyu-izobrazhenii.html.

Как сделать ссылку "Сохранить" на изображения Picasa.

http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/s550/lestnica.jpg

Изменив его окончание, мы получим URL

http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/d/

который заключим в конструкцию

<a href="http://3.bp.blogspot.com/-G9jR513tUg4/TdTNzKuIffI/AAAAAAAAB4s/wIk9tY6bAY0/d/">Сохранить</a>

Третья часть вопроса: как сделать фотогалерею на Blogger.

...и приводила на другую страницу, где она крупным планом?