Внимание! На сервисе произошли изменения прочтите дополнение после основного текста внизу страницы.
Сегодняшний урок по работе с шаблоном 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 там и лежит наш код который нужно перекинуть в шаблон. Одно но на сервисе вы не сможете отредактировать такие параметры как цвет меню, цвет текста это нужно будет делать самому на своем шаблоне.
36 Коммент.
Оставить комментарийСтранно. все делаю как в инструкции и у меня не получается! помочь можете?
ОтветитьЗдравствуйте, что именно у вас не вышло?
ОтветитьСпасибо,уже получилось. Но у меня меню с выпадающим списком в самом верху под картинкой, потом это же меню дублируется под картинкой, но список уже не открывается. Не подскажете как это можно изменить? Желательно, что бы было одно меню с выпадающим списком под картинкой. Для наглядности мой блог http://lengilochka.blogspot.com/
Ответитьдублируется потому что вы html код вашего меню вставили дважды. удалите один из них тот который находится в гаджете, а второй html вы поставили выше header нужно сразу после него. так что в изменить html ищите html код меню копируете, с того места удаляете и вставляете сразу после header.
ОтветитьДа, вставила дважды: в текстовый редактор и гаджет, но ведь так и написано в инструкции.
ОтветитьА html стоит выше header, но все равно в блоге меню выше картинки. Понимаю, что это странно, но вот так(((. Это может быть что-то еще?
html должно стоят ниже header, а не выше. А в инструкции я описал как устанавливать код для горизонтального и вертикального по отдельности, а вы подумали, что эти функции нужно проделать для одного меню.
ОтветитьДа-да,все верно после тега , это опечатка была.
Ответитьтогда попробуйте поставить после этого кода
Ответитьregion-inner main-inner
ставлю после окончания кода html, который заканчивается на /ul
Ответить/div (в скобочках) - region-inner main-inner, потом в блоге эта фраза прописывается выше меню. Добавила скобки, пишет ошибку - что не верный тег и т.д. Может я не правильно прописываю, как этот тег надо прописать, с какими значками?
пробуем тогда еще такой вариант. ищете этот код
Ответитьdiv class='region-inner header-inner
под ним поставите html код меню.
Если не выйдет можете пригласить меня как администратора на ваш блог я сам попробую сделать.
Да, все равно над картинкой получается. Как вас пригласить?
Ответитьв панели управления выберите настройки, внизу кликните добавить авторов, туда вставите laist123@gmail.com
Ответитьжмете пригласить авторов, когда я одобрю ваше приглашение там появится мое имя и почта напротив будет писать автор, вам нужно будет сменить автора на администратора
под шаблоном настройки - основное - кликаете добавить авторов
Ответитьввела вас, подскажите, а в оформлении меню можно сделать шрифт и жирные буквы как у меня в блоге?Спасибо!
ОтветитьВсе сделал. так пойдет?
ОтветитьСпасибооооо! Да, все отлично, Вы просто волшебник!
ОтветитьКстати я вставил после этого кода region-inner main-inner не знаю почему у вас не вышло)
ОтветитьА какой у вас там шрифт?
Да, странно, а у меня просто писалось сверху((
ОтветитьШрифт Times new roman, но он жирными буквами.
А еще, может вы знаете почему у меня весь фон белый, а сверху голубая полоса?Это тоже одна из загадок)
Для смены шрифта меню нужно в его CSS коде, тот который вы вставляли до skin найти font-family: Helvetica, Arial, Verdana, sans-serif; затем удаляете Helvetica, Arial, Verdana, sans-serif и на их место вставляете Times New Roman
ОтветитьСиняя полоса идет от этого кода region-inner header-inner
если его удалить то и полоса пропадет, но при этом ваша картинка с женщиной может немного сместится влево.
Спасибо, буду пробовать!
Ответитьпопробовала. шрифт изменила, а подскажите еще как сделать его жирным?
Ответитьпо поводу полоски, она ушла, картинка сдвинулась влево, но из под нее выглядывает голубой, но теперь справа((
Сможете этот код region-inner header-inner вернуть обратно?
ОтветитьЧтобы сделать шрифт жирнее вставьте после font-family: Times New Roman;
Ответитьэтот код font-weight:bold;
шрифт сделала, а код нет, вернуть не могу, после какого тега его надо сделать?
ОтветитьПосле этого div class='fauxborder-right header-fauxborder-right'
Ответитьтак, вернулась эта голубая рамочка, а картинка назад уже не смещается, как выровнять картинку? не, ну вы сегодня конечно со мной на связи))
Ответитьмда пришлось повозиться)
Ответитьдавайте мне администратора назад)
laist123@gmail.com
Что-то мне ничего не пришло. Вы отправляли запрос?
Ответитьда, отправила и жду, а вас нет(, сейчас еще раз отправлю
ОтветитьИзмените на администратора
Ответитьесть уже
ОтветитьВсе вродь, голубую линию не удалить у нее нет кода, а может и есть, но он не пробивается, пришлось накрыть ее другой линией.
ОтветитьСпасибо большое, стало менее заметно, практически не видно, и где она у меня взялась не пойму, просто сделала белый фон и она проявилась! ну ок, большущее спасибо!
ОтветитьНе за что. Всего доброго.
Ответитьздравствуйте! не могли бы вы мне помочь, скопировала выпадающее меню из wordpress, удалила все лишнее,подставила свои параметры, но если ставить меню в начало страницы у меню не открываются подстраницы и само меню в белых полосках, ставлю тот же html код ниже сообщений и все прекрасно выглядит, меню мне нужно после названия блога наверху, в чем может быть проблема?
Ответитьвот ссылка моего пробного блога http://dlyaprimera.blogspot.ru/5/?m=0
Бывает, что не все менюшки работают исправно, нужно разбираться уже самому. Попробуйте выбрать другой вид меню.
Ответить