Как создать меню Вконтакте?
Группа Вконтакте, которая красива по дизайну, удобна по навигации и наполнена полезным материалом, всегда вызывает уважение и большое желание «погулять» по её страницам, почитать внимательнее материал, сделать лайки и даже репостнуть.
Поэтому, у создателей сообществ на первом этапе её оформления и наполнения, всегда возникает вопрос, какое дизайнерское решение будет для его группы правильным, из каких «кнопок» будет состоять меню и каким содержанием наполнить страницы мини сайта? Ведь всё это, в совокупности, позволит группе Вконтакте быть более привлекательной, понятной, рабочей и живой. И сегодня я расскажу, как создать красивое меню Вконтакте и на что обратить внимание.
Подготовка к созданию меню Вконтакте
Для того, чтобы сделать меню, вначале нужно определиться с его содержанием и внешним видом. Вы должны знать, из каких разделов будет состоять ваше меню. Это первое. А второе, какую картинку вы будете использовать в его дизайне и подготовить её.
Для этого берётся обычный лист бумаги и на нём рисуется (прописывается) макет вашего меню. А именно, названия ваших «кнопок», которые будут вести на страницы, наполненные каким-либо содержанием. Имея перед глазами данный эскиз, вам проще будет идти к намеченной цели.
В прошлой статье в видео уроке я наглядно показала, как создавать текстовое меню. А в этой статье я расскажу и покажу ещё раз на своём примере. Итак, приступим. Моя тестовая группа имеет название «Здоровье».
Моё меню будет состоять из трёх кнопок:
- Секреты здоровья (переход на страницу с рекомендациями и советами по здоровью)
- Здоровая шея (переход на страницу, где будет описание и ссылка на платный лечебный курс по лечению остеохондроза шеи)
- Здоровая спина (переход на страницу, где будет описание и ссылка на бесплатный лечебный курс по лечению спины).
Создание меню
- Для создания меню заходим в «Управление сообществом» во вкладку «Информация», находим «Материалы» ставим «Ограниченные» и сохраняем.
- Далее возвращаемся на главную страницу группы и сверху видим надпись «Свежие новости», переходим в данный раздел через «Редактировать».
- В открывшемся окне меняем надпись «Свежие новости» на «Меню», например. В пустом поле вписываем названия наших страниц — кнопок, слова обязательно закрываем двойными квадратными скобками без пробелов. Каждое название в новой строке.
- Внизу страницы нажимаем на «Предпросмотр» и видим названия «кнопок», которые стали кликабельны.
- Сразу же в разделе «Доступ к странице» откорректируйте настройки. Просматривать страницу могут все пользователи, редактировать – только администраторы, иначе завалят спамом. Сохраните изменения.
- Возвращаемся на главную страницу группы, нажимаем на «Меню» и видим кликабельные названия страниц. Нажимаем сбоку на «Редактировать».
- Следующий наш шаг, это узнать адреса наших страниц – «кнопок». Нажимаем в меню на «Здоровая спина» и на странице «Здоровая спина» нажимаем на «Редактирование»
- Далее, в окне браузера мы видим вот такой адрес и берём из него только то, что выделено синим цветом. Наш адрес страницы «Здоровая спина» должен выглядеть так: page-116040065_52123446, а не так:
https://vk.com/page-116040065_52123446?act=edit - Открываем все три страницы через «редактирование» и копируем у себя в текстовый блокнот три адреса. В моём случае, это выглядит так:
page-116040065_52123446
page-116040065_52123461
page-116040065_52123485 - Далее, нам нужны адреса наших картинок, которые будут выполнять функцию кнопок. Для этого загружаем приготовленные картинки в альбом своего личного аккаунта и в настройках закрываем его от просмотра, что бы эти нарезанные картинки никто кроме вас не увидел. Если же вы загрузите их в альбом группы, то видеть их будут все, что на мой взгляд не совсем эстетично.
- Когда загрузите все картинки в альбом, предварительно придумав ему название и отредактировав на предмет приватности, то нажмите по очереди на все картинки и перепишите адреса этих фото.
- Для этого смотрим в адресную строку браузера. Копируем нужную нам часть и вставляем в свой рабочий текстовый блокнот. Адреса картинок должны иметь вот такой вид:
В моём случае адрес верхней картинки имеет вот такой вид:
photo189052615_337249677 - Заходим в меню через «Редактирование», спускаем вниз текстовое меню и вверху прописываем адреса наших страниц – кнопок. Это выглядеть будет так, пример моей страницы:
[[photo189052615_337249677|388px;noborder;nopadding|page-116040065_52123446]]
Для наглядности смотрим фото:
Я указала цифрами, что за что отвечает и обозначает:
1 – это адрес нашей картинки;
2 – это ширина картинки, а значит ширина нашего меню, эту цифру можно менять, но идеальный размер 388 пикселей. Эта цифра должна быть во всех трёх строках одинакова;
4 – это адрес нашей страницы меню
Для того что бы не ошибиться, можно скопировать мой образец и вписать туда адреса своих картинок и страниц. - Нижнее текстовое меню под цифрой 5 убираем (стираем) и нажимаем внизу на «Предпросмотр». Видим своё красивое меню — сохраняем страницу.
- Переходим на главную страницу группы, обновляем её и нажимаем на «Меню». Всё! Наше меню готово! Нажимая на надписи, мы будем попадать на страницы. Пока они пустые, но всему своё время.
Успехов и Удачи!
mirtani.ru
Как Вконтакте создать динамическое меню с эффектом навигации | DesigNonstop
Многочисленные просьбы моих настойчивых читателей и просто любознательных пользователей возымели свое действие. Я наконец то создала урок, в котором мы будем учиться делать динамическое меню Вконтакте с эффектом нажатых кнопок! По аналогии с обычными сайтами интернета, когда посещенная ссылка маркируется особым способом (нажатая кнопка, подчеркивание итд) — мы будем создавать такую же конструкцию Вконтакте, с помощью созданных страниц и графического оформления. Для начала мы сделаем графические заготовки в фотошопе — создадим шапку меню и кнопочки двух видов. Потом создадим несколько страниц Вконтакте, согласно пунктам нашего меню. И напоследок сделаем хитрый прием, который, собственно, и создаст нам иллюзию перехода по ссылке. Урок достаточно сложный и подходит для тех, кто уверенно себя чувствует в функционале Вконтакта. Все манипуляции я буду производить на примере своей группы Вконтакте, где этот эффект реализован вживую. Итак, за дело!
Шаг 1. Создаем в фотошопе шапку меню
Создаем в фотошопе документ шириной 600 пикселей. Высота может быть разная, на ваше усмотрение. Вы можете поместить в шапку любую видовую фотографию, коллаж, информационный баннер и прочие графические картинки. В данном сучае я использовала такой вот рекламный баннер размером 600х172 пикселя.
Шаг 2. Создаем в фотошопе строку навигации
Теперь нам надо создать строку навигации. В данном примере я использовала в качестве кнопок только текст. Но на ваше усмотрение можно создать цветные кнопки и уже на них написать текст. Делаем так — создаем в фотошопе прямоугольник 600х56 пикселей и в данном случае заливаем его белым цветом. Потом в строку пишем пункты меню — где-то порядка 5-6 пунктов, не больше. Большее количество пунктов будет смотреться зажато.
Шаг 3. Создаем в фотошопе строку навигации в нажатом состоянии
Шаг 4. Нарезаем готовые картинки
На данном этапе нам надо нарезать картинки из Шага 2 и Шага 3. У нас должно получиться два комплекта по пять кнопок — одна кнопка без подчеркивания, другая кнопка с подчеркиванием. Кнопки каждого отдельного пункта (с подчеркиванием и без подчеркивания) должны быть одинакового размера. На картинке ниже представлено все наше графическое оформление — десять кнопок и одна шапка меню.
Шаг 5. Создаем Вконтакте страницу Меню
Теперь переходим ВКонтакт. Наша задача — создать отдельную страницу под названием «Меню». Для этого мы воспользуемся таким кодом
http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы
где вместо ХХХ мы подставим id нашей группы, а вместо текста «Название страницы» мы напишем Меню. Теперь надо выяснить id группы. Как это сделать? Заходим на главную страницу группы и смотрим на наши записи на стене — прямо под блоком «Добавить запись» будет написано «Все записи» — нажимаем на эту ссылку.
Шаг 6. Определяем id группы и редактируем код
Переходим на страницу и видим урл такого вида
http://vk.com/pages?oid=-78320145&p=Меню (с вашими цифрами!). Вставляем эту строку в адресную строку браузера и нажимаем Enter. Так мы создали новую страницу Вконтакте и изначально она выглядит так.
Шаг 7. Создаем Вконтакте остальные страницы навигации
Аналогичным образом мы создаем еще четыре страницы навигации: Цены, Как заказать, Техзадание и Вопросы. То есть еще четыре раза копируем в адресную строку браузера соответствующий код (с вашими цифрами id в примере ниже мои цифры):
http://vk.com/pages?oid=-78320145&p=Цены
http://vk.com/pages?oid=-78320145&p=Как_заказать
http://vk.com/pages?oid=-78320145&p=Техзадание
http://vk.com/pages?oid=-78320145&p=Вопросы
Обратите внимание, в названии страницы из двух слов (Как заказать) пробел между словами заменен на нижнее подчеркивание Как_заказать. Теперь у нас есть пять готвых страниц под каждый пункт меню. Страницу Портфолио мы не создавали поскольку она размещается на странице Меню
Шаг 8. Загружаем фотографии на первую страницу меню
На созданной, пока еще пустой странице (см. Шаг 6) Меню нажимаем на ссылку Редактировать или на ссылку Наполнить содержанием. После этого мы видим панель редактирования. Здесь нам надо нажать на значок фотоаппарат с функцией Загрузить фотографию. Важно! Обратите внимание на то, чтобы у вас стоял режим wiki-разметки. Переключение режимов регулируется значком у правого края страницы.
Шаг 9. Результат после загрузки картинок
Загружаем наши картинки, которые мы создавали в Шаге 1 и Шаге 2. После загрузки мы видим такой код, как на картинке ниже, а само меню выглядит так. После каждого изменения кода не забываем нажимать Сохранить страницу, а потом нажать предпросмотр для просмотра результата.
Шаг 10. Редактируем код картинок
Теперь наша задача заменить все свойства noborder на свойство nopadding. А у первой картинки проставить реальные размеры, поскольку Вконтакт при загрузке ужал картинку до 400 пикселей. После всех изменений мы должны получить такой код и такое меню. 
Шаг 11. Проставляем ссылки для картинок
Теперь мы должны проставить ссылки для каждой картинки. Ссылку надо вставлять после nopadding| вместо пробела перед закрывающими скобками. Для первой картинки (шапка меню из Шага 1) можно дать ссылку на главную страницу группы, а можно воспользоваться свойством nolink (ставится через ; после nopadding без пробелов). Для второй картики вставляем адрес страницы формата page-78320145_49821289. То есть полный урл картинки https://vk.com/page-78320145_49821289, до первую часть с доменом можно опустить. А вот для ссылок на внешние сайты урл ссылки надо указывать полностью.
Шаг 12. Копируем код на остальные страницы навигации
На этом, достаточно простом шаге, мы копируем последний код из предыдущего шага и вставляем его на остальные созданные страницы — Цены, Как заказать, Техзадание и Вопросы. Находимся на странице, нажимаем Редактировать или Наполнить содержанием (находимся в режиме wiki-разметки), вставляем код и нажимаем Сохранить. И потом также на следующей странице. То есть сейчас у нас есть пять страниц, на каждой из которых меню выглядит абсолютно одинаково. Но зато уже можно осуществлять навигацию по меню — при нажатии на ссылку например Цены, мы переместимся на страницу Цены итд.
Шаг 13. Делаем эффект нажатой кнопки
Теперь нам предстоит на каждой из пяти страниц поменять одну картинку (кнопку без подчеркивания заменим на кнопку с подчеркиванием). Например, на первой странице Меню мы загружаем новую картинку и потом заменяем в коде адрес старой картинки на новый (подчеркнуто красным). Потом переходим на страницу Цены, загружаем картинку с подчеркнутыми Ценами и меняем в коде на адрес новой картинки. Потом заходим на страницы Как заказать, Техзадание и Вопросы и делаем туже самую операцию аналогичным образом.
Финал.
В итоге у нас получился эффект навигации, когда нажимаешь на ссылку меню и она становится активной. Но поскольку графическое оформление на всех страницах практически одинаковое, за исключением активной ссылки, то создается иллюзия навигации, хотя на самом деле осуществляется переход на другую страницу.
Меню оформленное таким образом не адаптировано под мобильные устройства. При уменьшении размера экрана картинки начинают съезжать одна под другую. Для того чтобы сделать адаптивный дизайн, нужно использовать таблицы для жесткой версти. Но это уже другая история и более продвинутая техника. А пока посмотрите на различные варианты графического формления меню.
www.designonstop.com
Как сделать меню в группе Вконтакте и наполнить его?
Тема сегодняшней статьи — это наполнение страниц меню в группе Вконтакте. В прошлой статье мы узнали, как сделать меню Вконтакте и открывать страницы/рубрики. То есть, практически научились создавать такие мини сайты. Поэтому идём дальше и учимся делать страницы меню уникальными, информационно полезными и красивыми.
Для начала обсудим, чем их можно наполнять? Оказывается, многим. Это может быть различный контент, фотографии разного формата, видеоролики, таблицы. И сегодня я покажу, как разместить фотографии на страницы меню. Покажу три способа, так как каждый имеет свои нюансы.
Что бы было понятно о чём идёт речь, вернитесь к статье, где подробно рассказано и показано, как сделать меню Вконтакте. Читаем здесь.
А для начала, предлагаю доработать навигацию в страницах меню, что бы посетителю было удобно и понятно передвигаться по вашему мини сайту. Например, добавим кликабельную надпись: «Назад в меню».
Для этого мы должны узнать адрес страницы основного меню. Заходим на одну из страниц меню и нажимаем на «Меню».
Далее через «Редактирование» мы находим адрес страницы в строке своего браузера. Смотрите на фото, так должен выглядеть адрес.
Копируем этот адрес и вставляем в двойные квадратные скобки без пробелов и оформляем вот таким текстом:
[[page-116040065_52099820|назад в меню]]
Далее вставляем эту надпись в нужную страницу, в моём случае это «Здоровая спина», через кнопку«Редактирование».
Сохраняем страницу, и смотрим предпросмотр:
Таким образом, вы можете выстроить себе любую навигацию в своём меню. Страницы могут содержать под страницы и т.д. И вашему посетителю будет удобно с них возвращаться или обратно в меню по этой кликабельной надписи, или в соответствующий раздел.
Варианты размещения фотографий
Существует три варианта размещения фотографий в разделы/страницы меню. И каждый способ имеет свои особенности.
Первый способ очень простой и самый рабочий:
Вы заходите на нужную страницу и через «Редактирование» нажимаете на фотоаппарат, выбираете картинку.
Если фотография будет загружена со своего компьютера, то кликнув на неё, мы увидим, она будет без названия.
В другом случае, фотку можно загрузить из альбома своей группы, предварительно создав альбом и закачав её туда. Кликнув на картинку можно будет редактировать и она будет иметь название альбома.
Далее, когда картинка отобразится после сохранения, то вы увидите её в том размере, в каком она была изначально или на вашем компьютере, или в альбоме. Что бы отредактировать размер фотографии, зайдите на страницу, где она находиться и через кнопку «Редактирование» укажите ее размер после вертикального слеша и перед тегом noborder. Просто поменяйте две цифры. Но вы при этом должны знать два размера, ширину и высоту фотографии, иначе в ней будут нарушены пропорции. Таким образом её можно сделать того размера, какой вам требуется.
Второй вариант
Саму фотографию можно превратить в текстовую ссылку. Для этого мы делаем вот такую надпись на странице (через редактирование):
[[photo189052615_405596806|plain|Здоровое питание]]
То есть, вместо фотографии будет ссылка «Здоровое питание», кликнув по ней вы попадёте на саму фотку. Обычно, это используют в случае своего особенного дизайна страницы.
Третий вариант
К загруженной фотографии можно привязать всё, что угодно:
- личный профиль — [[photo189052615_405596806|id189052615]]
- главную страницу группы — [[photo189052615_405596806|club116040065]]
- топик (обсуждения) в группе — [[photo189052615_405596806|topic-116040065_33486847]]
- любой внешний сайт — [[photo189052615_405596806|http://mirtani.ru/]]
- и другое…
Когда начнёте прописывать адреса в редакции страницы, не делайте пробелов, вписывайте всё слитно между двойными скобками.
В третьем варианте, когда вы будите нажимать на фотографию, вас будет перекидывать на страницы личного аккаунта, главную страницу группы, обсуждения, любой внешний сайт и другое.
Итак, я рассказала и показала, как сделать меню Вконтакте, а в следующей статье я расскажу и покажу, как загружать видео на страницы меню и отправлять с этой страницы посетителей на видеоальбомы или другие ресурсы.
Успехов и Удачи!
mirtani.ru
Как создать меню для группы «ВКонтакте»: пошаговая инструкция и рекомендации
Качественное оформление страницы сообщества «ВКонтакте» – это уже половина успеха в достижении цели, для которой создается группа. Как показывает статистика, наличие навигации значительно повышает посещаемость страницы, а также увеличивает количество подписчиков. Страница сообщества, где вся информация структурирована, создает впечатление о серьезном подходе администраторов к делу, а также об их практических навыках в ведении группы и надежности. В данной статье речь пойдет о меню для группы «ВКонтакте», о том, как его создать и сделать наиболее удобным в навигации.
Разновидности меню для сообщества «ВКонтакте»
Сейчас существует два типа меню группы «ВКонтакте». Шаблоны их, конечно, есть на просторах Интернета, и можно делать все строго по ним. Однако результат не будет креативным и оригинальным, а значит, не будет привлекать большое количество подписчиков.
Итак, есть закрытое меню и открытое.
Закрытое получило свое название потому, что подписчику нужно открывать его самостоятельно. Для этого нужно просто нажать на ссылку. Ссылкой можно сделать любое слово, обычно это «открыть» или «меню». Хотя, некоторые изощряются и выдумывают оригинальные ссылки.
Открытое – это пост, который был закреплен. На нем располагается действующая ссылка на меню. Этот тип еще довольно молодой, появился он не так давно, а точнее с появлением функции закрепления поста на стене страницы. Открытое меню является наиболее эффективным на сегодняшний день, оно более привлекательно, чем закрытое. Первый вариант менее производителен, так как посетители группы могут просто не заметить ссылку на него.
Итак, как сделать меню в группе «ВКонтакте»? Ответ довольно прост. Для создания обоих типов меню для группы «ВКонтакте» применяется вики-разметка. Это очень удобный инструмент, он позволяет создавать таблицы, графики, форматировать и редактировать изображения, работать со ссылками и прочее. Однако сейчас все гораздо проще для создателей сообщества «ВКонтакте», чем несколько лет назад. В социальной сети есть визуальный редактор, на автомате переводящий весь контент в вики-разметку.
Открытое меню для группы «ВКонтакте» сейчас более популярно, а закрытое уже практически не используется. Следовательно, будет разумным рассмотреть подробнее создание именно открытого типа. Далее вы узнаете, как сделать меню в группе «ВКонтакте» (пошаговая инструкция представлена ниже).
Этап первый
На данном этапе необходимо выбрать изображения. Они создадут презентабельный внешний вид страницы. Картинки можно найти в Интернете либо сделать самому, используя фото-редакторы и программы для рисования. Второй вариант подойдет только тем, кто хорошо рисует на компьютере и владеет фотошопом.
Первая картинка представляет из себя аватар. Вторая (центральная) – изображение-действие. Параметры аватара должны быть не менее 200 х 330 пикселей. Центральное изображение – не менее 390 х 280 пикселей.
Этап второй
Откройте страницу группы и найдите «Управление сообществом». Ссылка располагается под лицевой фотографией страницы справа. Пройдя по ссылке, отыщите раздел «Материалы» в информации, а затем нажмите «Ограниченные» в этом пункте.
На основной странице нажмите на редактирование в строке «Материалы». В появившейся форме-редакторе укажите название, разделы, а затем обязательно нажмите кнопку внизу для сохранения. После этого вернитесь к странице с помощью кнопки в правом верхнем углу.
Этап третий
Копируйте адрес страницы. Первый ряд чисел после слова “page” – это номер сообщества, второй – номер страницы группы. Это нужно обязательно знать, задумываясь, как создать меню в группе «ВКонтакте». Адрес необходимо вставить на стене вместе с центральным изображением. Чтобы прикрепить картинку, нажмите «прикрепить» и «фотографию». Далее выбирайте и вставляйте. После нажмите отправить – это опубликует пост.
Этап четвертый
Поставьте первую картинку на место основной фотографии сообщества. Запись об этом действии вместе с картинкой появится на стене. Она там ни к чему, поэтому ее нужно удалить.
Теперь найдите время, когда пост был опубликован (внизу записи, серыми мелкими символами). Выберите кнопку «закрепить». Затем нажмите на F5, чтобы обновить текущую страницу.
Это все. Когда пользователи будут кликать на центральное изображение, им будет открываться меню группы.
Как создать таблицу в меню?
Каждый администратор задумывается о том, как сделать меню в группе «ВКонтакте». Инструкция, представленная выше, может помочь в создании только базового меню. Далее его необходимо совершенствовать.
Таблица очень удобна в навигации по меню для группы «ВКонтакте». Чтобы создать таблицу, требуется знание определенных символов.
- {| означает начало;
- |+ расположение по центру;
- |- с новой строки;
- | прозрачность;
- ! темня заливка ячейки;
- |} обозначает конец.
Как оформить ссылки?
В вопросе о том, как сделать меню в группе «ВКонтакте», есть важный момент, касающийся ссылок. Оформить их можно по-разному:
- Оставить просто ссылкой. Для этого возьмите ссылку в квадратные скобки [].
- Сделать ссылку словом или фразой. Откройте квадратную скобку, вставьте ссылку, после ссылки поставьте знак | и закройте квадратную скобку.
- Изображение-ссылка. Сделать это можно по такому примеру: [[photo54634620_58576|60px|адрес страницы]].
Советы по созданию меню
Чаще всего каждый учится сам, тому, как создать меню в группе «ВКонтакте». Знания приходят с опытом методом проб и ошибок. Однако начинающим все же можно дать несколько рекомендаций.
- Размер картинки не должен быть менее 130 пикселей. Это значительно ухудшит внешний вид меню.
- Ширина картинки – не более 610 пикселей.
- Вики-страница не способна содержать в себе больше 17 незакрытых тегов.
- Когда вы ставите показатель ширины, то высота автоматически изменяется согласно пропорциям.
- Внутри таблицы можно создать список, используя тег <br />.
- В одной строке можно разместить максимум 8 единиц списка.
Помимо всего прочего, существуют специальные программы для более легкого пользования вики-разметкой. Это и обучающие приложения, и настоящие помощники, которые сделают все за вас.
К примеру, приложение «Интерактивный FAQ (beta)» позволяет проверить свои способности в вики-программировании.
Работа его проста: пользователю предоставляется готовое меню, и требуется прописать код разметки. В конце, результат сравнивается с оригиналом.
Программа «Вики редактор» ничему не учит и не тренирует своих пользователей. С ее помощью можно сделать меню даже без начальных навыков программирования. Простой в использовании редактор сам пишет коды – пользователю нужно только управлять.
Таким образом, создать меню «ВКонтакте» может каждый, кто планирует использовать группу для продвижения своего дела или просто для развлечения. Меню делает продвижение бизнеса гораздо эффективнее и привлекает пользователей на страницу группы. Благодаря меню сообщество выглядит презентабельным и более профессиональным, чем его конкуренты, у которых его нет.
fb.ru