Как убрать пробелы в группе вконтакте. Вики-разметка во вконтакте для начинающих
Доброго времени суток, уважаемые читатели моего блога. Этой статьей я открываю серию публикаций на тему красивого оформления групп Вконтакте. Сейчас мы поработаем над созданием меню, затем перейдем к созданию стильного единого изображения, ну и в конце научимся делать картинки кликабельными.
В конечном итоге у вас получится примерно такое сообщество. При нажатии на кнопку перехода действительно открывается дополнительная стильная страничка.
Работа предстоит не такая уж трудная, я детально объясню как действовать. Работа займет не больше пары часов. Давайте обо всем по порядку.
1. Подготовка к работе. Инструменты, без которых не обойтись
Итак, прежде чем я перейду к основному вопросу, и мы начнем разбирать как делать меню в группе Вконтакте, поговорим о том, что вам понадобится.
1.1. Фотошоп
Конечно можно обойтись и без фотошопа, посмотрите вот это видео, в котором все подробно рассказано. Если хотите. Однако, если вы не владеете навыками , то я настоятельно рекомендую заморочиться и пройти все три мои публикации.
Если вы хотите нормальную группу, то у вас нет другого выбора, кроме как изучать фотошоп. Без качественных картинок никуда не уедешь. Могу порекомендовать вам курс Зинаиды Лукьяновой . Быстро и не скучно вы освоитесь в новой профессии и сможете даже зарабатывать, используя навыки дизайнера. Знаний хватит!
Итак, ну давайте продолжим. Все необходимое имеется? Тогда вы готовы действовать дальше.
2. Работа в фотошопе или меню своими руками
Ну вот, теперь можно приступать к пошаговой инструкции непосредственно для создания меню. Открываем фотошоп, затем иллюстрацию с меню. Надеюсь, что проблем не возникнет. В правом верхнем углу выбираем «Файл» и затем «Открыть». Находим документ на компьютере. Что дальше?
Картинку нужно раскроить. Выбираем инструмент «Раскройка». Как вы видите, он кроется под «Рамкой». Просто нажмите на него и удерживайте левую кнопку мыши несколько секунд, пока не появится дополнительное меню.
Теперь на самой картинке щелкаете правой клавишей мыши и находите «Разделить фрагмент».
В конкретном случае изображение я поделю на 4 части. Почему именно так? Любая кнопка в интернете – это рисунок, которому присвоен определенный код. Вы наводите стрелкой на нужный фрагмент иллюстрации и ваш браузер передает информацию компьютеру: «Парень, тут есть дополнительные возможности».
Иногда все изображение меняется. Например, утопающие кнопки при нажатии – это всего лишь второе изображение, там нет никакой анимации.
В моем случае одну картинку нужно поделить на несколько частей и каждой из них присвоить свое действие. Где-то ссылка на список товаров, где- то переход на сайт. Также есть часть картинки, которая помечена как «Меню». При наведении мышью не должно ничего происходить.
По-хорошему, я должен был выделить 5 частей, чтобы ровнее отделить кнопки, но я оправдываю себя тем, что если человек промахнется, он все равно сделает то, что хотел, а если нажмет верно, то ни о чем и не узнает.
Не проблема сделать больше категорий или расположить их в два столбца. Если поймете основную информацию, справитесь и со всем остальным.
Я подвинул линии, чтобы было ровнее. Это не сложно, делается при помощи курсора.
Смотрите, чтобы изображения сохранялись как jpeg (самая верхняя категория справа). Далее нажимаем «Сохранить».
Ну вот и все.
С этим закончили, теперь можно переходить к самой группе и работе с кодом.
3. Верстка в Вк для чайников
Раньше я думал, что вики-разметка применима только к сообществам. Не знаю изменилось ли что-то или так всегда было, но сейчас абсолютно не важно создаете ли вы группу или паблик. Странички можно сделать и там, и там.
Ну что ж, осталось дело за малым, верстка. Открываете «Список вики-страниц».
И добавляете новую.
Даете ей название. В нашем случае – меню.
И переходите к редактированию.
Первым делом нужно добавить все части нашей картинки.
Загружаем.
Делайте это из папки снизу-вверх по списку. От самого последнего (нижнего, в моем случае «Написать админу») к верхнему («Меню»), тогда все встанет верно, хотя не так уж трудно перетащить фрагменты при помощи мыши. Кому как удобнее.
Теперь нужно убрать отступы и сделать разные фрагменты ссылками, а кое-где и совсем убрать возможность щелкать. Переходим в кодовый режим.
Теги «center» указывают на то, что фотка и ее фрагменты расположены по центру. Я их уберу, чтобы вам было легче воспринимать информацию.
Если хотите, можете сделать тоже самое, но учтите, что иллюстрация съедет вправо.
Снова возвращаемся в код, чтобы убрать отступы между фрагментами рисунка.
Чтобы изображение вновь стало единым после размера поставьте точку с запятой и напишите тег nopadding (;nopadding).
Выглядеть это будет так.
Естественно, что отступов не должно быть после каждого фрагмента, а потому теги нужно продублировать.
Теперь иллюстрация выглядит единой. Если не получилось проверьте верно ли вы написали слово и поставили ли точку с запятой, уберите пробелы где нужно, чтобы было как в моем примере. Для результата важна каждая мелочь.
Сейчас при нажатии на разные части изображения, они открываются в новом окне.
Чтобы этого не происходило, понадобится еще один тег. Nolink. Не забывайте про точку с запятой.
Перехода не будет только на первой картинке, а вот к остальным можно подставить свои url.
Вы можете перенаправлять читателей на другие вики-страницы, к постам, в блоги и остальные социальные сети. Теперь сделать это не трудно, вы все умеете. Осталось лишь сохранить.
Вот так выглядит наше с вами меню.
А вот и желанная ссылочка.
4. Завершающий этап оформления
Наконец-то пришло время определиться публичная страница у вас или группа. От этого зависит дальнейшая стратегия.
Если вы не знаете что у вас, то переходите в раздел управление из категории «Мои группы».
Если вы хотите сделать как у меня и поставить на меню, то переходите ко второй части и мы продолжим красиво оформлять паблик. В результате получится что-то на подобие вот этого.
Я не сторонник делать меню просто картинкой в статусе, но некоторые хотят именно этого. Я не в праве никого критиковать и, если у вас группа, то вы можете воплотить свою задачу.
5. Видео инструкция
Посмотрите видео, всю основную работу мы с вами уже сделали, осталось дело за малым.
6. Альтернативный способ для Чайников за 100 руб.
Если возникли трудности при самостоятельном создании меню, смело идите на этот сервис — VkMenu.ru , где за скромную цену в 100 руб. (сегодня такая), сможете сделать менюшку через онлайн конструктор.
По-моему отличная альтернатива ручной работе, и проклинанию всех и вся, если ничего не выходит с вики-разметкой.
На этом я прощаюсь, но ненадолго. Отдохните немного и перейдем к следующей части.
Подписывайтесь на мою группу Вконтакте . Приятной работы и до скорой встречи!
И снова рад Вас приветствовать!
В сегодняшней статье речь пойдет исключительно про группу вконтаке, хотя в большей части, я предпочитаю работать с публичными страницами. Но когда в прошлой статья я затронул на примере своего паблика, у многих возникли вопросы, именно про меню для группы.
Как создать меню в группе вконтакте
Вот что у меня получилось.
Делал меню только для примера. В целях, разобраться с ним для групп, чтобы рассмотреть более подробно все тонкости для Вас.
И так. Вот основные шаги:
- Продумать основное меню
- Выбрать изображение
- Фотошоп (без фотошопа как всегда никуда 🙂)
- Раскройка изображения
- Заливка изображения в альбом контакта
Чтобы активировать свежие записи (для Вашего будущего меню) , нужно зайти в управление сообщества и включить пункт — «Материалы»
После того, как материалы будут включены, в верхней части группы появится пункт «Свежие новости», в котором и нужно будет создавать меню. Также как и с любой страницей контакта, мы попадаем в редактор, в котором можно как вручную заливать изображения или кнопочки меню, так и через wiki-разметку (кнопочка в правом верхнем углу).
Как Вы догадались, проще всего сначала нарисовать необходимую картинку в фотошопе, и заранее поместить на нее кнопочки, в будущем они будут ссылками.
В своём примере я использовал фон девушки, и поместил слева от нее 3 кнопки. Каждая кнопка — имела своё название.
Мое меню состояло из следующих пунктов:
Для внедрение готового изображения в контакт, предварительно его нужно раскроить. Для этого в фотошопе используем инструмент «Раскройка «. Думаю с этим сложностей не возникнет. Там всё просто… На всякий случай, сделал фото 🙂
Выбираем данный инструмент и начинаем «резать». У меня получилось 4 части. (самое простое, что придумал:), хотя можно изрезать его на кусочки)
Все необходимые работы по созданию меню выполнены. Теперь можно приступить к созданию меню вконтакте. Для этого поочередно загружаем изображения в контакт. Вот что получилось в итоге:
Теперь нажимаем на каждую кнопку (или часть изображения), и присваиваем необходимый адрес (ссылку). Чтобы убрать лишние пробелы нужно использовать тег «nopadding» (в меню Wiki-разметки)
Тег «nopadding» – убирает пробелы между картинками, то есть помогает «состыковать» их вплотную к друг другу.
В результате добавления тега, получилось следующее:
Вроде бы все понятно, и ничего сложного нет. И если вдруг надумаете создать его у себя, то дерзайте, наверняка у Вас получится красивее… В моем примере оно получилось не очень прикольным, как хотелось бы, но я рассмотрел для Вас рабочую часть. Наверняка, если потратить побольше времени, да ещё и обратиться к фрилансерам, то можно сделать очень крутую менюшку.
У многих видел, что делают продолжение основного аватара. Получается как одно целое изображение. Красиво смотрится. Но для создания такого, нужно лучше разбираться в фотошопе 🙂 .
Также, обратил внимание, что многих интересует вопрос — как сделать меню группы открытым , то есть чтобы открытое меню группы вконтакте было изначально при заходе в группу.
Ответ: Данную возможность насколько мне известно убрали администраторы Vkontakte. Раньше была отдельная кнопочка, чтобы меню было фиксированным — открытом. Затем эту функцию убрали, и теперь менюшки приходится открывать отдельно.
Хотя, встречал у некоторых открытые по умолчанию… и кто то даже говорил, что существует какой-то код, который справляется с этой проблемой. Но я бы не советовал использовать его. Судя по обсуждениям на многих форумах, админы это не приветствуют!
А на сегодня всё. До связи!
Как переименовать главное меню?
В вашей группе: Редактировать информацию > строка «Новости».Там пишете нужное название.
Почему главное меню сворачивается?
В том случае, если свежие новости группы слишком велики и не помещаются в 4 кб (4096 символов простого текста), в самой группе выводится только ссылка на страницу с этими новостями. Можете уменьшить вес страницы новостей, вынеся часть информацию в отдельные статьи, тогда на главной странице группы они снова появятся.
Как поместить опрос на главную?
Создаете новую тему, заходите в нее, вверху справа, рядом с «редактировать» нажимаем «опрос» и задаем опрос в группе. Дальше заходим в наш опрос, и в правом верхнем углу находим «на главную»
Как изменить количество обсуждений на главной странице группы?
Инструкция:
1. Внимательно смотрим на надпись «Обсуждения» на главной странице.
2. Когда глаза уже не могут долго смотреть в одну точку - посмотрите чуть правее.
3. Видите ссылку ред. ? Жмем!
4. В появившемся окне выбираем нужное число тем и сохраняем.
Как сделать стенку на отдельной странице?
Просто: http://vkontakte.ru/wall.php?gid=******
Вместо ****** - id вашей группы.
Что такое Уникальные Посетители и Просмотры?
Уникальный Посетитель - это уникальный ID! К примеру, 1 уникальный посетитель - это 1 человек. Или 9 уникальных посетителей - 9 человек. Грубо говоря, это реальное кол-во человек, посетившие вашу группу.
Просмотры - это кол-во просмотров, совершенное всеми уникальными посетителями. К примеру: Человек зашел в обсуждение, далее в меню, далее в раздел меню, далее снова в обсуждение, и в итоге от 1-ого человека на данный момент = 4 просмотра.
Как посмотреть все фото группы, начиная с последнего?
Ссылка на обзор всех фото имеет следующий вид:
где XXXXXXX — id вашей группы.
Как сделать надписи в блоке Группы-друзья?
Всё это просто. Делайте всё по пунктам:
1. Создаем новую группу. Заполняем все обязательные поля.
2. Добавляем эту группу в друзья Вашей основной группы.
3. Теперь переименовываем новую группу:
1) Редактировать информацию
2) В названии оставляем только вот это:
3) Сохраняем
4. Теперь в вашей основной группе есть группа-друг без имени, в описании которой вы можете и писать любой текст.
Как писать в столбик в графе руководство?
Написать должность в графе руководство в столбик очень просто. Для этого необходимо просто помнить следующие ключевые моменты:
1. Максимальное количество символов в подписи - 128 (включая пробелы и специальные символы)
2. Количество видимых символов в строке - 38
3. Для того, чтобы поставить пробел между словами, используйте неразрывный пробел Alt+0160, который можно получить путем набирания цифр в порядке: 0, 1, 6, 0 на NumPad’e при нажатой клавише Alt.
4. Для переноса строки используйте обычный пробел (клавиша Space)
5. В случае, когда слова из одной строки переносятся на предыдущую строку, дополняйте неразрывными пробелами предыдущую строку. 6. В браузере Opera, в отличие от остальных обозревателей, в некоторых случаях переноса не видно. А в Internet Explorer 8 данная система переноса вообще не работает.
Как создать мероприятие группы?
Идем: Мои встречи » Создать Событие »
В поле Организатор: выбираем из списка необходимую группу.
Примечание: Вы обязательно должны быть администратором группы, чтобы создать мероприятие. В противном случае в списке не будет группы.
Как запретить редактировать страницу другим участникам?
При редактировании страницы снизу, справа от кнопки «Предпросмотр» есть ссылка «Доступ к странице». Нажимите ее и перед Вами открывается новое небольшое окно. В нем представлены списки:
Кто может просматривать эту страницу?
Все пользователи
Только участники группы
Только руководители группы
Кто может редактировать эту страницу?
Все пользователи
Только участники группы
Только руководители группы
Выбираете в списке Кто может редактировать эту страницу? => Только руководители группы и проблема решена.
На Все Альбомы
На Видеозаписи
На Аудиозаписи
На все топики (обсуждения)
На все Приложения
На статистику группы
Написать пользователю
**** - ID Вашей группы, #### - Профиля
Как вставить Аудио в группу?
Для вставки аудио на страницу нужно использовать тег:
[]
Где XXX - ИД пользователя; YYY - ИД данной звуковой дорожки.
если же аудио взято из группы, то тег будет выглядеть следующим образом:
[]
Как вставить Фото с подменой изображения?
Для того, чтобы использовать подмену изображения, используйте программу VKThumbnail
Как делать различные ссылки через фото?
Вместо *** вводится соответствующий ИД. [] - ссылка на сайт [] - ссылка на страницу пользователя [] - ссылка на группу [] - ссылка на встречу [] - ссылка на вики-страницу [] - на вики-страницу с включенными опциями [] - на остальное
Как настроить разные опции к фото?
Как Вам уже известно, ссылку на фотографию можно указать в следующем формате:
[] Интересующий параметр options может содержать следующие значения:
Plain - ссылка на фотографию оформляется в виде текста, без картинки,
noborder - убирает рамку вокруг фотографии,
box - открытие картинки в окне,
nolink - убирает ссылку на фотографию,
nopadding - убирает пробелы между фото,
NNNpx или NNNxYYYpx - указывает размер фотографии в пикселях (ширину на высоту или только ширину)
Помните! Некоторые параметры совмещать нельзя. А также, для того, чтобы применить более 1 параметра, ставьте точку с запятой (;) между ними.
Как сделать якорь на вики-странице?
Полный якорь имеет следующий вид:
[]
Фото на странице плохого качества, почему?
Постарайтесь использовать оригинальную ширину изображения при вставке его в вики-страницу.Более того, пикселизация происходит в случае, если ширина оригинального изображения менее 130px
Как убрать пробел между фото?
Данный вопрос больше не актуален. Однако стоит отметить, что сами по себе пробелы никуда не исчезнут. Для того, чтобы от них избавиться, нужно в графе options поставить значение nopadding
Как создать одноименные вики-страницы?
Для создания одноименных страниц воспользуйтесь следующим способом:
1) Создайте искомую страницу, например такую:
[[Название страницы]]
2) Теперь создадим ее копию, для чего: скопируем код страницы и перед названием страницы поставим «+». Выглядеть это будет так:
[[+Название страницы]]
3) Мы получили две разные, но в то же время одноименные вики-страницы.
Как включить вики в моей группе?
1. Перейдите по ссылке «Редактировать информацию» на странице вашей группы.
2. В разделе «Настройки» поставьте галочку напротив «Новости включены».
3. В поле «Новости» вы можете сменить название вашей вики, например на «Навигация в группе».
Теперь у вас есть основная страница, которую можно редактировать. Для этого вернитесь к группе и нажмите на ссылку «ред.» справа от названия новостей.
Как создать страницу?
Чтобы создать страницу, нужно включить «Новости Группы» (в «Редактирование Информации»). Далее нажать на кнопку Редактировать и создать красивое и удобное меню! =) Остальные вики страницы создаются кодом:
[[название страницы]]
Как удалить созданную страницу?
Удалить её не возможно! Вы можете просто все в ней стереть, закрыть доступ, и убрать все ссылки ведущие на страницу.
Как узнать id страницы?
Для того, чтобы узнать id вики-страницы, нажмите, находясь непосредственно на ней вкладку «Просмотр». В адресной строке вы увидите ссылку типа
http://vk.com/pages.php?id=XXXXXX
где XXXXXX - и есть id страницы.
Можно ли изменить размер текста?
Нет
Как выровнять строки в таблице/как сделать ее невидимой?
1)Для того, чтобы выровнять все строки таблицы есть несколько способов:
— Используйте N-ное количество пробелов
Alt+0160
2) Поместите в первые ячейки каждого из столбцов белые (или голубые) иконки, растянутые на необходимую ширину по количеству ячеек.
Как создавать wiki-страницы для пабликов?
Об это подробнее .
В этой статье я вам расскажу, как красиво оформить группу в контакте. Согласитесь, чем красивей группа, тем приятней на нее подписываться. При этом в группе будет удобное меню, в которое так и хочется зайти и просмотреть его содержимое.
Меньше разговоров, приступим к созданию меню для группы в Вконтакте
.
Для начала вам нужно собственно создать саму группу, я в предыдущей статье писал, .
И так, все начинается в фотошопе, мы создаем картинку того меню которое вы хотите. В основном - это какой-то фон с наименованием рубрик. Мне как раз попросил знакомый сделать красивую группу для его фирмы aero-stomadent, занимается промышленной вентиляцией, вот я и займусь ею.
Я нашел замечательный фон природы Аляски, собственно на нем и буду все делать.
На фоне пишем само меню. Я, например, пишу, то чем занимается фирма. Это и будут кнопки, на которые потом я буду делать еще страницы. Каждое слово будет в дальнейшем кнопкой меню.
Справа сделайте так, чтобы в будущем эта часть была аватаркой группы.
Теперь режим картинку на маленькие изображения. Выбираем в меню функцию "Раскройка", затем правой кнопкой мыши на полотно и нарезайте так, чтобы каждое слово было отдельно.
Желательно, чтобы нарезано приблизительно так.
После нарезки сохраняем файл, не просто а через "Сохранить для Web и устройств…" (или Alt+Shift+Ctrl+S), оно создаст папу с всеми уже нарезанными файлами.
Сейчас еще не идем в группу, нам еще нужно создать вики разметку. Или другими словами создать страницу.
Как создать Wiki – страницу в Вконтакте?
Открываем новую вкладку браузера и вставляем туда такую ссылку: http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы где XXX - ид вашей группы. Например, у меня было так.
http://vk.com/pages?oid=-91934542&p=меню
Затем нажимаем Наполнить содержанием . Тут видим очень простой редактор, выбираем функцию фотоаппарат чтобы добавить все наши фотографии меню. Должно получится что-то на подобии как у меня.
Но между картинками есть пробелы, чтобы убрать пробелы - входим в режим wiki-разметки (это сверху в правом углу знак кавычек <>) вписываем такой тег "option;nopadding;" перед размерами фотографий. Например []
И получилось уже все вместе.
И так, осталось теперь в каждую кнопку вбить ссылки. Опять в wiki-разметки все делается. Вбиваем уже подготовленные до этого ссылки статей, которые вы считаете нужными.
Нажимаем сохранить, смотрим что получилось, у меня все сошлось если нажать переходит по ссылкам "https://vk.com/page-91934542_49969122"
Затем уже перехожу в группу и перед этим делаю такую картинку которая будет отображаться для людей в группе.
И просто делаю пост. Вставляю ссылку на меню и добавляю фотографию которую сделал сделал только что.
В этой статье поговорим о том, как установить меню вконтакте. В прошлых статьях я рассказывал Вам о том, и как правильно сделать меню в фотошопе, а теперь настало время его интеграции в нашу группу.
Но для того, чтобы нам начать процесс внедрения нашей менюшки в контакт для начала нужно разрезать ее на составные части. Для этого используем инструмент “Раскройка”.
Выбираем данный инструмент и начинаем «резать». У меня получилось 7 частей.
Далее заходим в “Файл” – “Сохранить под Web” – выбираем расширение jpeg и качество 100%, жмем “Сохранить”. У нас должно появиться 7 файлов. Все! С фотошопом покончено! Все необходимые работы по созданию меню выполнены. Приступим к установке меню вконтакте. Для этого:
1) Заходим в свою созданную группу. Там находим “Альбомы” – “Добавить” (выделено красным прямоугольником на рисунке 1). Ищем кнопку “Выберите файл”. Нажимаем и загружаем созданные 7 файлов.
Добавление фото в альбом группы вконтакте
Рисунок 1
Добавление фото в альбом группы вконтакте
2) Внимание! У кого не включены «Свежие новости», а по умолчанию они не включены, нужно выбрать «Управление сообществом», найти «Материалы» и включить их (Рисунок 2). 
Рисунок 2
3. Наводим мышкой на “Свежие новости” и правее появляется ссылка “Редактировать”, нажимаем на неё (Рисунок 3).
Рисунок 3
4. Появляется окошко как на рисунке 4. Нас интересует кнопка «Режим wiki разметки» (выделено красным прямоугольником». Нажимаем на нее.
Рисунок 4
После этого в пустую область ниже вводим wiki — код, который и отобразит наше будущее меню. У меня он получился следующим (Рисунок 5):
Рисунок 5
Wiki — код нужно ввести точно так и в такой последовательности, как указано на рисунке 5. Дальше Вы уже можете сами поэкспериментировать.
Пример синтаксиса добавления картинки следующий:
[], где
photo-41875814_286789280 – ID загруженной картинки, который можно посмотреть в адресной строке в браузере (рисунок 6).
Рисунок 6
Тег “nopadding” – убирает пробелы между картинками, то есть помогает «состыковать» их вплотную к друг другу.
370px – ширина картинки, смотрим это значение в свойствах файла.
https://www.. То есть по нажатию по данной кнопке, пользователь перейдет из группы в контакте на данный сайт.
Для того, чтобы сделать картинку некликабельной я использовал тег nolink:
Вот собственно и все! Мое первое меню создано! Вот так оно выглядит в группе (рисунок 7).
