7 октября 2012 г.

Как сделать меню страниц в блоге

Меню страниц можно сделать двумя (двумя с половиной)) способами. Я знаю о двух, а может, их и больше)

В этот раз начну с легкого)

1. Легкий и быстрый способ сделать меню страниц в блоге. 

 

1. Заходим в  "Настроить" - "Дизайн".

2. В поле под гаджетом "Заголовок" (шапка блога) добавляем гаджет "Страницы".






3. Сохраняем и видим текстовый вариант отражения меню страниц. Например так, как в блоге МояКучаМала (когда же и до него дойдут руки дизайн настроить). Фото кликабельно))



 

2. Легкий и чуть-чуть не быстрый способ сделать меню страниц в блоге.  

 

Удобен, если мы хотим, чтобы в меню страниц были ссылки на сторонние сайты и блоги.

1. Заходим в  "Настроить" - "Дизайн".

2. В поле под гаджетом "Заголовок" (шапка блога) добавляем гаджет "HTML"



3. В поле гаджета пишем такой код:

<div id='menu'>
<ul>
<li><a href="http://kuchamala22.blogspot.com/">Блог</a></li>
<li><a href="http://dushechki.blogspot.com/p/blog-page.html">Обо мне</a></li>
<li><a href="http://dushechki.blogspot.com/p/blog-page_13.html">Контакты</a></li>
</ul>
</div>

То, что выделено синим - это название закладки, красным - адрес закладки (куда мы перейдем, нажав на нее).

Чтобы закладок было не три, как у меня в КучаМале, а больше, просто скопируйте вот этот кусочек кода:

<li><a href="http://kuchamala22.blogspot.com/">Блог</a></li>

и добавьте его в нужное место, прописав свои параметры. Например, так:

<div id='menu'>
<ul>
<li><a href="http://kuchamala22.blogspot.com/">Блог</a></li>
<li><a href="http://kuchamala22.blogspot.com/">Блог</a></li>
 <li><a href="http://dushechki.blogspot.com/p/blog-page.html">Обо мне</a></li>
<li><a href="http://dushechki.blogspot.com/p/blog-page_13.html">Контакты</a></li>
</ul>
</div>

4. Сохраняем гаджет.


3. Еще один вариант меню в блоге. Он реализован в блоге, который вы сейчас читаете - Grishina Elena.


Я использовала для закладок картинки. Для этого я сделала все шаги, как и во втором варианте.


1. Заходим в  "Настроить" - "Дизайн".

2. В поле под гаджетом "Заголовок" (шапка блога) добавляем гаджет "HTML"

3. Картинки  предварительно заливаем в веб-альбом, чтобы они получили адрес для ссылки.

4.Вставляем точно такой же код, как и во втором способе. Но поле, выделенное синим цветом заменяем на адрес картинки (адрес картинки можно посмотреть в веб-альбоми  в свойствах картинки)

Было так:

<li><a href="http://kuchamala22.blogspot.com/">Блог</a></li>

Стало так:

 <li><a href="http://kuchamala22.blogspot.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrRKuiPX9tUoviR6djTjqQyseI1XRMo9JJZE7KFmZYXlvcl2W0AoEnzaLLC3rUYFS4EQNz0TjZIT06Ku9sREwuC7LWdebDxyVoQyxYaCd5RCoTdH5jqqQegkzgXOFFtXObFQKqDM2Qytk8/s800/%25D0%25BD%25D0%25BE%25D1%2581%25D0%25BA%25D0%25B8.jpg" height="60" width="120" /></a>

Текстовое название страницы мы заменили на картинку.

 5. Сохраняем гаджет, смотрим)



---------------------------------------------------

 Если непонятно, пишите) Буду дополнять пояснениями.

Добавила продолжение - Как сделать меню с помощью ярлыков.


