как убрать пробел в меню вк
Урок 146 Как сделать в группе вконтакте меню
Масштабная популярность социальной сети Вкнотакте сейчас достигает очень больших размеров. Здесь собирается различный контингент людей, встречаются представители разных социальных слоев и всех возрастов. Поэтому Вконтакте разработана специальная возможность разграничить сферы интересов – это специально созданные группы по отдельным всевозможным тематикам.
Чтобы создать такую группу, необходимо проделать достаточно большую работу. Продумать все до мелочей, начиная с названия группы и заканчивая ее функциональным назначением. Отдельной темой обсуждения этого вопроса является создание в группе Вконтакте меню.
Меню является визитной карточкой группы Вконтакте, оно отражает ее содержание и позволяет с легкостью найти искомый материал. Чтобы создать в своей группе меню, нужно выполнять следующие шаги:
У нас будет вот такой вот простой фон.
Чтобы открыть файл в редакторе нужно нажать «файл», далее «открыть…» и выбрать нужный рисунок.
С помощью текста, оформите свое меню. Слева нажмите букву T и введите название пунктов меню.
370рх – это размер фотографии, Вы можете выбрать любой размер, но 370 это оптимальный вариант, придающий меню нужную ширину и не портя качества.
noborder – это тег, убирающий рамку (его можно не прописывать, если необходимо, чтобы рамка осталась).
nopadding — это тег, убирающий пробелы между картинками, позволяя меню выглядеть как единая картинка.
В целом, прописываемый код должен выглядеть следующим образом:
page-11053617_29800171 — это ссылка, на которую необходимо перейти, щелкая на данную картинку.
Следующий урок: Как снять деньги с вебмани.
Предыдущий урок: Как заработать биткоин.
Как убрать пробелы в меню группы вконтакте
можете кинуть ссылку где именно об этом говорится
10 ответов к вопросу “как убрать расстояние между картинками в меню группы вконтакте (wiki разметка)”
Вставить тэг nopadding
[[photo182822219_288952650|382x81px;nopadding|http://vk.com/album-42694726_162325912]]
а если nopadding не помогает? я сохраняю меню, а именно эти nopadding удаляются каждый раз.
Несколько лет назад, когда мы были молодыми и зелеными новичками в SMM, найти годное руководство по верстке меню группы ВКонтакте было не так чтобы очень уж простым занятием. Время шло, якобы открытых пошаговых инструкций становилось все больше, красивых групп тоже, но качественного руководства «от и до» как не было, так и нет. Или оно спрятано так глубоко в недрах интернета, что просто так с пары запросов его не найти.
Мы провели эксперимент. Взяли довольно толкового SMM-менеджера (1 шт.), пустую группу VKontakte (1 шт.) и предложили ему, опираясь на Google, сделать верстку графического меню. Понадобилось около 3 часов рабочего времени, 7 (!) тематических статей из топа, 3 кружки кофе и примерно 15 гневных восклицаний разной степени нецензурности.
Все потому, что какие-то статьи разбирали вопрос поверхностно, какие-то, наоборот, уводили в дебри, а в каких-то (вроде, неплохих с виду) упускались одна-две детали, без которых вся стройная система рушилась.
И тут нужно учесть, что наш-то менеджер – крепкий орешек почище Брюса Уиллиса, который уже имел дело с wiki-разметкой (просто не очень часто) и примерно представлял, как сделать меню в группе. Что же говорить про тех, для кого меню ВКонтакте – и вовсе terra incognita? Мы решили: хватит это терпеть! пришла пора разбираться вместе!
Брюс согласен и тоже полон решимости
Шаг #1
Как сделать меню ВКонтакте? Определяем структуру
Задались вопросом, как сделать красивое меню для группы ВКонтакте (или, на худой конец, хотя бы симпатичное)? С самого начала вам нужно решить два момента:
а) что вы хотите показать людям – конкретные товары? отзывы о вас? портфолио и прайс?
б) где эта информация будет лежать – на вашем сайте или в обсуждениях группы?
Какие пункты стоит включить обязательно?
Если ваша группа об услугах:
Если ваша группа о товарах:
Это ключевые пункты. По желанию их можно заменить или дополнить, но основные направления у вас теперь есть.
Определите то, о чем вы в первую очередь хотите рассказать, а потом уже начинайте оформление.
Шаг #2
Меню для группы ВКонтакте – картинка
Когда вы определитесь со структурой меню, нужно раздобыть две картинки. Обычно они в больших количествах водятся у дизайнеров, но, если любите и умеете, можно и самостоятельно сотворить в фотошопе.
Первая картинка будет служить «обложкой» меню, вторая – непосредственно для навигации.
Стандартный вид меню в группе (до того, как на него кликнули)
Открытое меню с кнопками
Проверьте, чтобы ваша картинка с «кнопками» вписывалась в стандартные размеры меню в группе ВКонтакте – ширина 600 – 606px, высота – на ваше усмотрение.
Детально процесс описывать не будем – лучше один раз увидеть.
Всё! Изображения для меню готовы.
Шаг #3
Как сделать меню ВКонтакте? Подготовка сообщества
До того как сделать wiki-меню ВКонтакте, подготовьте группу: через кнопку «Управление сообществом» подключите разделы «Обсуждения» и «Материалы». Материалы при этом нужно сделать ограниченными.
Вот как выглядит «путь» настройки на скриншотах
После этого страница вашего сообщества выглядит так – открылась возможность добавлять обсуждения и появился раздел «Свежие новости».
Это нам и было нужно.
Шаг #4
Как сделать меню группы ВКонтакте? Подготовка посадочных страниц
Помните шаг #1? Там мы определялись, куда будем вести людей – на сайт или в раздел обсуждений.
Наша цель – чтобы каждой кнопке соответствовала одна страница обсуждений.
Нажимаем кнопку «Добавить обсуждение» и прописываем заголовок и текст. И так несколько раз – до тех пор, пока содержимое для всех кнопок не будет готово.
Шаг #5
Как добавить меню в группу ВКонтакте? Программирование
А вот теперь – момент истины: непосредственное создание меню. Заходим во вкладку «Свежие новости» и начинаем редактирование.
Загружаем ранее разрезанные фрагменты меню через форму «Добавить фотографию». Важно: фрагменты должны идти в той последовательности, в которой они потом будут собраны в итоговой картинке. Получаем следующее:
Пока не очень похоже на настоящее wiki-меню ВКонтакте, правда? Между фрагментами картинки – внезапные пробелы, да и сама картинка очень маленькая. Минуту терпения, сейчас все будет!
Переходим в «Режим wiki-разметки» (на предыдущем рисунке кнопка перехода выделена красной рамкой). И видим вот это.
Это, правда, выглядит еще более пугающе и уж совсем не похоже на красивое меню, которое поможет в раскрутке страницы ВКонтакте или группы бренда. Да что там – в таком виде оно даже не сделает эту группу хотя бы привлекательной.
Поэтому смело правим исходный код!
Первое – убираем пустые строчки между строками кода.
Второе – исправляем размеры изображения: проверяем длину и ширину каждого фрагмента картинки и прописываем фактические цифры, а не то, что «ВКонтакте» вставил в код по умолчанию.
Третье – добавляем фрагмент кода ;noborder;nopadding, который позволит убрать пробелы между фрагментами картинки.
Четвертое – вставляем ссылки либо на ранее созданные темы (см. шаг #4) в формате topic—xxxx_xxxx, либо на нужные страницы сайта в формате https://xxxxxxx/.
В итоге должен получиться такой код:
Четыре
Меняем строку «Свежие новости» на слово «Меню» и нажимаем «Сохранить страницу».
Сохраняем ссылку на меню (она в адресной строке).
Шаг #6
Как сделать меню в группе ВКонтакте? Финальный штрих
Возвращаемся на основную страницу группы и создаем запись:
После того, как пост опубликован, закрепляем его.
Теперь вы знаете, как сделать меню ВКонтакте для группы, и можете создать и оформить любое сообщество. Так что смелее – творите, пробуйте, радуйтесь результатам.
PS. Если совсем нет времени изучать, как сделать меню в группе ВКонтакте, или под рукой нет хорошего дизайнера для создания картинок, обращайтесь – с радостью поможем!
Оформляла группу вконтакте для фирмы, в которой работаю. Столкнулась с задачей создания меню. Набрала в поисковике «Оформление групп вконтакте». Из полезного получила в ответ огромный пост и получасовое видео. Оказалось, что если не заморачиваться а сделать простое и красивое меню — все гораздо проще чем кажется.
И так, как по-быстрому сделать оформление?
Для начала включим в группе такую возможность. Заходим в раздел «управление сообществом» и включаем материалы. Теперь на главной странице, при наведении на слово меню появляется надпись «Редактировать».
Если у вас есть фотошоп и вы умеете им пользоваться, все еще проще. Я делала в paint.
Нужно определиться с размерами меню и аватарки по длине. Хорошо чтобы они заканчивались на одном уровне. С шириной все стандартно. Ширина меню – 382 пикселя. Ширина аватарки – 200 пикселей.
Если меню и аватарка составляют единую картинку, не забудьте про белую полосу между ними. Ее не убрать, поэтому с картинки, нужно вырезать сразу.
Далее нам нужно поделить меню на то количество частей, сколько ссылок мы планируем разместить. Любого размера по высоте. Сохраняем их как отдельные файлы.
В окне «Редактирование» загружаем кусочки будущего меню.
Если перейти в режим вики разметки <>, можно через вертикальную черту вставить ссылку для перехода.
[[photo239952196_322501460|400px72;nopadding;|page-11053617_29800171]]
photo239952196_322501460 – это ссылка на фотографию.
400px72 — это размер фотографии
nopadding — это тег, убирающий пробелы между картинками
page-11053617_29800171 — это ссылка, на которую будут переходить пользователи группы, щелкая на данный текст на картинке. Узнать ее можно также, как и ссылку на фотографию, просто открыв нужную страницу и скопировав ее из верхней адресной строки браузера.
Если после всех операций между картинками осталось расстояние, проверьте нет ли лишних пробелов.
Урок 146 Как сделать в группе вконтакте меню
Масштабная популярность социальной сети Вкнотакте сейчас достигает очень больших размеров. Здесь собирается различный контингент людей, встречаются представители разных социальных слоев и всех возрастов. Поэтому Вконтакте разработана специальная возможность разграничить сферы интересов – это специально созданные группы по отдельным всевозможным тематикам.
Чтобы создать такую группу, необходимо проделать достаточно большую работу. Продумать все до мелочей, начиная с названия группы и заканчивая ее функциональным назначением. Отдельной темой обсуждения этого вопроса является создание в группе Вконтакте меню.
Меню является визитной карточкой группы Вконтакте, оно отражает ее содержание и позволяет с легкостью найти искомый материал. Чтобы создать в своей группе меню, нужно выполнять следующие шаги:
У нас будет вот такой вот простой фон.
Чтобы открыть файл в редакторе нужно нажать «файл», далее «открыть…» и выбрать нужный рисунок.
С помощью текста, оформите свое меню. Слева нажмите букву T и введите название пунктов меню.
370рх – это размер фотографии, Вы можете выбрать любой размер, но 370 это оптимальный вариант, придающий меню нужную ширину и не портя качества.
noborder – это тег, убирающий рамку (его можно не прописывать, если необходимо, чтобы рамка осталась).
nopadding — это тег, убирающий пробелы между картинками, позволяя меню выглядеть как единая картинка.
В целом, прописываемый код должен выглядеть следующим образом:
page-11053617_29800171 — это ссылка, на которую необходимо перейти, щелкая на данную картинку.
Следующий урок: Как снять деньги с вебмани.
Предыдущий урок: Как заработать биткоин.
Пробелы между пунктами меню на wordpress?
Всем привет. Учусь натягивать вёрстку на вордпресс и вот такой косяк вылез при создании меню. Пробелы между пунктами меню, которые получаются из-за непонятных элементов в коде. Когда навожу на этот элемент, всплывает «whitespace-only текстовый узел».
Кто-нибудь сталкивался с такими пробелами?
Оценить 6 комментариев
irve: дело в том, что пока я верстал обычный HTML шаблон было всё ок (через леттер-спейсинг фиксил пробелы), а когда начал работать с вордпрессом и использовать код для меню, то появились эти пробелы-элементы.
вот собственно код для меню вордпресса,
которым я заменил свой html код:
тут как видно никаких пробелов нет, всё хорошо.
Здравствуй.
Автор вопроса уже нашел решение проблемы. И все же кому-нибудь поможет мой ответ.
Есть еще один вариант решения проблемы с отступами между пунктами меню. В этом случае попробуйте вставить пустой комментарий между тегами li.
Пример с комментарием:
Решил воссоздать проблему. Вот пару скриншотов.
Проблема c отступами:
Решенная проблема с добавлением пустого комментария между тегами а:
Так выглядит верстка в редакторе:
Как сделать меню для группы ВКонтакте с помощью вики разметки
Самым эффективным и удобным способом оформления группы в контакте является использование wiki-разметки. Данная разметка схожа по принципу действия с html кодом, но является более простой и понятной. Своим названием она обязана Википедии, благодаря которой многие пользователи и успели познакомиться с основными особенностями wiki-разметки.
Wiki-разметка позволяет легко и быстро оформить внешний вид группы, создавая графические таблицы и спойлеры, форматируя текст и работая с изображениями, ссылками и якорями. Вам больше не придется сутками изучать книги по html, ведь изучению wiki-разметки достаточно уделить не более часа своего времени.
Существует несколько способов, как сделать меню для группы в контакте при помощи wiki-разметки, и то, какой из этих способов выберите Вы – зависит от направленности и цели группы. Если это социально направленная группа, то лучше всего подойдет текстовое меню, т.к. оно выглядит куда более серьезно, чем графическое. Использовать изображения в своём меню лучше всего для групп развлекательного или коммерческого характера.
Работа с изображениями
Вставить картинку или фотографию в контакте при помощи wiki-разметки можно только в том случае, если это изображение есть в альбомах на сайте.
Итак, для вставки картинки заходим в альбом, копируем адрес фотографии, например photo11111_11111, и обрамляем его двойными квадратными скобочками таким образом:
Если Вам нужно прикрепить текст или ссылку к изображению, а также немного изменить его внешний вид, то разметка будет выглядеть таким образом:
Создание таблиц с помощью wiki-разметки
<|знак начала таблицы, является обязательным атрибутом любой таблицы;
|+ знак расположения названия таблицы по центру, ставится сразу после знака начала таблицы и не является обязательным атрибутом;
|- знак начала новой строки, в т.ч. и строки ячеек;
| знак, отвечающий за прозрачность ячейки;
! знак, отвечающий за темный цвет ячейки; если отсутствует – обязательно применение предыдущего знака;
|> знак конца таблицы, необязательный атрибут, используется для предотвращения возникновения ошибок.
Заполняя таблицу, данные каждой ячейки следует помещать после знака |, а разделяя ячейки, необходимо просто продублировать типы строки таким образом: || или !!.
Приведем пример оформления меню группы с помощью wiki-разметки.
Это меню было создано применением следующего кода:
[[1 сезон|1]] | [[2 сезон|2]] | [[3 сезон|3]] | [[4 сезон|4]]
Оформление ссылок при помощи wiki-разметки
При оформлении коммерческих групп очень важно уметь преподнести пользователям ссылку на тот или иной товар. В wiki-разметке существует три способа оформления внешних ссылок:
Как сделать графическое меню в группе?
Наверняка вы видели красивые графические меню и кнопки в группах и хотели бы сделать такое меню у себя? Вот алгоритм действий.
Для создания красивого меню нужно немного знать фотошоп и немного вики-разметку:
1. Нарезаем картинку в фотошопе и жмём «Сохранить для веб»
2. Загружаем картинки через Стандартный загрузчик т.к. флеш-загрузчик может ухудшить качество
3. Собираем меню тегом nopadding
4. Прописываем ссылки
По итогу получится что-то типа:
[[photo-177777777_18888888|noborder;370px;nopadding|club11111111]]
[[photo-177777777_18888888|noborder;370px;nopadding|Новости]]
[[photo-177777777_18888888|noborder;370px;nopadding|Программы]]
[[photo-177777777_18888888|noborder;370px;nopadding|https://vk.com]]
[[photo-177777777_18888888|noborder;370px;nopadding|Правила]]
[[photo-177777777_18888888|noborder;370px;nopadding|club11111111]]
[[photo-177777777_18888888|noborder;370px;nopadding|Магазин]]
[[photo-177777777_18888888|noborder;370px;nopadding|Полезное]]
[[photo-177777777_18888888|noborder;370px;nopadding|Админы]]
[[photo-177777777_18888888|noborder;370px;nopadding|F.A.Q.]]
Особенности и секреты wiki-разметки
Большинство особенностей wiki-разметки познаются только опытным путем и недоступны для начинающих wiki-программистов. Но для того, чтобы избежать ошибок при оформлении групп, всё-таки желательно заранее ознакомиться с некоторыми из них.
Приложения в контакте для wiki-разметки
Для простоты понимания wiki-разметки создатели приложений в контакте подарили пользователям несколько своих творений. Одни из них являются своеобразными тренингами и уроками по wiki-разметке, другие же полностью освобождают пользователя от необходимости изучать разметку, осуществляя её редактирование привычным визуальным редактором.
Интерактивный FAQ(beta) Приложение, которое дает возможность пользователям проверить свои способности и знания wiki-разметки. Принцип приложения довольно прост: Вам дается уже оформленное меню, к которому необходимо восстановить код разметки, после чего сравнить свою версию с правильной.
Вики редактор Приложение-редактор, который поможет Вам оформить группу без каких-либо знаний wiki-разметки: Вам достаточно просто кликать мышкой в визуальном редакторе, а всё остальное приложение сделает за Вас!
Узнать больше про wiki-разметку и пройти наглядные видео-уроки по оформлению групп в контакте можно, воспользовавшись путеводителем по видео-урокам от официальной группы Wiki-разметки в контакте по ссылке https://vk.com/app1755280.
Если вам нужна раскрутка группы, то читайте наш пост.