16 мая 2013 г.

Плавающее / фиксированное меню в Blogger

Всем привет! Плавающее меню "Membuat Floating Menu" или как ещё обычно называют фиксированное "Fixed Menu", будет всегда находится в верху вашего блога. Даже если Вы прокручиваете страницу вниз, фиксированное меню останется на месте.

Установка плавающего меню происходит в два шага, поэтому затруднений у вас возникнуть не должно. Испытывал на нестандартном шаблоне, всё прошло успешно. Смотрим скриншоты:

Синие фиксированное меню в блоге
Чёрное плавающее меню в Blogger
Такое простое меню будет хорошим дополнением к основному. Область применения различная, была бы фантазия. Можно например разместить рекламные ссылки, ссылки на другие ваши блоги или блоги друзей и так далее.

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

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

Новый редактор шаблона Blogger
Чуть выше вставляем стиль меню. Стиль меню синий:

/* Floating Menu */
#ki_floating_menu{background-color: #1484CE;background: #1484ce;background: -moz-linear-gradient(top,  #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom,  #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;}
#ki_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu ul li{float:left}
#ki_floating_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;}
#ki_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}

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

<!-- Floating Menu-->
<div id='ki_floating_menu'>
<ul>
  <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='http://4.bp.blogspot.com/-EjgIhPH-_8k/T2X5jYfOJZI/AAAAAAAABmw/yA1YFlwMqRU/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Меню 1</a></li>
<li><a href='#'>Меню 2</a></li>
<li><a href='#'>Меню 3</a></li>
<li><a href='#'>Меню 4</a></li>
<li><a href='#'>Меню 5</a></li>
</ul>
</div>

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

/* Floating Menu Minimalis*/
#ki_floating_menu_black{background-color: #333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#ki_floating_menu_black ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu_black ul li{float:left}
#ki_floating_menu_black ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}
#ki_floating_menu_black ul li a:hover{background-color:#666;color:white;}

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

<!-- Floating Menu-->
<div id='ki_floating_menu_black'>
<ul>
  <li style='border-left:1px solid #555'><a href='/'><img alt='Home' border='0' src='http://2.bp.blogspot.com/-kodysCW2shE/UXjGba74koI/AAAAAAAAD7I/wm2vEcaWIxo/s1600/home2.png' style='padding:0px;'/></a></li>
<li><a href='#'>Меню 1</a></li>
<li><a href='#'>Меню 2</a></li>
<li><a href='#'>Меню 3</a></li>
<li><a href='#'>Меню 4</a></li>
<li><a href='#'>Меню 5</a></li>
</ul>
</div>

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

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

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

С уважением, Сергей - блог Помощь Blogger-ru


Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

4 коммент. :

  1. Как его сделать светло-серым и выпадающим ?

    ОтветитьУдалить
    Ответы
    1. Илья, все настройки в первом коде(стили меню.Выпадающим, здесь в комментах я же вам не смогу показать.

      Удалить
    2. а как можете показать? Очень надо)

      Удалить
    3. Я вам ответил в новом блоге.

      Удалить

 
Яндекс.Метрика