Главное меню для blogger (blogspot).


Внимание! На сервисе произошли изменения прочтите дополнение после основного текста внизу страницы.

Сегодняшний урок по работе с шаблоном blogger расскажет и покажет вам, как правильно установить главное меню сайта - блога.

Что ж давайте продолжим изучать модернизацию блога. Касательно типов главного меню, всего существует два типа, горизонтальное и вертикальное, как первое так и другое может иметь выпадающие ячейки. И снова нам в помощь приходит отличный сервис привлекательных менюшек: http://cssmenumaker.com/css-menus Как видим сайт англоязычный, но разобраться можно и не владея английским.

В общем вверху, слева находится кнопка Type напротив стрелочка кликаем по ней, в списке выбираем либо Horizontal либо Vertical далее выбор за вами присмотрели себе меню, тогда кликаем по нему, в открывшейся странице кликаем по Customize\Download. Здесь видим само меню и его настройки, слева окошко с крестиком служит для добавления новых ячеек, вводим название ячейки и кликаем по крестику, ниже можно увидеть как к нашему меню добавилась еще одна ячейка, так же эти ячейки можно менять местами. В поле Edit Item так же можно задать имя ячейки и самое главное добавить ссылку на ту страницу, которая должна открываться на вашем сайте при клике по этой ячейке. Title - это название ячейки, Link - ссылка на страницу.

Теперь, если вы устанавливаете горизонтальное меню, кликаем по CSS копируем весь код, идем в панель управления нашим сайтом, заходим в Шаблон - Изменить HTML - жмем комбинацию клавиш Ctrl+F  в открывшемся окошке вводим код </b:skin> жмем Enter видим выделился нужный код </b:skin> перед ним вставляем скопированный на cssmenumaker код, затем возвращаемся на cssmenumaker и кликаем по HTML копируем код, возвращаемся в Изменить HTML - в поисковом окошке пишем <header> жмем Enter нашли код и сразу после него вставляем второй код из cssmenumaker сохраняем шаблон.

Если вы устанавливаете вертикальное меню делаем все тоже самое с CSS что и в случае с горизонтальным меню, а вот код HTML можно вставить как гаджет. Скопировав HTML код на cssmenumaker идем в Дизайн выбираем левый или правый колонтитул и добавляем гаджет в списке выбрать HTML\Javascript - вставить код и сохранить.

Вот и все.

Дополнение:
На сервисе который предлагается выше произошли некоторые изменения. Вроде, как теперь он стал платным и не совсем. Недавно посетив этот сайт мне было предложено оплатит годовой абонемент стоимость которого 14 долларов. Это окно выбивает когда вы уже определились с меню и нажимаете на раздел CSS. HTML еще можно настроить. Так вот есть там одна хитрость, можно этот CSS скачать себе на компьютер и затем закинуть в шаблон. Когда вы определились с менюшкой в открывшемся окне вы увидите надпись Download Source под ней ссылка source.zip кликаете, скачиваете в открывшемся документе ищете styles.css там и лежит наш код который нужно перекинуть в шаблон. Одно но на сервисе вы не сможете отредактировать такие параметры как цвет меню, цвет текста это нужно будет делать самому на своем шаблоне.


Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Главное меню для blogger (blogspot).
4/ 5
Oleh

36 Коммент.

Оставить комментарий
avatar
Елена Гилка
ноября 06, 2013

Странно. все делаю как в инструкции и у меня не получается! помочь можете?

Ответить
avatar
Сергей Тодорович
ноября 06, 2013

Здравствуйте, что именно у вас не вышло?

Ответить
avatar
Елена Гилка
ноября 07, 2013

Спасибо,уже получилось. Но у меня меню с выпадающим списком в самом верху под картинкой, потом это же меню дублируется под картинкой, но список уже не открывается. Не подскажете как это можно изменить? Желательно, что бы было одно меню с выпадающим списком под картинкой. Для наглядности мой блог http://lengilochka.blogspot.com/

Ответить
avatar
Сергей Тодорович
ноября 07, 2013

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

Ответить
avatar
Елена Гилка
ноября 07, 2013