91 комментарий :

  1. Лена, большое, огромное спасибо! Это та инфа, которая мне очень нужна! Уже давно мучаюсь и не могу вставить страницы, почему вариант под №1 у меня в блоге не работает(((( точнее пишет, что гаджет "станицы" уже установлен, а где он, хз, не видно страниц нигде....
    Теперь сделаю все как надо, ура!

    ОтветитьУдалить
    Ответы
    1. Такая же ерунда и у меня :(((
      Лена, огромной спасибо!!!! Сейчас буду вторым способом пытаться вставить :)

      Удалить
    2. Чтобы они стали видимыми, нужно их видимыми сделать. Я подробно расписала как установить карту сайта на блоге, в том числе, как сделать страницы видимыми. Смотрите в блоге Блоговедение для чайников , в котором о сложном написано просто и очень понятно.

      Елена, извини, что влезла с комментариями к тебе в блог. Здорово пишешь!

      Удалить
  2. Лен, спасибо тебе! Полезное ты дело делаешь. У меня вечно что-то с блогом происходит, я и лезть туда лишний раз боюсь. А ты всегда так толково всё рассказываешь! Для таких как я-рай...

    ОтветитьУдалить
    Ответы
    1. Олеся, ты спрашивай)) я тебе напишу если что)

      Удалить
  3. Спасибо за такую полезную информацию. Как раз только сегодня думала, как это сделать.

    ОтветитьУдалить
  4. Спасибо, Лена! Пригодится тоже.
    А вот я еще хочу спросить тоже по блоговедению. Я сейчас провожу конфетку и ко мне уже записалось и продолжает записываться очень много читателей. Сама даже такого не ожидала))) Мой вопрос вот в чем: в списке читателей, я когда открываю чью-то фотографию, то у кого-то видно где их можно найти, собственный блог этого читателя. А у кого-то не видно, и таких людей очень много. Раньше когда у меня читателей было немного, мне конечно было интересно, кто эти люди, которые на меня подписываются, а я к ним в ответ не могу зайти. А сейчас когда читателей столькооооооо, и половина из них мне остаются недоступны, меня просто скоро разорвет от любопытства))) Или например, читатель подключен к сети Google+ Открывается его профиль в Google+ а там больше нет никакой информации... Вот, кстати как у тебя сейчас. Если бы я не знала кто ты и где искать твой блог, то по профилю в Google+ никогда бы не нашла.
    Почему так получается? Люди не правильно настраивают свой профиль, что не видно их блога? Или у меня что-то неправильно настроено, что я их не вижу? Возможно, у кого-то из них просто нет блога, но не у всех же. Знаю нескольких людей, у кого блог есть, а в профиле этого не видно. Не знаешь как это устранить? Какой блогосовет дать этим людям по настройкам их профиля, чтобы ко всем подписавшимся читателям можно было бы зайти в ответ в гости?
    Блин, сколько накатала... Надеюсь ты вообще поняла о чем я?)))

    ОтветитьУдалить
    Ответы
    1. Я поняла о чем речь, некоторые действительно не указывают доступ к своим блогам и тогда ссылки не видны, а гугл+ сама не разобралась, если честно(

      Удалить
    2. У меня у самой была такая же проблема, когда сентябрьскую конфету разыгрывала. Настроить видимость блогов в профиле должен сам владелец блога. Как это сделать, я писала тут - http://sc-sistercraft.blogspot.com/2012/08/blog-post_18.html

      Удалить
  5. Лена, спасибо огромное!!! Очень пригодится!

    ОтветитьУдалить
    Ответы
    1. Ира. так у тебя же все в порядке с этим))

      Удалить
    2. Лен, мне нравится,как у тебя здесь... с картинками! Только я ещё не придумала с какими :)))

      Удалить
  6. Лена, БОЛЬШОЕ спасибо! Мне прямо сейчас очень актуально и я точно воспользуюсь Вашей информацией. А еще часто меня выручает Наталья и её блог http://www.mycrib.ru/ Там есть разные уроки и ссылки на подобные умные блоги-сайты))) Еще раз СПАСИБО!))

    ОтветитьУдалить
  7. Спасибо....а главное вовремя как!!!! БЛАГОДАРЮ! Все понятно, доступно )))

    ОтветитьУдалить
  8. Спасибо большое, все очень понятно и доступно!я в блоггере просто дуб дерево ветвистое, и для меня этот пост Ваш,Леночка, просто очень очень пригодился)
    Я пошагово создала страницы - 2шт, и задумалась, а как их теперь заполнить существующими уже сообщениями???))))
    можно такой вопрос задать?т.е. как Вы заполнили свои странички?

    ОтветитьУдалить
    Ответы
    1. Главная заполняется сама постами, а остальные вручную, как обычные сообщения)

      Удалить
    2. да, то, что главная автоматически я поняла!
      а как это вручную, как обычные сообщения?

      Удалить
    3. Создаете страницу и пишите в ней - так же как пост создаете, есть закладка Страницы, Создать новую, все остальное так же как сообщение создавать, только на этой странице не будут посты, а будет то, что вы напишите.

      Удалить
    4. Вот наконец нашла ответ...а то замучилась с этим вопросом

      Удалить
  9. Второй способ очень мудреный и делается он гораздо проще. Просто при создании сраницы нужно указать будет ли это ссылка или страница.

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

      Удалить
    2. К закладкам-картинкам не подойдет, а просто к ссылкам, которые автоматически переходят на нужный сайт - вполне.

      Удалить
    3. согласна, если блоггер не глючит, то это лучший способ сделать ссылки-закладки на сторонние сайты

      Удалить
  10. Лен, мне тоже пишет что у меня страницы уже созданы, хотя их нигде нету. А можно их так сделать?: в первом способе слева где Дизайн написано есть вкладка Страницы и прям там если страницу создать,то будет ли она высвечиваться на главной странице блога?? О как муцдрено написала...

    ОтветитьУдалить
    Ответы
    1. Галя, надо пробовать, у меня нет такой проблемы, тут даже не посоветую(( попробуйте от простого к сложному, какой-нибудь способ и прокатит))

      Удалить
    2. Лично я так и создавала свои страницы - через редактор, вкладка "Страницы". Но, как Лена заметила, не все шаблоны поддерживают эту штуку. Надо все проверять. У меня все работает))

      Правда с недавних пор блоггер заглючил и с русскоязычными блогами стал вытворять фокусы-покусы с исчезновением страниц (вернее, страницы не отображались, хотя в редакторе видны были). Я буквально сегодня опубликовала пост про то, как их вернуть. http://sc-sistercraft.blogspot.com/2012/10/blog-post_7.html - Лен, буду рада, если ты добавишь ссылку (если сочтешь полезной).

      Удалить
    3. Наташа (правильно?), спасибо, я сама с эти парюсь, если честно, спасибо за инфо - буду пробовать и обязательно добавлю ссылку!!

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

      Удалить
  11. Вот еще, кстати, тема такая (кто бы научил как это делается)... У некоторых людей в блогах вижу, что фотографии в посте располагаются по 2-3 в ряд. У меня только по одной столбиком получается вставлять. Приходится делать коллажи, а я это не очень люблю, занимает время. Кто знает как это делать. Лена, извини, что я сегодня как в справочное бюро в твой блог обращаюсь)))

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

      Удалить
  12. Огромное спасибо!!! Так все доступно и понятно!!! Я от недавна ваша постоянная читательница и у вас здесь так уютно, интересно и очень талантливо!!!

    ОтветитьУдалить
  13. Лена, спасибо отдельное за информацию про картинки!

    ОтветитьУдалить
  14. спасимбочки огромное! сделала. потом попробую третий способ!

    ОтветитьУдалить
  15. Ааааа! Лена, спасибо огромное!! А я-то думала, как же люди это делают)) Сразу же себе сделала, как прочитала твой пост)))) Спасибо, спасибо, спасибо!!!!!

    ОтветитьУдалить
  16. Елена, спасибо! Благодаря вам и такой понятной статье, у меня в блоге появилось меню :))

    ОтветитьУдалить
  17. Лена,вопрос немного не потеме,но не знаю где еще спросить...Как добавить блог к себе в подписку,если у автора нет соответственного гажета на панели...Раньше такая кнопка была вверху,возле значка блоггер...теперь ее нет...Ты так хорошо разбираешься в блогере,может подскажешь)))

    ОтветитьУдалить
    Ответы
    1. Настя, я поняла. Бывают такие блоги, да) У меня почему-то тоже кнопка вверху перестала отображаться.
      Я делаю так: копирую адрес блога (можно любого сайта, не только блога) потом иду к себе в боковую панельку - "вдохновляюсь", жму на редактирование и нажимаю (внизу) "добавить в список" - есть два варианта, по url или из списка чтения, нам нужен первый, вставляю адрес скопированный и сохраняю. Всё)

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

      Удалить
  18. по вашей схеме создала своё меню страниц. А теперь никак не могу додуматься как в это меню внести уже имеющиеся сообщения, т.е. сообщения о детях внести в меню "дети", о взрослых в меню "взрослые", чтобы при нажатии в меню на какой-то пункт (дети например) попадать на сообщение именно о детях? Подскажите, пожалуйста, как это сделать.

    ОтветитьУдалить
    Ответы
    1. Лена, присоединяюсь к вопросу. Хочу сделать меню в виде картинок, с сылками на посты о игрушках, украшениях и прочего.
      Очень нуждаюсь в твоей подсказке иначе мозг просто взорвется от кучи непонятной информации из поисковиков :-)

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

    ОтветитьУдалить
  20. Спасибо классно все получилась!!!)

    ОтветитьУдалить
  21. Лена, огромное спасибо за ценную и своевременную информацию! Просто замучилась, пытаясь приблизить свой блоге к тому, что хочется. Не все получается, но буду работать над этим. Меню сделать (благодаря твоим подсказкам) получилось, правда, пока не все вкладки работают, но принцип я поняла. У меня проблемка (честно сказать, их целая куча) не могу редактировать свои посты (последнее время, раньше все было нормально) всплывает окошко с надписью These characters are not allowed in a post label: &. Не могу найти в чем причина :(

    ОтветитьУдалить
  22. Спасибо за информацию как сделать меню! А кто-нибудь смог реализовать выпадающее меню?

    ОтветитьУдалить
  23. Леночка, расскажи, плиз, как ты делала карту сайта. Меня очень интересует как сделать кнопки меню в виде картинок, чтобы при нажатии открывался список работ.
    В третьем пункте ты пишешь, как ты делала ссылку на второй блог. Это я поняла, а какой html будет для карты сайта?

    ОтветитьУдалить
    Ответы
    1. Лена, Оксана писала про карту сайта - http://bobrovayahatka.blogspot.ru/2012/11/blog-post_29.html

      Удалить
    2. Лена, спасибо. А то я бьюсь напрасно :(
      Какие только источники не перечитала, ничего не получается.А хочется сделать красиво...

      Удалить
  24. Лена, здравствуйте!
    Подскажите, как сделать вложенные страницы. Страницы делать получается
    Например, страница: Родителям
    Открываю её, а там идут советы родителям (на отдельных страничках)
    Или вот как у вас идет рубрика Для детей, а под ней куча разных ссылок.


    ОтветитьУдалить
    Ответы
    1. Татьяна, добрый день! Вопрос поняла, написала об этом ЗДЕСЬ

      Удалить
    2. Лена, добрый вечер!
      Спасибо огромное! По вашей инструкции всё получилось и вверху меню, и справа.
      Вот посмотрите http://tgt1953.blogspot.com/
      Скажите, пожалуйста, при переходе на эту ссылку всё время будет показываться последнее сообщение? Мне бы хотелось чтобы всегда загружалось 1 сообщение. Или я что-то не так сделала?

      Удалить
    3. Рада, что все получилось)) Чтобы первое сообщение загружалось, ему надо дату поставить какую-нибудь из будущего)) например 01.12.13 - в настройках сообщения правится это

      Удалить
    4. Лена, спасибо большое за советы. Всё получается

      Удалить
  25. Лена, здравствуйте! Загляните ко мне, когда у вас буде время http://fiska-wty4ki.blogspot.ru/. У меня в меню страниц какая-то серая заливка, когда на нее навожу, она исчезает. Попробовала сделать меню страниц с картинками, получилось вроде... а это серое все портит, получается рамка, она толстая, неровная. Как это убрать? Еще пара вопросов: у вас меню страниц в прямоугольном боксе, а у меня в закругленном. как сделать прямоугольный бокс? Какой путь указывать в новых страницах? Откуда его взять.
    Заранее спасибо за ваш ответ, с уважением)

    ОтветитьУдалить
  26. Аня, серая заливка и закругленные углы - это зависит от шаблона, который вы выбираете, попробуйте самый простой Simple. Ну или править в коде, что сложнее.
    Страницы создавать в панеле инструментов, сохранять их и заходить на них - потом и увидите адрес новых страниц.

    ОтветитьУдалить
  27. Лена, я вот читала-читала... Сами то страницы у меня есть... А вот как сделать как у вас, чтоб картинки были, а не стандартные ярлычки. Это я так понимаю третий способ.... Только не поняла, надо каждую кнопочку отдельно нарисовать в редакторе или сразу всю панельку длинную?

    ОтветитьУдалить
  28. А у меня ничего не получилось ((( Ни страницы сделать (пишут, что сделано уже, только вот, где - вопрос), ни картинки вставить (показывают только коды картинок). Эх...

    ОтветитьУдалить
  29. Лена, привет. Не чего не получается. Блин.... Меню страниц сверху сделала, а сообщение с ярлыками на соответствующую страницу не могу вставить. Чего то я не поняла. После того как я скопировала код страницы сообщения с ярлыком например "магазин", то как вставить на страницу "магазин". Помоги пожалуйста...

    ОтветитьУдалить
  30. Лена, спасибо большое! Воспользовалась сегодня этим уроком)))
    У меня еще один вопрос по страницам: как сделать как у вас, чтобы на каждой странице можно было разместить несколько обычных сообщений, с комментариями, а не одно... Поделитесь опытом, пожалуйста!

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

      Удалить
  31. очень интересный блог и статтьи.Еелна я создаю свой блог по-новому, и вот хочу сделать в этот раз его красивеньким....
    У меня вопорс,страницы создаются....но я вот хочу как у вас,чтобы все эти разделы меню (контакты,главная,магазин) были другим тесктом и с возможно картинками.С так понимаю что это создаются маленькие баннерочки в ФШ, а как их тогда вставить в блог,чтобы они отображались?

    ОтветитьУдалить
    Ответы
    1. да, это маленькие картинки, которые создаются в ФШ, потом они загружаются в веб-альбом, у них появляется адрес. А как их вставить в меню - я писала в п. 3

      Удалить
    2. Лена,получается что под шапкой блога, нужно удалить гаждет страницы и вместо него добавить HTML? А как загрузить фотки в веб-альбом? я пробовала в фото радикале, копирувала ссылку картинки и вставляла в HTML гаджет. Например образовалась кнопка магазины...но нажав на нее открывается новое окно фоторадикала...что я сделала не так? Подскажите пожалуйста?

      Удалить
  32. да, гаджет страницы не используем. Фотографии можно загружать сюда - https://picasaweb.google.com/home - зайдя под своим аккаунтом, вы попадете в свои альбомы. На альбомы надо ставить свойство - доступ всем. Потом нажимать на отдельное фото - увидите коды для вставки. Копируете и вставляете в код (см. п.3)

    ОтветитьУдалить
  33. Лена, надеюсь я Вас не бесспокою сильно...у меня получается и я безумно рада и благодарна Вам!!! Только есть некоторые неполадки, надеюсь вы поможите мне их устранить вот ссылка на мой блог http://victoriastepanest.blogspot.com/ . Меня беспокоит это же самое меню как убрать точки и линии, после каждого раздела.... а также как сделать чтобы эта кнопочка была активна...ничего не действует,если я нажимаю...а по идее должна же открываться пустая незаполнная страница???

    ОтветитьУдалить
  34. Виктория,попробуйте убрать теги списка из кода - li , посмотрите остальной код, видимо некорректно прописаны адреса-ссылки. Они должны быть все разные и вести на разные страницы. Даже если одна буква или тег из кода выпал, может не работать.

    ОтветитьУдалить
  35. ок....ну как убрать эти полоски и точки....все силы истрепала себе((( и может быть Вам....все проверила,прописано согласно Вашему шаблону и не убираются....методом тыка убирала в кодах...теперь картинки пропали,нужно по новому вставлять...

    ОтветитьУдалить
    Ответы
    1. уберите теги списка - ul, li

      Удалить
    2. Спасибо,Лена....по крупицам все получается, и я так рада!!!!....Остались последние шаги....
      Например для кнопки Главная, вот такая ссылка http://victoriastepanest.blogspot.com/
      как создать кнопки, например "обо мне", "ссылки" и т.д.???
      Вот у Вас наприер, во втором способе есть такая ссылка: Контакты. Мой вопрос где взять то,что идет после <a href="http://dushechki.blogspot.com т.е. /p/blog-page_13.html"?? И нужно ли прописывать эти слова: контакты, обо мне, ссылки?? Буду очень благодарна..

      Удалить
    3. Лена,Леночка, я сделала....не представляете сколько радости!! Ааааа!!! Не могу,улетаю на крыльях счастья!!Сама догадалась,спасибо!

      Удалить
  36. Я вот все поняла , но одно не могу сделать. А что дальше как добавить например в разделе "О себе"? Помогите пожалуйста)

    ОтветитьУдалить
  37. Этот комментарий был удален автором.

    ОтветитьУдалить
  38. Елена, спасибо Вам огромное! Все просто и понятно и никаких тонн кода))

    ОтветитьУдалить
  39. Спасибо ВАМ вы даже не представляете сколько я искала как это сделать!!

    ОтветитьУдалить
  40. Лена, спасибо огромное за эту статью, я голову сломала, как добавить страницы в свой блог... а тут... все гениальное - просто

    ОтветитьУдалить
  41. Лена, спасибо огромное за эту статью, я голову сломала, как добавить страницы в свой блог... а тут... все гениальное - просто

    ОтветитьУдалить
  42. Здравствуйте, Елена!
    Давно пытаюсь установить меню с картинками, попробовала много вариантов, не получается так как хочется.
    Воспользовалась и Вашим советом, более 5-ти картинок не загружаются. В чем может быть проблема? Спасибо!

    ОтветитьУдалить
  43. Спасибо большое, очень помогли, но у меня небольшой вопрос. Как добавить материал именно на определенную страницу? Заранее спасибо.

    ОтветитьУдалить
  44. Спасибо большое, очень помогли, но у меня небольшой вопрос. Как добавить материал именно на определенную страницу? Заранее спасибо.

    ОтветитьУдалить
  45. Елена скажите а как сделать чтобы меню было горизонтально, а то у меня оно всё в столбик и бод шапкой сайта. Спасибо

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

Спасибо за Ваш комментарий! ❤️