Делаем дополнительное меню в Blogger(Blogspot)

Логотип Blogger и несколько меню для сайта на фонаПродолжаем колдовать над блогом и его менюшками. После изменения дизайна гаджета "Страницы", попробуем сделать простое дополнительное меню для Blogger-блога, в котором можно будет разместить ссылки важных ярлыков или отдельных постов, к которым нужен быстрый доступ.
Итак, для создания дополнительного меню нам потребуется всеядный гаджет HTML/JavaScript, в котором и будет размещаться код нашего дополнительного меню.
 Сразу определимся с расположением:
 Если гаджет "Страницы" не используется и CSS для него не задан, то можно разместить над/под шапкой блога.
 Совместно с гаджетом "Страницы" - над/под блоком сообщений или на боковых панелях.
 CSS для всех вариантов одинаковый, только ширина и высота всего блока и элементов внутри - ссылок-кнопок, устанавливается относительно желаемых размеров.
  HTML структура, самая простая:
<ul class="CssMenu">
<li class="CssMenu"><a href="#" title="">Link</a></li>
<li class="CssMenu"><a href="#" title="">Link</a></li>
<li class="CssMenu"><a href="#" title="">Link</a></li>
<!--все ваши ссылки-->
<li class="CssMenu"><a href="#" title="">>Link</a></li>
</ul>
 А код CSS будет таким:
ul.CssMenu {
 list-style:none;
 padding:0px;
 margin:0px;
}
li.CssMenu {
 float:left;
 padding: 0px;
}
li.CssMenu a{
 display:block;
 vertical-align: middle;
 text-align:center;
 font: normal normal 12px Tahoma;
 text-decoration:none;
 color: #fff;
 margin: 0px;
}
li.CssMenu a{
 height:50px; /*высота кнопки - подбирается*/
 background-image:url(../image.jpg); /*фоновое изображение для ссылок-кнопок*/
 background-repeat: no-repeat;
 width:90px; /*ширина кнопки - подбирается*/
}
li.CssMenu a:hover{
 background-position:-90px 0;
}
 Для данного стиля, в качестве фонового изображения, использовалось такое:

Подробнее о применении таких изображений(спрайтов) читайте в этой статье
 После изменения расположение гаджета с меню в шаблоне, может потребоваться отрегулировать высоту - height и ширину - width блоков.
  Для уменьшения/увеличения количества кнопок просто удалите или добавьте новые ссылки в гаджет с меню в формате:
  <li class="CssMenu"><a href="#" >Link</a></li>
При использовании в Blogger двух меню - дополнительного меню и гаджета "Страницы" нужно будет задать дополнительный CSS, чтобы убрать просветы между кнопок обеих меню.
.tabs .widget ul a, .tabs .widget ul a:hover, .tabs .widget li a, .tabs .widget li a:hover {
 margin: 0;
 border: 0;

 Вот пожалуй и все. Буду рад вашим комментариям :)

16 комментариев:

  1. Интересно. обязательно попробую у себя на блоге.

    ОтветитьУдалить
    Ответы
    1. Конечно попробуйте, если что-то не получится обращайтесь - помогу.
      Кстати, скоро опубликую еще пару интересных менюшек для Blogger, так что заходите в гости еще.

      Удалить
  2. Интересно!
    Счас попробую.
    Спасибо за интересную информацию!
    С удовольствием присоединился к блогу!
    Дерзайте. Я Ваш читатель!:)

    ОтветитьУдалить
    Ответы
    1. Спасибо за приятный коммент и оказанное доверие :)

      Удалить
  3. Спасибо за информацию!
    а не подскажете, как изменить цвет ссылок в гаджете "список ссылок"
    по умолчанию назначается цвет ссылок, для всего блога, но как быть, если цвет ссылок в гаджете должен быть другой?

    ОтветитьУдалить
    Ответы
    1. Гаджет "Список ссылок" имеет идентификатор LinkList1 и структуру обычного HTML списка: <UL>-<LI>, и к его элементам можно применить свойства CSS.
      Пример стиля чтобы изменить цвет ссылок:
      #LinkList1 a {
      color: #00b001;
      }

      Удалить
  4. Анонимный23.02.13, 15:13

    как сделать меню как на этой странице?
    (шапка скрывается, меню фиксируется)
    спасибо

    ОтветитьУдалить
    Ответы
    1. http://www.magentawave.com/2013/02/simple-jquery-floating-block.html

      Удалить
  5. Спасибо ))) Во многом помогли разобраться )

    ОтветитьУдалить
  6. Подскажите, а как сделать меню с картинками??? Ну вот чтобы вверху было два ряда картинок. Нажав на которые ты переходишь в раздел. Например, картинки, салаты, супы. Нажимаем на салаты - переходим на страницу где в две колонки салаты идут

    ОтветитьУдалить
    Ответы
    1. Посмотрите здесь
      http://www.magentawave.com/2012/03/imagemenu-on-blogger-with-css.html

      Удалить
  7. Анонимный09.09.16, 23:06

    А как сделать такое дополнительное меню как у вас на сайте слева, на сером вертикальном прямоугольнике с кнопками?

    ОтветитьУдалить
    Ответы
    1. По возможность опубликую пост с примером.

      Удалить
  8. Доброго времени суток! Мне тоже очень понравилось дополнительное меню как у вас на сайте слева, на сером вертикальном прямоугольнике с кнопками! В публикациях не нашла, или еще нет поста? С уважением к вам и вашему труду!

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

      Удалить
  9. Спасибо за отзывчивость! Буду ждать ваше освещение данного вопроса! С уважением к вам и вашему труду!

    ОтветитьУдалить

Следующее Предыдущее

BestProject