Как создать меню в группе вконтакте

Создание текстового меню в ВК

Данная инструкция описывает процесс создания простого текстового меню. Оно не пользуется особенной популярностью среди SMM-специалистов, но отлично подходит для того, чтобы детально разобраться в самом механизме.

  • В текстовом поле в столбик написать список пунктов будущего меню.
  • Каждый пункт заключить в квадратные скобки. Например, .
  • В начале каждой строчки поставить знак «Звездочка». Например, *.
  • Перед названием каждого пункта меню поставить значок «Вертикальная прямая». Например, *.
  • Между открывающейся квадратной скобкой и вертикальной чертой прописать ссылку на страницу, куда будет перенаправлен юзер. Например, [https://vk.com/club169913743|О компании].
  • В нижней части экрана нажать на кнопку «Сохранить страницу».
  • Для того чтобы ознакомиться с полученным результатом, можно кликнуть по вкладке «Просмотр». При необходимости в меню можно вносить изменения, пока оно не приобретет желаемый вид.

Таким образом, процесс создания текстового меню максимально прост. С ним справится любой человек, вне зависимости от опыта и уровня подготовки.

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

Инструменты для создания панели навигации

В языке разметки существует несколько способов создания меню. Основная их концепция заключается в использовании ненумерованного списка. Таким образом, в привычном для нас html 4 разработчики прописывают на станице теги <ul> и <li>.

Как оговаривалось в предыдущих публикациях, парный элемент <ul> создает маркированный список, а <li> — один элемент списка. Для наглядности давайте напишем код простого меню:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Навигация</title>
 </head>
 <body>
  <p><strong>Навигация сайта</strong></p>
  <ul>
   <li>Главная</li>
   <li>Новости недели</li>
   <li>Технологические достижения</li>
   <li>Чат</li>
  </ul>
 </body>
</html>

Бывают горизонтальные, вертикальные и выпадающие меню. Иногда панель навигации оформляют в виде изображения. Так как сегмент технологий расширился, веб-сервисы делают адаптивными, т.е. структура страниц автоматически адаптируется под размер экрана девайсов. Рассмотрим же перечисленные группы меню.

Как сделать меню в группе вк новый дизайн

Как сделать меню в группе вк новый дизайн? В 2015 году ВК обновили дизайн своих групп. На смену устаревшему пришел новый глянцевый плиточный дизайн. Теперь можно закачивать аватарку с большим разрешением и сложностью.

Главный вопрос в ее идее! Поиск тоже стал более простым и легким! Вообще за последние несколько лет появилась масса программ для этого.

В firestok можно найти картинки. Отредактировать которые легко на фотошоп-мастере. Для того чтобы сделать аватарку в новом дизайне нужно определиться с четкими размерами и разметками. Далее создаем новый документ и заливаем фон.

Вырезаем окошки (столько и таких размеров сколько картинок нужно вставить). Вставляем туда картинки. По краям общей картинки создаем слой «подвала», заливаем нужным цветом. Пишем текст, подгоняем по размеру, стилю, графике.

Все Аватарка готова! Можно загружать!

Аналогично можно создать все надписи в Меню

Ваша страница будет выделяться из остальных, а значит непременно привлечет внимание

Как сделать меню в группе ВК

Добавить меню в группу Вконтакте можно в одном из двух вариантов: текстовое или графическое. Первый можно воплотить в жизнь, не покидая страницу сообщества. Для второго потребуется работа с любым графическим редактором, например, Photoshop.

Текстовое

Сделать текстовое отображение кликабельных разделов в ВК несложно. Оно будет простое и лаконичное, а времени на его создание потребуется немного. Этот способ подойдет, для тех, кто не умеет работать в Фотошопе или других аналогичных программах.

  1. Откройте режим редактирования ранее созданного списка разделов.
  2. Напишите в столбик нужные разделы. Например, «Главная»;, «Чат»; или «Правила»;. При этом каждый раздел должен быть заключен в квадратные скобки.

Перед каждым словом перед скобкой поставьте звездочку *.

Между открывающейся скобкой и словом поставьте черту разделения |.
Перед чертой разделения вставьте ссылку на раздел в группе.

В итоге каждый раздел должен выглядеть аналогично этому примеру: *[https://vk.com/glavnaya|Главная]. После этого нажмите на кнопку «Сохранить страницу»; чтобы она в группе в ВК отображалась на главной странице.

Графическое меню

Сделать красивое меню в группе Вконтакте можно через любой графический редактор. После этого его можно добавить в интерфейс сообщества. Для начала вам следует подобрать фон и стиль текста для разделов. Но при создании следует учитывать некоторые нюансы:

  • ширина заставки должна быть не более 610 пикселей, а высота около 450 пикселей;
  • сохранять файл нужно для Web, если работа происходит в Фотошопе;
  • формат картинок рекомендуется определять, как PNG-24.

После того, как разделы созданы, можно добавить их в группу в ВК. Для этого сделайте следующее:

  1. Откройте редактор и нажмите в панели инструментов на иконку в виде фотоаппарата, чтобы добавить картинку.
  2. Загрузите изображения, которые вы создали в графическом редакторе.
  3. После загрузки в окно редактора добавятся строчки с названием файлов и их разрешением.
  4. Нажмите на иконку в виде скобок, чтобы перейти в режим визуального редактирования.
  5. В каждой строчке после цифр, указывающих разрешение поставьте точку с запятой ; и допишите nopadding. Причем пробелов между символами не должно быть.
  6. После слова nopadding поставьте разделительную черту | и вставьте ссылку на страницу группы.
  7. Внизу щелкните по кнопку «Сохранить страницу»;.

После этого красивое меню появится в соответствующей вкладке. Удалить меню в группе Вконтакте можно, просто удалив все строки из редактора.

Как создать меню в группе Вконтакте вики разметка

Вики-разметка – это специальный язык, используемый для оформления веб-страничек в группах социальной сети.

Данный инструмент позволяет создавать:

  • эффекты;
  • необычные меню;
  • таблички;
  • элементы навигации;
  • форматировать текст.

Словом, данная разметка позволяет создать мини сайт ВКонтакте. Это очень удобно, особенно для продаж и набора подписчиков.

Визуально такая система очень схожа с HTML-версткой. Но она не требует длительного обучения и специального склада ума.

Нюансы создания

Собственно, то, что было сделано выше (разделение и загрузка картинки) это уже элементы разметки. В этом и преимущество данного инструмента. Автоматическое превращение в теги, при простой загрузке картинок.

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

Убрать их можно, просто добавив тег noborder.

Вот так: ]

Основные теги представлены в таблице ниже:

Работа с картинками

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

[[photo37602118_351733570|options|text/link]].

Где options заменяется на:

  • noborder — снятие рамки вокруг изображения;
  • nopadding — снятие пробелов между изображением;
  • plain — вставка ссылки на картинку. Оформляется в виде текста, без графики;
  • nolink — снятие ссылки на картинку;
  • box — открытие изображения в окне;
  • NNNxYYYpx или NNNpx — задает размер фото в пикселях.

Создание таблицы

Независимо от того, какое меню (текстовое или графическое) вы создаете, без вставки таблицы вы вряд ли обойдетесь. Иначе можно просто вставить текст в поле новости и не форматировать его, затратив так много времени.

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

  • {| символ начала таблицы, без него таблицы быть не может. Используется всегда;
  • |+ отвечает за расположение названия таблицы по центру. Ставят после символов начала таблицы. Используется по желанию;
  • | обозначает начало новой строки и ячейки;
  • | символ, делающий ячейку прозрачной;
  • ! делает ячейку темным цветом. При его отсутствии обязательно нужно применять предыдущий знак;
  • |} означает конец таблицы. Необязательный символ, однако, используется, чтоб предотвратить возникновение ошибки.

При заполнении таблицы, содержание каждой ячейки необходимо ставить после знака |, а при разделении ячеек, нужно продублировать типы строки вот так: || или !!.

Особенности разметки

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

С целью избегания основных ошибок следует ознакомиться с основными из них:

  1. необходимо быть внимательными, при изменении размера картинки – если она менее 131 пикселя, ее качество значительно ухудшится;
  2. ширина картинки не должна превышать 610px;
  3. на одной wiki-странице запрещено размещать больше 17 незакрытых тегов;
  4. при изменении ширины картинки, ее высота изменяется автоматически и пропорционально;
  5. список внутри таблицы следует создавать с помощью тега

  6. в одной строке разметки должно быть не больше 8 элементов списка.

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

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

Способ 2. Сервис «Menumake» — поможет сделать Меню быстро

Данный сервис позволит осуществить создание меню для сообщества ВК за достаточно символическую плату. Он позволяет автоматизировать процесс и буквально за несколько минут сделать отличное меню для вашей группы, без необходимости оплачивать услуги профессиональных дизайнеров.

  1. Чтобы воспользоваться «Menumake» перейдите на данный сервис, и авторизуйтесь на нём с помощью данных вашего аккаунта в VK, при этом сервис сразу отобразит созданные вами группы.
  2. Возле нужного сообщества кликаем на «Создать меню», и вы перейдёте на страницу редактора.
  3. Сервис автоматически подтянет все имеющиеся элементы группы.
  4. При их редактировании необходимо будет нажать на стрелочке слева от пункта, выбрать нужное значение, а затем (при необходимости) указать ссылку справа.Выбор шаблона для меню

Редактирования отображения Меню

Программа обладает набором готовых шаблонов для ВК, размеры пунктов, их вид, шрифт, его цвет и так далее – всё можно настроить с помощью имеющихся в сервисе «Менюмейк» инструментов.

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

https://youtube.com/watch?v=PAgDzhFKp1c

Создание верхней панели навигации

Шаг 1) Добавить HTML:

