Меню вконтакте как сделать. Как оформить группу в контакте и создать раскрывающееся графическое меню
Очень многие интересуются, как сделать меню в группе «В Контакте». Уже есть большое количество красиво оформленных сообществ, с которых хочется взять пример. Это можно сделать за несколько часов. Главное, разработать стильный дизайн, а остальное дело техники.
Что для этого нужно?
Как «В Контакте» в группе сделать меню? В "Фотошопе" необходимо создать две картинки, которые ранее были одним целым. Первая для аватарки, вторая - само меню, это изображение необходимо нерезать на несколько частей. «В Контакте» на страничке, предназначенной для меню, нужно вставить код со ссылками на части изображения и разделы. А если необходим открытый тип, понадобится третья картинка, которая закрепляется в верхней части сообщества.
Для создания красивого меню понадобятся навыки "Фотошопа". Тем, кто плохо рисует, рекомендуется подобрать хорошие картинки. Для знатоков этой программы инструкция указана ниже. Процесс делится на несколько этапов.
Первый этап
Как сделать меню в группе «В Контакте»? Сначала нужно создать новый документ с размерами 700 на 800 пикселей. Проследить, чтобы фон был белым цветом. На верхнем слое необходимо вырезать два окошка 200 на 710 - для аватара и 382 на 442 - меню. Сделать это можно с помощью выделения прямоугольником или командой, которая вызывается клавишей «Del».
Высоту в зависимости от фантазии можно корректировать по своему вкусу, а вот ширину лучше оставить прежней. Под нижний слой необходимо подложить иллюстрацию. Ориентируясь на одну из сторон, прямоугольники необходимо совместить.
В нужных зонах изображения при помощи элементов "Фотошопа" необходимо разместить надписи и кнопки.
Прямоугольник, который получился справа (размером 200 на 710) можно скопировать и выгрузить в отдельный файл. Это готовая аватарка для группы. А вот левая часть картинки нуждается в дополнительной нарезке.
Количество элементов в меню допускается от двух частей. Но может быть и три, и четыре. Мы рассмотрим пример для двух.
Высота каждого нарезанного элемента должна быть не менее 50 пикселей.
Как нарезать картинку для меню?
Для этого нужно открыть изображение в отдельном файле. Понадобится инструмент «Раскройка». Он находится на панели программы в виде ножа.
Правой кнопкой мыши необходимо щелкнуть на картинку и выбрать из выпавшего списка пункт «Разделить фрагмент».
Откроется окошко, в котором нужно задать параметры раскройки. Рекомендуется поставить галочку возле надписи «Разделить по горизонтали на» и выбрать количество равных фрагментов.
После проделанных действий на экране появится сетка, которая делит картинку на участки.
Разрезанные файлы будут в пронумерованном виде.
Второй этап
Это урок о том, как сделать меню группы «В Контакте». Все нарезанные картинки необходимо загрузить в альбом группы.
Понадобится страница «Свежие новости». В ближайшее время работа будет проходить с ней.
Желательно выбрать в редакторе справа режим wiki-разметки и вставить туда следующий код:
Каждая картинка меню будет занимать отдельную строчку, которая построена по принципу схемы выше. Рекомендуется создать эти записи заранее в блокноте и лишь после этого выгрузить их в нужное поле «В Контакте». Так будет намного проще и система не заставит переделывать.
В результате получится нечто похожее на:
Как получить номер изображения?
Для этого необходимо кликнуть правой кнопкой мыши на картинку. После того как она откроется в новом окне, в адресной строке браузера появится ее код. Его нужно скопировать вместе со словом «photo».
Когда все изменения сохранены, можно проверить работу меню. В группе по соответствующей ссылке раскрывается долгожданная картинка.
Чтобы совместить с ней аватар, необходимо немного поэкспериментировать с описанием. Приблизительно, по указанным размерам должно быть 12 строчек.
Это один из вариантов, как сделать меню в группе «В Контакте». Всего их два. Еще один способ - открытый. Их можно совместить.
Как сделать открытое меню?
В новом окне необходимо кликнуть правой кнопкой мыши на созданное меню и нажать на ссылку «Редактирование». Во вкладке «Вернуться к странице» в строке браузера можно получить ссылку на меню. Ее необходимо скопировать.
После в группе нужно сделать обычный пост. Понадобится еще одна тематическая картинка с надписью «Меню». Для этого необходимо загрузить фотографию. Пост будет играть роль открытого меню вверху страницы. К сообщению в нем нужно вставить полученную ссылку, которую нужно сразу удалить после того, как ниже появилась страница с меню. Пост не должен содержать лишних ссылок, это будет некрасиво.
Как сделать меню в группе «В Контакте»? Теперь необходимо кликнуть правой кнопкой мыши на дату новости. Она должна открыться в новом окне. Там можно увидеть новую надпись «Закрепить». Как раз она и нужна.
После в группе можно любоваться красивым меню. Для того чтобы совместить картинки, необходимо потренироваться с их размерами.
Вот и все. Создавать меню в контакте не так уж сложно. Если действовать по инструкции, которая описана выше, справиться может каждый.
), сделать меню.
Сейчас я покажу вам, как сделать меню в группе вконтакте, и правильно ее оформить .
Делаем красивую графику
В новом дизайне сайта Вконтакте, были изменены размеры для графики. Ниже вы найдете актуальные значения.
- Аватар для группы — 200×300 пикс
- Баннер в описании — 510×271 пикс
Подготовьте изображения в нужных размерах. Я возьму уже готовые картинки, чтобы показать вам на их примере.
Итак, давайте сделаем красивое оформление, разделив общую картинку на две части. В итоге у нас получится единый дизайн.
Для начала загружаем аватарку. Идем в группу, и нажимаем «Загрузить фотографию» .
У вас откроется форма, в которой нужно выбрать файл на жестком диске вашего компьютера. Сделайте это. В итоге у нас получилось следующее.
Теперь добавим вторую часть изображения. Чтобы это сделать, необходимо выложить картинку на стене, а затем запись с ней, закрепить в верхней области.
Идем на стену. Здесь в блоке «Добавить запись» , нажмите на значок «Фотография» .
Загрузите вторую подготовленную картинку. Обязательно выберите публикацию от имени сообщества. И затем нажмите «Отправить» .
Теперь запись нужно закрепить (см. ). Возвращаемся к новой записи, и в правом верхнем углу разворачиваем меню. Здесь нажимаем «Закрепить» .
Теперь обновите страницу, и посмотрите результат.
Единственный минус — картинки находятся на разном уровне. Но это связано с тем, что они не правильного размера. Аватарка должна быть больше по вертикали. Тогда они будут на одном уровне.
Как создать меню в группе вконтакте
Давайте вернемся к нашему примеру и представим, что необходимо сделать кнопку «Подробнее» . Она уже есть на картинке. Как нам сделать ее именно кнопкой, чтобы при нажатии, человек попадал на наш основной сайт? Сейчас покажу.
Чтобы сделать активные кнопки меню, мы должны их вырезать отдельными картинками. Для этого нам понадобится Photoshop .
Открываем нашу картинку в редакторе, и активируем инструмент «Раскройка» .
Отрезаем нижнюю часть с кнопкой. Зажмите левую кнопку мыши, и проведите горизонтальную линию, рассекая картинку на две части.
Теперь нажимаем Alt+Ctrl+Shift+S , чтобы сохранить готовые изображения.
Https://vk.com/pages?oid=-120208137&p=меню
Смотрите, после символов "odi=- " , вам нужно вставить id своей группы (см. ). А в самом конце ссылки, напишите название для вашей страницы с меню. В примере мы так и оставим «Меню» .
Здесь нажимаем на значок фотоаппарата, и загружаем подготовленные изображения.
Теперь переходим непосредственно к созданию меню для группы в вк. Должно получиться нечто похожее.
Далее переходим в раздел «Редактирование» . Здесь для каждого изображения нам нужно убрать отступы, чтобы они слились в единую картинку. Для этого в коде добавьте вот такое значение «nopadding;» . И добавьте ссылку на нужную страницу или сайт, прописав значение «https://site.ru/page.html» (указывайте свои адреса!). В нашем примере кнопка «Подробнее» , должна вести на сайт сайт. Вот что должно получиться.
[] []
Сохраняем страницу. Не забываем скопировать ее адрес из адресной строки. Она должна быть вида:
Https://vk.com/page-120208137_52523487
Возвращаемся на стену группы, и создаем новую запись. В ней вставляем ссылку на страницу, и прикладываем оригинал изображения. Публикуем и закрепляем.
Вот такое меню у нас получилось в итоге.
Чтобы создать меню в группе Вконтакте, вам необходимо иметь у себя какой-нибудь графический редактор. Наиболее распространенный это adobe photoshop. С его помощью возможно сделать меню для группы Вконтакте.
В интернете есть множество шаблонов и заготовок, можете воспользоваться ими, если не можете создать сами.
Создание меню в графическом редакторе
Для начала вам необходимо создать заготовку меню, а уж потом добавить его Вконтакте. Ширина фона меню должна быть не больше 370 пикселей. Если она будет больше, то все равно уменьшится до этого размера. Высоту уже можете выставлять пропорционально ширине, чтобы у вас все влезло, и в то же время оно не было очень длинным. Перед тем как создавать меню, продумайте фон, текст, который должен быть на кнопках меню.
Запускаем фотошоп, создаем новый документ (файл - создать или ctrl+N). Выставляем параметры создаваемого файла. Максимальная ширина 370 пикс., я сделал 200 пикс., высоту 250 пикс. Можно делать его намного меньше и компактней. Добавляем в созданный файл картинку, которая будет фоном. Теперь создаем текст. Пример у меня самый простой, вы сможете сделать намного красивее, компактнее.
Я создал такое меню. Выбрал инструмент Раскройка и вырезал им на картинке три части, обозначены цифрами 1,2,3 - будут кнопками. После того, как вы вырезали, сохраняем созданное меню. Нажимаем Файл — сохранить для web и устройств.
В появившемся окне ничего не меняем, нажимаем сохранить. Выбрать место сохранения и нажать сохранить.
Все, в фотошопе работу закончили.
Добавление меню в контакт
Теперь созданные изображения, после сохранения будут в папке images. Загружаем их в контакт с помощью стандартного загрузчика фотографий. Можно загрузить эти файлы в фотоальбом группы. Простыми словами – добавляется как обычная фотография, которые вы загружали в контакт. Теперь смотрите, чтобы у вас в настройках группы было включено следующее. Заходите в свою группу, нажимаете управление сообществом (находится под главной фотографией группы, с правой стороны). Затем внизу находим пункт материалы, там должно стоять подключены. После того, когда выбрали подключены, нажимаем сохранить. Если не нажмете сохранить, изменения не вступят в силу.
После этого заходим на главную страницу своей группы, и там, где находится информация о группе (описание, местоположение), есть строчка свежие новости. Наводим на надпись свежие новости, с левой стороны нажимаем редактировать.
В появившемся окне вам необходимо указать код []. Можете его прямо из статьи скопировать и вставить себе. Теперь вам только останется изменить на свои данные.
photo-40781312_285935465– код фотографии. Его можно посмотреть в адресной строке. Этот код видно, когда вы зашли на фотографию. Сам адрес там намного больше, но вам необходимо скопировать ту часть кода, которая начинается со слова photo и заканчивается цифрами. Обычно после цифр может стоять, например, знак процентов.
Nopadding – эта команда убирает пробелы между картинками.
100px – ширина меню (если это отдельная кнопка, значит, такой будет ширина кнопки).
club40781312 — ссылка в тот раздел, куда будет переходить человек, нажав на эту кнопку (картинку). Также находится в адресной строке браузера, в тот момент, когда вы том разделе, куда должен будет попадать человек при нажатии на кнопку. Вам необходима только последняя часть кода, которая идет после последней наклонной линии / (называется еще слэш). У меня в данном случае, при нажатии кнопки (картинки) в моей группе будет происходить переход на главную страницу группы. Вы ставите свой код, который будет в вашем разделе.
Также можно изменить заголовок. Я, например, вместо свежие новости, написал меню группы. Вы пишите что хотите. После того, как закончили редактирование своего кода, нажимаем сохранить. Проделываем с каждой кнопкой, которую вы создали для меню в контакте. Если будете располагать код под кодом, такое же расположение будут занимать и кнопки. Если будете располагать следующий код справа от кода, значит, кнопки меню также будут располагаться точно так, как вы вставили код
Если вы не получили ответ на вопрос как сделать меню группы
Не удалось получить ответ на вопрос как сделать меню в группе Вконтакте по той инструкции, которую вы прочитали, напишите нам в , нажав задать вопрос . Напишите вашу проблему и действия, которые вы проделали. Ответим лично.
- Видео по созданию меню группы
Привет дорогие друзья, последнее время, если Вы могли заметить, я много пишу про социальную сеть Вконтакте и ее премудрости! Не удивляйтесь, я не собираюсь пока менять своего основного направления — быть блогом шпоргалгой для самого себя, ну и для людей конечно! 🙂
Просто, я написал серию статей , и мне стало поступать множество писем с различными вопросами. Теперь, мне нужно немного развить тему создания меню в группах и пабликах Вконтакте, дабы сэкономить свое бесценное время, и не печатать многократно ответы на одинаковые вопросы моих читателей.
Итак, сегодня я хочу рассказать — как более умело управлять своим аккаунтом Вконтакте, ну и конечно, как можно делать любые меню в группе и паблике Вконтакте. Не так давно, благодаря одному хорошему человеку — Марине Лазаревой и ее статье « VKopt - что это такое и зачем он нужен администраторам вконтакте?» , я узнал о небольшом бесплатном скрипте (VkOpt — это сокращение от полного названия Vkontakte Optimizer), который создан для облегчения пользования социальной сетью Вконтакте.
Установка элементарная и занимает всего минуту времени, возможностей и новых функций, ранее недоступных Вконтакте, открывается целая куча. Захожу на официальный сайт Vkontakte Optimize , выбираю свой броузер и устанавливаю расширение данного скрипта.
Не забываю закрыть и открыть броузер для начала работы скрипта Вконтакте. Вхожу в свой аккаунт Вконтакте, где появляется табличка с благодарностью за установку скрипта и предложение выбрать язык интерфейса.
Интересно, что изначально данный скрипт был создан в далеком уже 2007 году для скачивания видео, в тогда уже набирающей популярность социальной сети Вконтакте.
На данный момент скрипт ВкОпт умеет делать множество вещей, и в первую очередь направлен на улучшение функций интерфейса для простых пользователей, таких как скачивание музыки и видео, сортировки друзей, возможности добавлять, менять некоторую информацию на страницах Вконтакте, в том числе и скрытую. О всех функциях скрипта можно прочесть вот .
А меня же, больше заинтересовали некоторые возможности, которые дает данный скрипт для работы Вконтакте, попробую их перечислить в картинках с комментариями.
Замечательно, что теперь мне не надо каждый раз кликать мышкой по экрану для просмотра фотографий, достаточно прокручивать колесиком мыши для перехода к следующему фото. Это очень быстро и удобно, особенно, когда листаешь тысячи фоток и среди них ищешь те, которые нужны в данный момент.
Далее, на этой же вкладке ниже, благодаря Vkontakte Optimizer появились ссылки, кликнув на них, я получаю доступ ко всем созданным Вконтакте размерам данной картинки или фото от маленькой иконки, до максимальной закаченной картинки. В обыденности, Вконтакте представлены фото с шириной 604 пиксела. Все копии открываются в полном размере, где их можно легко скачать.
Тут же, появилось несколько кнопок, одна из них — поиск копий Google. Нажав ее, с большой вероятностью можно найти настоящего автора данной картинки или фотографии, например, нажав на мое фото — гугл обнаружил копию этой фотографии, только в моей же статье про север Таиланда на нашем трэвел блоге. Таким же образом, можно узнать о несанкционированным использовании Вашего фото другими людьми. А еще забавно — гугл пытается найти картинки, похожие по цветовой гамме на представленную фотографию.
Далее, захожу во вкладку мои группы, здесь тоже появились новшества, сверху в правом углу я заметил новую кнопку, видимо для тех людей, кому всё надоело, или кто жаждет больших перемен. Там расположилась кнопка Покинуть все, т.е. одним кликом можно выйти из всех групп одновременно.
Здесь же, нажимаю чтобы посмотреть обновления и последние новости, появилась кнопка фильтрации новостей, можно убрать новости, которые содержат видео, фото, графити, опросы, ссылки и т.д. Это может быть очень удобно при поиске чего либо в новостях, чтобы не отвлекаться на лишнее.
Выше были рядовые функции, просто понравившиеся лично мне, а теперь, ближе к делу! Нахожу пример группы Вконтакте с красивым дизайном . Предположим, мне нужно посмотреть исходники дизайна данной группы и сделать у себя что-то подобное. Если нажать на меню этой группы получается милая картинка — это один из вариантов . А вот в правой части группы, благодаря скрипту Vkontakte Optimizer появилась кнопка -> Список Wiki-страниц.
Нажимаю на список Wiki-страниц, и получаю исходный код wiki-разметки, который использован при создании меню этой группы Вконтакте.
Как Вы понимаете, чтобы создать подобное меню группы Вконтакте, у меня уже есть код, и мне даже не надо изучать wiki-разметку, хотя, это еще никому не мешало!
А теперь, мне только не хватает исходников картинок к этому меню для примера. В этой же группе нахожу альбом с фото, где и расположены исходники меню.
Каждую из картинок можно скачать в оригинальном размере, представленном в меню. Когда у меня есть все исходники меню, мне остается мысленно выразить большую благодарность, людям, который сделали меню в данной группе, и приступать к работе в фотошопе над своими исходниками с такими же размерами.
Как Вы понимаете, здесь нет никакого плагиата в том, что я беру исходный код wiki-разметки у определенного автора, идею с размерами и расположением картинок, в созданном им меню в группе или паблике Вконтакте. Я только учусь у этого автора на его конкретном примере. После чего, создаю свои картинки в фотошопе и свое меню.
Получается, для того, чтобы создать меню в группе или паблике Вконтакте любой сложности, достаточно теоретически знать , найти пример сложного меню в паблике или группе Вконтакте, и конечно, нужно обладать познаниями элементарного создания и верстки картинок в фотошопе. В этом Вам могут помочь любые туториалы фотошопа — задайте этот вопрос яндексу, найдете тысячи ответов.
Еще хотел затронуть один вопрос, меня уже несколько раз спрашивали можно ли паблик Вконтакте сделать группой Вконтакте? Отвечаю — теперь можно, благодаря скрипту Vkontakte Optimizer, в паблике появляется новая кнопка — перевести в группу. Испытывать эту возможность я не стал, мне ни к чему. Ну как я понимаю, там придется заново приглашать всех подписчиков в группу, а если их тысячи, это не очень удобно!
Итак, для создания открытого меню, нам понадобится изображение, которое будет играть роль открытого меню. Изображения, которые мы добавляли в статье о создании графического меню не подойдут, так как необходимо изображение развернутого меню, а не каждого пункта в отдельности. Кроме того, можно использовать абсолютно любое изображение, которое будет указывать, что оно скрывает меню группы. Например, изображение с надписью: «Меню группы». Или что-то в этом роде.
После того, как мы подобрали изображение, которое будем использовать. При этом размер изображения может быть практически любой, который возможно загрузить в фотоальбом. (UPD: Это не совсем точная информация. Точнее о размерах можно прочитать в комментарии ниже. Для этого, просто нажмите на ссылку: /otkrytoe-menyu-gruppy-vkontakte/#comment-7633)
Переходим в группу вконтакте. И правой кнопкой мыши открываем меню, если оно уже создано, в новой вкладке.
После этого, на странице с меню, нужно нажать на ссылку «Редактирование».
Но при этом не нужно изменять код. Просто нажимаем на ссылку «Вернуться к странице». Это нужно, для получения ссылки на страницу с меню.
Теперь, когда мы вернулись обратно на страницу с меню. В адресной строке мы увидим ссылку на эту страницу, без различным дополнений в адресе. Иначе говоря — чистую ссылку. Она-то нам и нужна.
Оставляем эту страницу открытой и возвращаемся в группу Вконтакте. Здесь нам необходимо создать запись, в которую добавить изображение, которое будет играть роль открытого . Для этого, внизу выберем «прикрепить фотографию». И выбираем изображение либо из альбома, либо загружаем с компьютера.
Когда изображение добавлено в запись, мы ее пока не публикуем.
А возвращаемся на страницу меню и из адресной строки копируем адрес страницы меню группы вконтакте. И вставляем скопированный адрес меню, в запись, которую мы еще не сохранили. Выглядеть конечный результат должен примерно так:
После того, как мы добавили ссылку, внизу появилось название страницы и адрес на нее. Когда внизу появилась страница, мы можем удалить ссылку, которую только что вставили в запись. После чего, нажимаем на кнопку «Отправить». Тем самым, мы опубликовали нашу запись на стене группы.
Теперь нажимаем на дату новости.
После чего, закрываем запись и обновляем страницу группы вконтакте. Теперь в самом верху, если все сделано правильно, у вас появится изображение меню, которое играет роль открытого меню вконтакте. При этом, ссылки в меню неактивны. А активна одна ссылка на данную запись.
Теперь, когда пользователь окажется в нашей группе он увидит имитацию меню. А после нажатия на открытое меню группы вконтакте, он окажется в самом меню, которое будет функционировать, как и должно.
Других способов, как сделать открытое меню контакте, я к сожалению не знаю. Но все же такой вариант намного лучше, чем просто ссылка, для раскрытия полного меню.
Надеюсь, данная статья поможет Вам разобраться, как сделать открытое меню вконтакте. А у меня на этом все.
Как выглядит отрытое меню группы можно посмотреть в моей группе.
