2.Как "прикрутить" всплывающее боковое меню к штатному шаблону "Корпорация Чудеса"

Вот два фрагмента CSS из Firebug левый - для внутренненго элемента меню, правый для li первого уровня.
Все хаки здесь. Главный хак - вставка в "ul#nav li a " форматирования "-webkit-box-shadow:"...., менял еще где-то padding,
Главный недостаток полученного слоя - все внутренние списки выглядят также, как и главные.

1.Как "прикрутить" всплывающее боковое меню к штатному шаблону "Корпорация Чудеса"

В этом году в панели управления Blogger появился сервис дизайна шаблонов. На основании предустановленных шаблонов теперь можно строить полноценный качественный дизайн... Хочется написать об этом, но некогда..., да и лучше сначала "показать", что можно сделать, а потому ограничусь промежуточным, но очень важным постом о хаках CSS для того, чтобы прилепить jQuery SooperFish Multi-Column Animated Drop-down меню к боковой стенке окна броузера (т.е. сделать меню неподвижным. (Меню можно посмотреть и скачать, если кликнуть по картинке).
Итак, начнем с HTML шаблона виджета темы Blogger`a

Примеры показа Видео в TopUp (слегка устарели)

<div class="media">
<noindex><a class="tu_iframe_853x510"
href="http://www.youtube.com/embed/aQEpRyNkESE"
toptions="x=10"
</noindex></div>

Откуда я взял  примеры настройки всплывающих окон? Надо вспомнить, или погуглить... Ага, да это код самой страницы сайта Apycom. Код примера под катом.
А что устарело? Дело в том, что для вставки в блог видео с YouTube теперь исеользуется тег iframe, а не object, как раньше. Но оказалось, что можно просто воспользоваться настройками TopUp для фреймов.
Во-первых, нужно поменять размеры (tu_iframe_853x510).
Во вторых, надо задать toptions="x=10"  для левого верхнего угла окна...

Прячем Google navbar, заголовок и освобождаем место для TopUp

Берем за основу шаблон Корпорация "Чудеса" из нового (сервиса) дизайнера шаблонов Блоггера.
Во вкладке "Дополнительно" находим опцию "Добавить CSS" и сдвигаем весь блог вправо, прячем панель Google navbar и название блога.

.content-inner {float: right;}
#navbar {height: 0px; visibility: hidden; display: none;}
#header {height: 0px; visibility: hidden; display: none;}

Опции настройки TopUp окон_2

<a href="/images/photos/1.jpg" class="top_up">
<img src="/images/thumbnails/1.jpg"/>
</a>
Вместо class="top_up" можно вставить
 toptions="shaded = 1, overlayClose = 1"

Теперь надо понять, как настраивать TopUp окна, дабы всплывали они слева, а не в центре, как регулировать их размеры..., и, наконец разобраться с типами содержимого, которое они могут показывать... Читаем документацию на сайте

<script type="text/javascript">
TopUp.addPresets({
"#images a": {
group: "images",
layout: "quicklook",
modal: 0
},
".shaded": {
shaded: 1
}
});
</script>

Эта функция создает обертку сразу для трех изображений, дабы показать их, как слайдшоу... Помимо функции TopUp.addPresets, там есть еще  десятка два функций..., пока не до них, разберемся сначала с опциями..., для этого есть Демо-страничка..., оказывается, помимо картинок, фреймов и плееров, есть еще типы HTML, DOM, AJAX, script... Как они работают?
Чтобы

Как легко заметить, в "toptions", перечисляются опции, полный список и назначение которых можно увидеть на сайте разработчика..., а теперь представьте, что я вы захотели настроить с десяток опций? Каждый раз вносить их в код? Нет, можно использовать jscript и настроить все для любого CSS класса, поэтому и используется скрипт...

<div class="media"><a href="photos/2.jpg" class="tu_ql"><img src="thumbnails/2.jpg"/></a><noindex>
<a href="http://yaaho.com/" class="tu_iframe_800x600" target="_blank" rel="nofollow">
<img src="thumbnails/2.jpg"/></a>
</noindex>
</div><div class="text">text </div>
<div class="code">Текст перед ссылкой <noindex><a class="tu_iframe_800x600" href="http://www.cfin.ru/management/iso9000/newtqm/glava1/list1_2.shtml?printversion" rel="nofollow" target="_blank">ссылка</a></noindex>
</div><div class="text"><a href="http://www.youtube.com/v/pv8j1-IcnUE&amp;hl=nl&amp;fs=1&amp;rel=0&amp;hd=1&amp;autoplay=1" toptions="width = 853, height = 505, type = flash, title = Beastie Boys - Sabotage"><img alt="Youtube" src="/images/thumbnails/youtube.jpg?1285257116" /></a></div>