Пример

<!— Верхняя навигация —><div class=»topnav»>  <!— Центрированное ссылка —>  <div class=»topnav-centered»>    <a href=»#home» class=»active»>Главная</a>  </div>  <!— Ссылки, выровненные по левому краю (по умолчанию) —>  <a href=»#news»>Новости</a>  <a href=»#contact»>Контакт</a>  <!— Ссылки, выровненные по правому краю —>  <div class=»topnav-right»>    <a href=»#search»>Поиск</a>    <a href=»#about»>О Нас</a>  </div></div>

Шаг 2) Добавить CSS:

Example

/* Добавить черный цвет фона для верхней навигации */.topnav {  position: relative;  background-color: #333;  overflow: hidden;}/* Стиль ссылок внутри панели навигации */.topnav a {  float: left;  color: #f2f2f2;  text-align: center;  padding: 14px 16px;  text-decoration: none;  font-size: 17px;}/* Изменение цвета ссылок при наведении курсора */ .topnav a:hover {  background-color: #ddd;  color: black; }/* Добавление цвета к активной/текущей ссылке */.topnav a.active {  background-color: #4CAF50;  color: white;}/* Центрированный раздел внутри верхней навигации */.topnav-centered a {  float: none;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}/* Выровненный по правому краю раздел внутри верхней навигации */.topnav-right {  float: right;}/* Адаптивное меню навигации — отображение ссылок друг на друга, а не рядом друг с другом (для мобильных устройств) */@media screen and (max-width: 600px) {  .topnav a, .topnav-right {    float: none;    display: block;  }  .topnav-centered a {    position: relative;    top: 0;    left: 0;    transform: none;  }}

Совет: Чтобы создать удобные для мобильных устройств, отзывчивые навигационные панели, прочитайте наш учебник Как иделать — Отзывчивую верхнюю навигацию.

Совет: Зайдите на наш учебник CSS Навигации чтобы узнать больше о навигационных барах.

Делаем красивую графику

В новом дизайне сайта Вконтакте, были изменены размеры для графики. Ниже вы найдете актуальные значения.

  • Аватар для группы — 200×300 пикс
  • Баннер в описании — 510×271 пикс

Подготовьте изображения в нужных размерах. Я возьму уже готовые картинки, чтобы показать вам на их примере.

Итак, давайте сделаем красивое оформление, разделив общую картинку на две части. В итоге у нас получится единый дизайн.

Для начала загружаем аватарку. Идем в группу, и нажимаем «Загрузить фотографию».

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

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

Идем на стену. Здесь в блоке «Добавить запись», нажмите на значок «Фотография».

Загрузите вторую подготовленную картинку. Обязательно выберите публикацию от имени сообщества. И затем нажмите «Отправить».

Теперь запись нужно закрепить (см. как вставить картинку в описание группы вконтакте). Возвращаемся к новой записи, и в правом верхнем углу разворачиваем меню. Здесь нажимаем «Закрепить».

Теперь обновите страницу, и посмотрите результат.

Единственный минус — картинки находятся на разном уровне. Но это связано с тем, что они не правильного размера. Аватарка должна быть больше по вертикали. Тогда они будут на одном уровне.

А теперь вертикально. Я сказал вертикально!

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Вертикальная панель</title>
  <style>
   li{
    display: block; 
    margin: 13px;
    padding: 13px;
    background: #FF8C00;  
    width:20%;
    text-align:center;
    font-size:20px;
    border-radius:10px;
   }
   a {
    color: #fff;  
   }
   li:hover {
    background: #1C1C1C; 
   }
  </style>
 </head>
 <body>
  <menu>
    <li>Главная</li>
    <li>О компании</li>
    <li><a href="3.html">Продукция</a></li>
    <li><a href="4.html">Контакты</a></li>
  </menu>
 </body>
</html>

Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block, который собственно и отвечал за горизонтальное расположение пунктов навигации.

Оплата товаров вконтакте

Что касается оплаты приобретенных в группах товаров или услуг, разработчики предлагают несколько методов:

  • Денежная оплата товаров вконтакте производится непосредственно после вручения курьером Вашей посылки;
  • Перечисление денег за услугу может осуществляться через систему платежей VK Pay;
  • Индивидуальные способы передачи денег. К примеру, покупатель и продавец самостоятельно решают каким способом перевести деньги;
  • Если Вы воспользовались услугами компании, то можно забрать товар самостоятельно со склада, где и произвести оплату.

Приобретая товары вконтакте

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

Меню группы Вконтакте шаблоны

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

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

Что такое меню ВКонтакте и для чего оно нужно?

Меню – это лицо группы. Первое на что наталкивается любой посетитель вашего сообщества это меню. Поэтому ваша задача продумать его максимально удобно и привлекательно. Во-первых, вы должны определиться с тем, что вы именно хотите донести своим подписчикам. Это зависит от миссии самого сообщества. Ведь бывают совершенно разные цели создания группы: познавательная, развлекательная или же цель продать товар/услугу. Отталкиваясь от этого, решите, какая информация наиболее важна для ваших будущих подписчиков.

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

Поэтому обязательно учитывайте тематику сообщества при создании меню.

Как сделать меню группы ВКонтакте с кнопками

Графические кнопки часто используются контент-менеджерами, администраторами, модераторами при оформлении группы ВКонтакте: это довольно удобно

Такой прием удерживает внимание даже случайного посетителя, “заставляет” его задержаться на странице, изучить ее содержание детально (и даже подписаться на обновления). Отвечаем на вопрос: как создать меню в группе ВКонтакте?

  • Выберите любую яркую картинку, которая вписывается в тематику и стилистику блога. Затем загрузите ее в фотоальбом на личной страничке или в альбом сообщества.
  • Найдите ее в фотоальбоме, скопируйте ссылку на фотографию в адресной строке вашего браузера.
  • Откройте режим редактирования группы, как описано в предыдущем разделе статьи. Нужен режим wiki-разметки.
  • Пишем код. photo-AAAAA_BBBBBB — вставьте эту ссылку из адреса фото. Далее: |400px| (ширина изображения, можно выбрать любое значение, до 600 px). И, наконец, рабочая ссылка — скопируйте ее в текущей строке браузера.
  • Заключите написанное в двойные квадратные скобки. Конечный вид ссылки: ].

