Код для меню для вк – Меню группы вконтакте — как создать и добавить в группу ВК. Примеры наших работ по оформлению картинки меню.

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


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

Чем отличается группа от паблика
Как поменять тип сообщества


Посмотрите образец результата - http://vk.com/tattoo_21

Перед созданием меню у вас должны быть нарезаны его элементы - изображения, кнопки, аватар.

Если это ещё не готово, то вам сюда -
Как легко и быстро нарезать меню группы без PhotoShop'a


Шаг 1. Подготовка

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

Под аватаром есть значек "многоточия"

В выпадающем меню жмите пункт "управление сообществом"

Внизу вкладки "Информация" сделайте материалы открытыми. Не забывайте нажать "Сохранить".

Далее загружаем в фотоальбом будущие элементы меню (изображения).

Шаг 2. Редактирование меню.

Под описанием вашей группы есть надпись "Свежие новости", если на неё навести мышку появится кнопка "Редактировать", нажимайте.


Откроется окно редактирования меню.

Заменяйте "Свежие новости" на слово МЕНЮ

Слева есть значок переключения на Вики-разметку, нажмите.

Теперь в будущем меню нам нужно прописать коды кнопок с помощью Вики-разметки.

Код кнопки в МЕНЮ в группе вк такой:

[[photo999_777|385x80px;noborder;nopadding|http://ссылка/ ]]

где

photo999_777 - это ссылка на фото вашей кнопки.
Чтоб узнать ссылку на изображение кнопки - откройте его, ссылка будет в адресной строке.


385x80px; - размер в котором ваша кнопка будет отображаться. Размер можно и не указывать, тогда кнопка будет в оригинальном размере.


noborder; - тег отвечающий за отсутствие границ между изображениями. Если его не указывать, то между картинками будут границы.


nopadding; - тег отвечающий за отсутствие отступов. Без него вокруг каждой кнопки будут белые отступы по паре миллиметров.


http://ссылка/ - ссылка на абсолютно любую страницу. Это может как ссылка на страницу в вашей же группе, так и на внешний сайт.

Важно! Внимательно проверяйте - между элементами кода должен быть разделитель "|", после каждого тега должна быть ";" И всё это должно быть в двойных скобочках [[ ]]


Чтоб вставить несколько кнопок просто располагайте код в столбик

[[photo999_7771|385x80px;noborder;nopadding|http://faq-media.ru ]]
[[photo999_7772|385x80px;noborder;nopadding|http://vk.com/vk_faq_media/ ]]
[[photo999_7773|385x80px;noborder;nopadding|http://google.com/ ]]


Ссылки на внутренние страницы группы также можно указывать в меню.

Как их создать - "Создать несколько страниц в группе"


Есть вопросы? Вы можете задать их на ФОРУМЕ.



faq-media.ru

вики-меню, смм, ведение группы вк

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

вики разметка

вики разметка

Где расположено вики-меню

В самом верху группы, возле информации, существует пункт, называемый «меню». Когда пользователь нажимает на его, он попадает в навигационное меню, состоящее обычно из рубрик и картинок. Также меню Wiki можно прикрепить вместо поста. Оно будет отображаться, как картинка, на которую следует нажать. Сегодня мы построим Вики меню на примере моей группы Айти-медия.

Код в Вики разметке

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

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

меню вк

меню вк

Структура моего вики-меню ВКонтакте

В самом начале у меня идёт таблица, в которой написано название и объявление. Далее стоит горизонтальная картинка. Она сама по себе кажется цельной, но состоит из блоков, если смотреть по коду.

меню горизонтально

меню горизонтально

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

вики меню вконтакте

вики меню вконтакте

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

Я загрузила изображения в отдельный альбом группы. Далее при нажатии на картинку в адресной строке мы видим адрес изображения. Этот же адрес нужно будет вписать в код. В Вики разметке далее посередине обозначены параметры отображения. Обычно рекомендуют писать с noborder и nopadding. Это значит отсутствие границ и отступов. Но я считаю, что noborder там совершенно не нужен, так как результат не меняется. Просто написала nopadding.

педдинг меню

педдинг меню

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

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

группа вики меню вк

группа вики меню вк

Сейчас вы увидите внешний вид самого кода. Пишется это все внутри ВК. А информацию можно найти в группе по вики-разметке или в поиске. Там даются сразу строки кода и рассказано, что для чего.

код вики

код вики
Вертикальное меню

В группе «Взгляни на Минск» меню простое и создано в виде вертикальной картинки. Если интересует такой Вариант, то его тоже увидите в коде.

В файле также присутствует некоторое описание основных функций Вики разметки и другие примеры.

Можно просто взять это, скопировать, заменить ссылки на картинки и на рубрики, и у вас получится примерно такое же меню. Что-то удалите, поменяете, выбросите, добавите. Это готовый образец. Скачайте мой код с яндекс-диска:https://yadi.sk/d/wHioBN0GlkAd7Q

меню вики разметки

меню вики разметки
Цель вики меню

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

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

мню города вики

мню города вики

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

Следующей статьей будет установка сертификата ssl (https протокола). Посмотрим мою ошибку и ее решение. На этом сайте я буду рассказывать различные компьютерные новости показывать интересные места для туризма, немного медицины психологии и творчество. Навигация – по рубрикам. Желаю вам создать красивое вики-меню.

psy-helga.ru

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

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

Здравствуйте, дорогие посетители блога ARTtime. Сегодня я расскажу вам как сделать меню группы Вконтакте.  Не зря я затрагиваю эту тему, так как ВК был, есть и будет самой популярной социалкой рунета.

Многие уже сталкивались, а кто-то столкнется с проблемой, как правильно разместить меню для группы.  Кстати, группа  на картинке моя… Я там кредитки и советы раздаю 😉

Дополнение от 20.09.2013. Технологии не стоят на месте, и Вконтакте появилась возможность делать красивые открытые меню для группы. Так что приглашаю посмотреть статью на эту тему – Как сделать всегда открытое меню для вконтакте.

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

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

Приступим к делу!  Наше будущее меню  открываем  в фотошопе, для примера я выбрал старую запылившуюся картинку еще одной группы. Дальше все просто, берем инструмент “раскройка

раскройка в фотошопе

И начинаем выделять область наших будущих кнопок:

раскройка

Практически готово, осталось правильно сохранить наше меню… Для этого идем в “Файл – Сохранить для Web и устройств”  или же жмем комбинацию клавиш “Alt+Shift+Ctrl+S“. Только не повредите руку! Все же придется нажать четыре клавиши одновременно 😉сохранение раскройки

Вверху я обозначил стрелочками настройки, которые я применил, взамен JPEG формата можно выбрать и GIF или же PNG, на ваш вкус 🙂 И жмем кнопку сохранить “Save“, что внизу. В открывшемся окне дайте имя файлу и выберете место, куда нужно сохранить нашу картинку.

Меню для группы частями

Видите, все аккуратно лежит в папке, к тому же еще и пронумеровано! Дальше нужно скинуть все эти изображения Вконтакт, в альбом группы или в свой личный альбом и прописать в группе Wiki разметку…

Можете посмотреть примерный код, который я использую:

[[photo-20070034_253533413|386px;noborder;nopadding|page-20070034_29865434]]

[[photo-20070034_253533414|386px;noborder;nopadding;nolink|1]]

[[photo-20070034_253533502|386px;noborder;nopadding|page-20070034_29885140]]

[[photo-20070034_253533503|386px;noborder;nopadding;nolink|1]]

[[photo-20070034_253533504|386px;noborder;nopadding|http://vkontakte.ru//topic-20070034_23111244]]

Там все предельно просто, вот эта часть кода “[[photo-20070034_253533413” – адрес нашего изображения.

Это – “| 386px;noborder;nopadding” – ширина, “noborder” указывает на то, что картинку нельзя обводить полями.

А “nopadding” говорит о том, что картинка не должна иметь отступов.

Вот эта строчка”|page-20070034_29865434]]” – адрес, куда будет направлять нас картинка, точнее кнопка…

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

Удачи Вам!

arttime.org.ua

Отправить ответ

avatar
  Подписаться  
Уведомление о