Как сделать меню оформить


Как сделать меню оформить

Как сделать меню оформить

Как сделать меню оформить


Лучшие новости сайта

menyu v gruppe vk Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

Оформить группу в контакте? Да, пожалуйста! icon wink Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

Рада, что вы читаете мою ! icon smile Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК. Сегодня я продолжу свой «Погружение в группы ВК». В третей части «сериала», я рассказывала и показывала, . Сегодня же, поговорим об оформлении меню группы вконтакте!

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

Вопрос 1: Первый и самый распространенный: «где код в меню?» или «если нет закладки при редактировании «Исходный код» как добавить внутреннюю страницу?» или «Я все равно не понимаю, что сделать, если не появляется код!»

Ответ 1: ВК изменил редактор, теперь для переключения между визуальным редактором и кодом всего один клик (правый верхний угол редактора):

gde kod v redaktore menyu grupp vk Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

Что бы проверить в каком вы редакторе: подведите мышкой на эту кнопку, напишите какой-нибудь текст и выделите его жирным — если появляются не обычные символы, значит — это код

Вопрос 2: Второй, реально проблематичный: «а как убрать пробелы между картинками??»

Ответ 2: Признаю, сама испугалась, когда впервые у клиента «поехала» менюшка. Сейчас я это быстро правлю, а тогда было не весело. Смотрите:

meny vk sdvinulos Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

Добавь тег nopadding; и все станет на свои места!

Между картинками вкрадывается пространство и меню выглядит битым. Для несведущих, может это и не нормально, а для , это как минимум не профессионально. Так в чем же тут дело? А, все очень просто! В ВК постоянно происходят какие-то обновления, вводятся новые алгоритмы… да еще и редактор кривоват… бывает ни с того, ни с сего из кода выпадают важные теги и тогда мы видим такую картину. Что бы исправить это, нужно заглянуть в код и внести необходимые коррективы. Формат кода, должен быть вот таким:

Шаблон: photoцифры_цифры|ширинаxвысотаpx;nopadding;|ссылка на внутреннюю страницу Пример: photo7632142_296911703|370x45px;nopadding;|page-32734125_44298120

Обычно картинки меню раздвигаются потому, что из кода выпадает nopadding; — вставляем его на место и все выравнивается. Перед тем как сохранять результат, жмите на кнопку «Предпросмотр», что бы убедиться в том, что все ровно стало.

Вопрос 3: Новость. В октябре 2012г., в принудительном порядке, Вконтакте обрезал автары групп и пабликов. Теперь их размер имеет общий стандарт 200х500 пикселей. Так, что если у вас в группе аватар был больше, то сделайте апдейт (обновите аватар).

Кстати, вмести с обрезкой, ВК ввел еще одно нововведение относительно фотографий групп: теперь кликнув на аватар, мы так же как в аккаунте, сможем увидеть все альбомы сообщества. Это удобно! И из этого рисуется новый функционал в коммуникациях группы.

Та-а-ак, с вопросами закончили… теперь переходим к самому созданию меню!

Шаг 1. Как создать меню в контакте и сделать вложенные страницы:

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

kak sozdat menyu v gruppe vk1 1024x638 Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

Как вам моя шпаргалка? icon smile Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

Вот такая шпаргалка у меня получилась! icon smile Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК. Для большей ясности, распишу каждую цифру:

  1. Управление сообществом. Переходим в настройки группы.
  2. Включаем материалы. Сохраняем изменения (если еще не включили).
  3. Теперь на главной страницы группы, появилась дополнительная вкладка «Новости группы». Наведем мышкой в правый угол, нажмем на стрелку «Редактировать».
  4. Изменим название вкладки. Здесь будет у нас меню, поэтому напишем, что-то соответствующее и привлекающее.
  5. Эта кнопочки переключения между визуальным редактором и кодом. Мы будем производить все работы с кодом wiki разметки, поэтому перейдите именно в этот режим.
  6. Создадим внутренние, вложенные страницы. Для этого определимся со списком меню, каждое слово меню, возьмем в двойные квадратные кавычки — слово.
  7. Нажмем кнопку «Предпросмотр».
  8. Слова станут ссылками!
  9. Сохраним результат. Не переключайтесь в другой режим, пока не сохранили результат. Кстати, рекомендую периодически сохранять код меню к себе на компьютер.
  10. Отступление. Доступ к странице. Для открытых групп, эта функция больше не работает.
  11. Теперь заполним вложенные страницы контентом. Откроем ссылку меню в новом окне. Убедимся, что мы попали именно на ту страницу. Добавив нужное нам слово в квадратные кавычки, мы уже дали вложенной странице название.
  12. Наполним содержанием эту страницу. Здесь можно добавить как обычный текст, так и новые вложенные страницы, уводящее посетителя вглубь мини сайта. В любом случае, выбор за вами!
  13. Добавив нужный контент на страницу, сохраним результат.
  14. Теперь нам нужно, прописать адрес этой страницы. Иначе, если этого не сделать, в адресе страницы будут кракозябрики и в какой-то момент, вы можете потерять все свои вложенные страницы. Для этого копируем подчеркнутые цифры – от слэша до вопросительного знака…
  15. …и несем этот адрес страницы в наше меню! Помните, оно открыто у вас в соседней вкладке?! icon smile Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК. Вставляем адрес в нужное место.

Проделайте, эту операцию со всеми вложенными страницами и ваше меню будет готово.

Есть! Меню создали, внутренние страницы сделали, заполнили их, теперь перейдем к созданию красивого графического меню. icon smile Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

Шаг 2. Как создать красивое графическое меню в контакте и поставить его:

Всю теорию о том, как устроена wiki разметка в контакте, я вам давать не буду, у нас сейчас другие цели. Для создания визуального меню в группе ВК, всей вики-разметки знать не нужно. Перейдем к созданию визуального меню!

Для начала покажу вам код и результат своего меню:

kod menyu vk 645x1024 Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

Признаюсь, я его сделала специально, что бы написать эту статью. Все «руки не доходили», знаете, как «сапожник без сапог». Но теперь и я с визуальным меню в группе ВК! icon smile Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

Как рисовать картинку для меню, я рассказывать не буду, это дело дизайнеров, я сама рисую, но не столь профессионально.  , в конце статьи, я давала видео о том, как в фотошопе рисовать простенькое меню, ознакомьтесь, возможно вы справитесь своими силами. Если нет закажите картинку меню у .

Я покажу вам средний по сложности вариант установки меню. Разница в количестве элементов. Меню, которое разрезается просто на полоски, является самым простым его исполнением. Чем больше кликабельных кнопок в строке, тем более сложно его исполнение. Хотя, зная особенность, все просто! Дело только во времени. Итак, ширина картинки должна быть:

- 370 px – если в строке у вас будет два и более объектов, как у меня кнопочки соц сетей

- и max 388 px – если разрезаем картинку по-простому, только на строки, не разделяя на мелкие объекты. Вот это та особенность, которую нужно знать, при нарезании меню на кнопки. У меня размер картинки всего меню получился 370х456 px.

После того как картинка разрезана на нужное количество объектов и сохранена в отдельный альбом, загружаем этот альбом в ВК. Загружаем в профиль аккаунта, а не в группу! Так как в альбомах группы больше нет возможности скрывать альбомы. Технических альбом в корпоративной (например) группе, совсем не нужен, поэтому прячем элементы меню в альбом аккаунта:

albom vk Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

Технический альбом ВК

После того как вы настроили конфиденциальность «Только Я». Переходим к установке самого меню. Дам вам пример кода, что бы был для вас шаблоном и разберем из чего он состоит:

photo7632142_296911699|370x101px;nopadding;|http://frilka.com

где, photo7632142_296911699 – это адрес картинки! Его мы смотрим в адресной строке картинки:

foto vk Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

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

Вам нужен короткий адрес картинки, для этого перейдите в сам альбом:

albom vk2 Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

Перейдите в сам альбом, что бы получить нужный адрес картинки!

…и начиная с первой картинки, переносите их в меню группы.

Далее, идет разделительная черта «|» и размер картинки 370x101px; — что бы его узнать, нужно открыть альбом на компьютере, выделить нужную картинку и посмотреть какого она размера:

foto dla vk Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

Добавляем размер картинки в код меню!

Итак, адрес картинки добавили, размер указали, теперь ставим, тег nopadding; - он нужен для того, что бы наши картинки плотно прилегали друг к другу. И последним этапом ставим ссылочку на страницу, куда будет попадать посетитель, после того как кликнет на картинку.

Здесь небольшое уточнение! Внешние ссылки, ссылки на альбомы ВК и обсуждения пишем полностью, а ссылки на внутренние страницы в формате page-32734125_44298120  . В начале и конце строки, не забываем ставить по две квадратные кавычки и без пробелов.

Уточнение 2: когда мы ссылаемся на внутренние страницы без картинок, то для обсуждений, альбомов и внешних ссылок ставим одинарные квадратные кавычки.

Строчки, в которых у вас два и более элемента, в код вставляем без пробелов. Вставляйте каждую строку картинки друг за другом. Потому, что если вы нажмете Enter после строки с картинкой, то картинка перепрыгнет на новую строку и меню сдвинется. Нам нужно, что бы меню отображалось цельным, поэтому ни каких лишних пробелов и «иртеров» нам не надо! icon smile Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

После того как вы перенесли все картинки в меню и оформили их (размер, ссылка), сохраняем результат и любуемся своей работой! Все! Готово!

Буду рада, если я смогла вам донести информацию. Расскажите, как у вас получилось с установкой меню! Ответила ли я на ваши вопросы или нет? Может кто, что хочет добавить? Буду рада общению в комментариях. wpml bye Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

——-

Читайте Пост-Сериал «Погружение в группы ВК»:

 

С Уважением и Любовью, ! icon smile Вконтакте. Часть 6: Как оформить группу в контакте. Как создать и установить красивое графическое меню в ВК.

Похожие записи:

Бесплатное создание блога на WordPress. Инструкция №1

Как создать красивый фон twitter аккаунта? (3 варианта)

Обзор программы Викинг Инвайтер (ViKing Inviter Plus)

Как настроить приватность во Вконтакте и сделать так, что бы не желательные особы не беспокоили вас ...


Источник: http://frilka.com/vkontakte-chast-6-kak-oformit-gruppu-v-kontakte-kak-sozdat-i-ustanovit-krasivoe-graficheskoe-menyu-v-vk/


Как сделать меню оформить

Как сделать меню оформить

Как сделать меню оформить

Как сделать меню оформить

Как сделать меню оформить

Как сделать меню оформить

Как сделать меню оформить

Как сделать меню оформить