Создаем меню для группы Вконтакте

Первым делом создадим графический макет будущей менюшки. Для этой цели мы будем использовать программу Photoshop (для простенькой картинки вполне сгодится стандартный Paint). Откройте программу и создайте новый документ:

Я буду создавать картинку размером 500×500 пикселей, однако, в зависимости от количества и расположения разделов размер картинки может быть другим.

Теперь скачайте изображение, которое хотели бы использовать в качестве фона и перенесите его на холст. Если Вы профессионально владеете программой, то можно нарисовать фон самостоятельно.

Затем напишите на фоновой картинке заранее продуманные разделы, кнопки и телефоны. Их мы  в последующем превратим в ссылки:

Для того чтобы разделы превратились в ссылки, картинку нужно разрезать по частям. В этом нам поможет инструмент “раскройка” (Slice Tool):

Чтобы сделать разрезы как можно точнее, нужно задействовать вспомогательные линии, нажав CTRL+R. Наведите курсор мыши на верхнюю линию и перетяните ее на изображение примерно таким образом:

Последним шагом будет разрез объектов. Чтобы это сделать кликните по кнопке “фрагменты по направляющим” (Slices From Guides) на верхней панели инструментов:

Сохраняем каркас для web устройств. Формат картинки ставим JPG, выбираем максимальное качество и сохраняем, например, на рабочий стол:

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

