Плавающее простое меню для Blogger

Всем привет! Сегодня я покажу вам, дорогие друзья, как установить в блог простое менюПлавающее меню или другое название фиксированное "Fixed Menu", будет находится в верху блога. При прокрутке страницы, оно всегда останется неподвижным. Как например в Blogger navbar.

блог Blogger
Устанавливаем фиксированное меню в блог Blogger

Установка плавающего меню происходит в два шага. Проверял фиксированное меню на различных шаблонах, всё работает без замечаний. Это простое меню будет хорошим дополнением к вашему блогу. В меню можно разместить рекламные, рефферальные ссылки или ссылки на другие ваши блоги или блоги друзей и так далее. Посмотрим скриншоты, будет пока два стиля меню - простое черное и синее.

Menu_1
Черное плавающее меню для Blogger
Menu
Синее плавающее меню в Blogger

Как установить фиксированное плавающее меню в Blogger

Для этого, вам нужно зайти в панель инструментов Blogger - Шаблон - Изменить HTML. Далее нажимаем форматировать шаблон, Ctrl+F и находим тег:  ]]></b:skin>

css
Находим строку

Чуть выше тега вставляем стиль меню. Стиль меню синий:

Изменить значение 970px, до размера вашего блога. Затем находим следующий тег: </head> и чуть ниже вставляем код:

Всё, готово. Если вам нужно чёрное простое плавающее меню, тогда код стиля такой:

Изменить так же 970px, до размера вашего блога. А чуть ниже тега </head> вставляем такой код:

Как вставить ссылки в плавающее меню blogger

Делается это очень просто. Заменяем решетку # на ссылку страницы или на любую статью и так далее. Вместо Меню 1. 2. 3. 4. 5. даём любое название. Если Вы хотите вставить ссылку на определённые ярлыки, то вместо решеток подставляем '/search/label/здесь название ярлыка'  только ярлык должен точно соответствовать, то есть, если у вас ярлыки с большой буквы то и прописываете его с большой, если с маленькой то с маленькой буквы. Вот вроде всё. По моему ни чего не пропустил. Всем пока до новых встреч.

С уважением, Сергей

Меню подсмотрел -  blog.kangismet

Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку: *