Да, вставила дважды: в текстовый редактор и гаджет, но ведь так и написано в инструкции.
А html стоит выше header, но все равно в блоге меню выше картинки. Понимаю, что это странно, но вот так(((. Это может быть что-то еще?

Ответить
avatar
Сергей Тодорович
ноября 07, 2013

html должно стоят ниже header, а не выше. А в инструкции я описал как устанавливать код для горизонтального и вертикального по отдельности, а вы подумали, что эти функции нужно проделать для одного меню.

Ответить
avatar
Елена Гилка
ноября 07, 2013

Да-да,все верно после тега , это опечатка была.

Ответить
avatar
Сергей Тодорович
ноября 07, 2013

тогда попробуйте поставить после этого кода
region-inner main-inner

Ответить
avatar
Елена Гилка
ноября 07, 2013

ставлю после окончания кода html, который заканчивается на /ul
/div (в скобочках) - region-inner main-inner, потом в блоге эта фраза прописывается выше меню. Добавила скобки, пишет ошибку - что не верный тег и т.д. Может я не правильно прописываю, как этот тег надо прописать, с какими значками?

Ответить
avatar
Сергей Тодорович
ноября 07, 2013

пробуем тогда еще такой вариант. ищете этот код
div class='region-inner header-inner
под ним поставите html код меню.

Если не выйдет можете пригласить меня как администратора на ваш блог я сам попробую сделать.

Ответить
avatar
Елена Гилка
ноября 07, 2013

Да, все равно над картинкой получается. Как вас пригласить?

Ответить
avatar
Сергей Тодорович
ноября 07, 2013

в панели управления выберите настройки, внизу кликните добавить авторов, туда вставите laist123@gmail.com
жмете пригласить авторов, когда я одобрю ваше приглашение там появится мое имя и почта напротив будет писать автор, вам нужно будет сменить автора на администратора

Ответить
avatar
Сергей Тодорович
ноября 07, 2013

под шаблоном настройки - основное - кликаете добавить авторов

Ответить
avatar
Елена Гилка
ноября 07, 2013

ввела вас, подскажите, а в оформлении меню можно сделать шрифт и жирные буквы как у меня в блоге?Спасибо!

Ответить
avatar
Сергей Тодорович
ноября 07, 2013

Все сделал. так пойдет?

Ответить
avatar
Елена Гилка
ноября 07, 2013

Спасибооооо! Да, все отлично, Вы просто волшебник!

Ответить
avatar
Сергей Тодорович
ноября 07, 2013

Кстати я вставил после этого кода region-inner main-inner не знаю почему у вас не вышло)
А какой у вас там шрифт?

Ответить
avatar
Елена Гилка
ноября 07, 2013

Да, странно, а у меня просто писалось сверху((
Шрифт Times new roman, но он жирными буквами.
А еще, может вы знаете почему у меня весь фон белый, а сверху голубая полоса?Это тоже одна из загадок)

Ответить
avatar
Сергей Тодорович
ноября 07, 2013

Для смены шрифта меню нужно в его CSS коде, тот который вы вставляли до skin найти font-family: Helvetica, Arial, Verdana, sans-serif; затем удаляете Helvetica, Arial, Verdana, sans-serif и на их место вставляете Times New Roman

Синяя полоса идет от этого кода region-inner header-inner
если его удалить то и полоса пропадет, но при этом ваша картинка с женщиной может немного сместится влево.

Ответить
avatar
Елена Гилка
ноября 07, 2013

Спасибо, буду пробовать!

Ответить
avatar
Елена Гилка
ноября 07, 2013

попробовала. шрифт изменила, а подскажите еще как сделать его жирным?
по поводу полоски, она ушла, картинка сдвинулась влево, но из под нее выглядывает голубой, но теперь справа((

Ответить
avatar
Сергей Тодорович
ноября 07, 2013

Сможете этот код region-inner header-inner вернуть обратно?

Ответить
avatar
Сергей Тодорович
ноября 07, 2013

Чтобы сделать шрифт жирнее вставьте после font-family: Times New Roman;
этот код font-weight:bold;

Ответить
avatar
Елена Гилка
ноября 07, 2013

шрифт сделала, а код нет, вернуть не могу, после какого тега его надо сделать?

Ответить
avatar
Сергей Тодорович
ноября 07, 2013

После этого div class='fauxborder-right header-fauxborder-right'

Ответить
avatar
Елена Гилка
ноября 07, 2013

так, вернулась эта голубая рамочка, а картинка назад уже не смещается, как выровнять картинку? не, ну вы сегодня конечно со мной на связи))

Ответить
avatar
Сергей Тодорович
ноября 07, 2013

мда пришлось повозиться)
давайте мне администратора назад)
laist123@gmail.com

Ответить
avatar
Сергей Тодорович
ноября 08, 2013

Что-то мне ничего не пришло. Вы отправляли запрос?

Ответить
avatar
Елена Гилка
ноября 08, 2013

да, отправила и жду, а вас нет(, сейчас еще раз отправлю

Ответить
avatar
Сергей Тодорович
ноября 08, 2013

Измените на администратора

Ответить
avatar
Елена Гилка
ноября 08, 2013

есть уже

Ответить
avatar
Сергей Тодорович
ноября 08, 2013

Все вродь, голубую линию не удалить у нее нет кода, а может и есть, но он не пробивается, пришлось накрыть ее другой линией.

Ответить
avatar
Елена Гилка
ноября 08, 2013

Спасибо большое, стало менее заметно, практически не видно, и где она у меня взялась не пойму, просто сделала белый фон и она проявилась! ну ок, большущее спасибо!

Ответить
avatar
Сергей Тодорович
ноября 08, 2013

Не за что. Всего доброго.

Ответить
avatar
Dessi Fleur
июня 04, 2014

здравствуйте! не могли бы вы мне помочь, скопировала выпадающее меню из wordpress, удалила все лишнее,подставила свои параметры, но если ставить меню в начало страницы у меню не открываются подстраницы и само меню в белых полосках, ставлю тот же html код ниже сообщений и все прекрасно выглядит, меню мне нужно после названия блога наверху, в чем может быть проблема?
вот ссылка моего пробного блога http://dlyaprimera.blogspot.ru/5/?m=0

Ответить
avatar
Сергей Тодорович
июня 05, 2014

Бывает, что не все менюшки работают исправно, нужно разбираться уже самому. Попробуйте выбрать другой вид меню.

Ответить