Подпункты в меню: выпадающий список

Мы с вами рассмотрели основные группы навигационных панелей, однако существует еще несколько разновидностей или лучше сказать дополнений.

Иногда возникают такие ситуации, когда некоторые из пунктов дополняют основные. В этом случае не обойтись без выпадающих списков. Они создаются путем преобразований инструментами css.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Выпадающий список</title>
        <style>
body {
    padding-left: 30%;
    font-size: 18px;
}
.m-menu {
    margin: 0;
    padding: 9px;    
    width:50%;
    text-align:center;
    border: 3px solid #000;
    background: #FF8C00;  
}
.m-menu > li {
    position: relative;
    display: inline-block;
 }
.m-menu a {
    display: block;
    margin-left: -2px;
    padding: 13px;
    color: #fff;
    border-left: 3px solid #fff;
}
.m-menu a:hover {
    background: #1C1C1C;
}
.m-menu .s-menu {
    left: 10px;
    position: absolute;
    display: none;
    width: 155px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #FF8C00;
}
.m-menu .s-menu a {
    border: 1px solid #000;
}
.m-menu > li:hover .s-menu {
    display: block;
}
        </style>
    </head>
    <body>
        <ul class="m-menu">
            <li><a href="#index">Главная</a></li>
            <li>
                <a href="#product">Продукция</a>
                <ul class="s-menu">
                    <li><a href="#1">Конфеты</a></li>
                    <li><a href="#2">Торты</a></li>
                    <li><a href="#3">Печенье</a></li>
                </ul>
            </li>
            <li><a href="#adress">Контакты</a></li>
        </ul>
    </body>
</html>

В данном примере я разделил единицы меню на два класса:

  1. m-menu
  2. s-menu

Первый класс отвечает за основное меню, а s-menu – за подменю.

В коде можно встретить такой прием, как .m-menu > li:hover или .m-menu > li.

При этом знак «>» видоизменяет селектор так, чтобы блочно-строчными были только объекты, относящиеся к верхнему уровню.

Изначально подменю было задано display: none, что оповещает обработчик скрывать данный объект. После наведения на элемент навигации с указанием hover, значение свойства display меняется на block и поэтому открывается выпадающий список.

Как видите, реализация такого приема очень простая.

Теперь вы освоили основные виды навигационных панелей и можете самостоятельно их видоизменять, дополнять и модернизировать. Если вам понравилась моя статья, то подписывайтесь на обновления блога и делитесь источником знаний с друзьями и коллегами. Пока-пока!

 
Прочитано: 3797 раз

Второй этап – верстка меню Вконтакте

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

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

Но прежде чем начинать верстать меню их надо загрузить в фотоальбом. Его можно назвать «фото для меню» и сделать недоступным для посетителей. Как только закончите загрузку, возвращайтесь в текстовый редактор. По умолчанию ваша новость так и называется «Свежие новости», но вы ее можете переименовать, как угодно, например «Меню». Для того чтобы начать непосредственную работу над созданием меню надо активировать режим wiki-разметки. Сделать это можно одним нажатием на пиктограмму ромба.

После того, как вы активируете вики-разметку в поле текстового редактора надо вставить код:

]

Этот код продублируйте ровно столько раз, сколько пунктов в вашем меню. После этого надо прописать ссылки на фотографии. Ссылку вставляйте вместо значения photo133337_133701019, а вместо значения page-13333337_13333337 вставляете ссылку на раздел или страницу, которая должна выводиться посредством клика на определенный пункт меню

Важно знать, что ссылку на страницу не надо копировать полностью, достаточно одной части

Кстати, напомним, что вам необязательно заниматься всеми этими хитросплетениями — просто попробуйте этот сервис. Он за 100 рублей все это сделает на полном автомате.

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

Но прежде чем сохранять меню просмотрите, все ли правильно у вас получилось Для этого опуститесь немного ниже на странице редактирования вики-разметки и нажмите на ссылку «Предпросмотр». Ниже отобразится то, что у вас получилось. У нас, например, получилось вот что:

Устраивает? Тогда жмем «Сохранить страницу» и проверяем ее работу непосредственно на странице группы. На этом можно считать работу над меню законченной. Надеемся, что оно принесет вам только положительные результаты.

Кстати, знаете ли вы, что наполнение групп Вконтакте можно автоматизировать, используя этот сервис? Обязательно попробуйте, вам понравится!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector