Как сделать картинку в группе вконтакте


Как сделать картинку в группе вконтакте
Как сделать картинку в группе вконтакте


Как сделать картинку в группе вконтакте
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 плагин: Comment Redirect поможет сказать «Спасибо за комментарий» нашим читателям!

Регистрация в Gold Line International и активация аккаунта через WebMony

Биржа ВК - обзор биржи рекламы вконтакте "на свежую голову".

Instagram (часть 2) — как применять теги для раскрутки бизнеса!


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



Как сделать картинку в группе вконтакте

Как сделать картинку в группе вконтакте

Как сделать картинку в группе вконтакте

Как сделать картинку в группе вконтакте

Как сделать картинку в группе вконтакте

Как сделать картинку в группе вконтакте

Как сделать картинку в группе вконтакте

Как сделать картинку в группе вконтакте

Похожие новости: