Меню которое всегда сверху.

Горизонтальное плавающее меню приклеившиеся к верхней части экрана и не меняющее своего положение при прокрутке страницы.Плюсы такого вида меню навигации несомненны,да и установка кода проста и не сложна.Тем более,что отсутствие скриптов нагружающих страницу блога благоприятно скажется на загрузке страниц,что немаловажно для поисковой оптимизации.

Установка кода плавающего меню.

Меню такого вида подойдёт,как для Блогспот,так и для других видов GSM.Установка кода состоит из двух частей.Первая это GSS отвечающий непосредственно за внешний вид и вторая HTML-часть которая и является тем самым меню,которое мы хотим установить.

Куда это всё вставить решать вам в зависимости от ваших познаний.Если ваши познания близки к нулю или вам недосуг вникать во все тонкости,то можно просто скопировать весь код целиком,заменив выделенное красным на свои значения и вставить в гаджет  HTML и ява-скрипт и панель меню сама найдёт своё место.

Если ваши познания позволяют вам безопасное ковыряние в шаблоне,то можно добавить код GSS в шаблон перед закрывающим тегом боди,а HTML всё же я рекомендовал бы вставить в гаджет,чтобы добавить возможность быстрого доступа к правке или добавлению других пунктов меню навигации со временем по своему желанию.

<style>@keyframes slide{     0%{top:-50px; opacity:0;}     100%{top:0; opacity:1.0;} } @-moz-keyframes slide{     0%{top:-50px; opacity:0;}     100%{top:0; opacity:1.0;} } @-webkit-keyframes slide{     0%{top:-50px; opacity:0;}     100%{top:0; opacity:1.0;} } @keyframes word{     0%{top:20px; opacity:0.5;}     80%{top:55px;}     100%{top:50px; opacity:1.0;} } @-moz-keyframes word{     0%{top:20px; opacity:0.5;}     80%{top:55px;}     100%{top:50px; opacity:1.0;} } @-webkit-keyframes word{     0%{top:20px; opacity:0.5;}     80%{top:55px;}     100%{top:50px; opacity:1.0;} }   #toolbar{             background-color:#000; /*Fallback background color for IE since it doesn't render rgba*/             background-color:#279;rgba(0, 0, 0, 0.85);/*цвет фона меню*/             color:#FFF;/*цвет фона при наведении*/             font-family:sans-serif;             clear:both;             position:fixed;             z-index:99;             top:0;             width:720px;/*ширина меню*/             margin-left:-400px;/*позиционирование меню*/             left:50%;             border-bottom:1px solid #000;             box-shadow:0 0 5px #000, 0 0 5px #000;             text-shadow:-1px -1px 0 #000;             font-weight:bold;                   -moz-animation-name: slide;             -moz-animation-timing-function: ease-in;             -moz-animation-iteration-count: 1;             -moz-animation-duration: 1s;                       -webkit-animation-name: slide;             -webkit-animation-timing-function: ease-in;             -webkit-animation-iteration-count: 1;             -webkit-animation-duration: 1s;                           animation-name: slide;             animation-timing-function: ease-in;             animation-iteration-count: 1;             animation-duration: 1s;         }#toolbar ul{list-style-type:none; margin:0; padding:0;} #toolbar li{display:inline;} #toolbar li a{color:#FFF; text-decoration:none; position:relative; border-left:1px solid #578; border-right:1px solid #578; padding:10px; margin:0; display:inline-block;float:center10px;     -webkit-transition: all 0.2s ease-in-out;     -moz-transition: all 0.3s ease-in-out;     -o-transition: all 0.3s ease-in-out;     transition:all 0.3s ease-in-out; } #toolbar li a:hover{background:#CCC; color:#000; text-shadow:1px 1px 0 #FFF;} #toolbar li span{display:none;} #toolbar li:hover > span{display:block; position:absolute; top:50px; left:0; float:left; width:100%; text-align:center; text-shadow:none; color:#050;     -moz-animation-name: word;     -moz-animation-timing-function: ease-in;     -moz-animation-iteration-count: 1;     -moz-animation-duration: 0.5s;     -webkit-animation-name: word;     -webkit-animation-timing-function: ease-in;     -webkit-animation-iteration-count: 1;     -webkit-animation-duration: 0.5s;         animation-name: word;     animation-timing-function: ease-in;     animation-iteration-count: 1;     animation-duration: 0.5s; }</style> <div id="toolbar"> <ul> <li><a href="http://www.v-gol.ru/">Главная</a></li> <li><a href="http://www.v-gol.ru/search/label/Blogspot"> Контакты</a></li> <li><a href="http://www.v-gol.ru/search/label/%D0%AD%D1%84%D1%84%D0%B5%D0%BA%D1%82%D1%8B%20GSS">Правила</a></li> <li><a href="http://www.v-gol.ru/p/blog-page_21.html">карта блога</a></li> <li><a href="http://maxato.com/?pid=98"></a></li> </ul> </div>

Смотреть ещё Оформление блоков для кодаСлайдер- ротатор для блога Ротатор для баннеров Эффекты для фото на CSS. Как добавить форум на блог

Настройки плавающего меню навигации.

К настройкам плавающего меню навигации можно отнести цвет фона,ширину,высоту,позиционирование относительно центра страницы.Все эти параметры подписаны непосредственно в коде и выделены зелёным,так что разобраться,что почём я думаю не составит труда.Подпунктов меню может быть сколько угодно.Просто нужно добавить столько секций сколько вам необходимо.Сам код секции выглядит таким образом.(<li><a href="ссылка"></a> <span> гаджеты</span></li>)