[Мануал-free]Создаём графическое меню для паблика ВК

(Ответов: 24, Просмотров: 19692)
Страница 1 из 3 123 Последняя
  1. You shall not pass. Ага. Аватар для Гендальф Серый
    • Регистрация: 02.02.2013
    • Сообщений: 1,184
    • Репутация: 1512
    • Webmoney BL: ?
    Золотой пост
    Гендальф Серый. Создание графического меню для публичной страницы Вконтакте.
    Работает исключительно на магии.
    Специально для webmasters.ru

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

    1. Создаём страницу для нашего меню.

    Есть много различных способов, однако я пользуюсь этим: тыц

    Тут всё просто - вставляем айдишник нашего паблика, вводим название страницы и получаем готовую страницу на выходе.
    Как узнать ID Паблика
    Находим тут нужный вам паблик
    Копируем id паблика из ссылки на статистику (http://vk.com/stats?gid=40207438), из ссылки «Управление страницей» (http://vk.com/public40207438?act=edit) или с поста на стенке (http://vk.com/wall-40207438_136). Получили ID публичной страницы: 40207438
    Вставляем в форму, что выше в поле «ID Паблика»
    Заполняем «Название создаваемой страницы»
    Жмем «Создать страницу». В новой вкладке открывается ваша страница.
    Забыли адрес страницы? Не беда, если вы помните название страницы. Проделайте то же самое, что нужно для создания новой страницы и вы попадете на уже созданную вами страницу.
    Итог: мы получили страницу vk.com/page-40207438_44110215
    2. Подготовка графики

    Ну что, страница у нас есть, осталось сделать графический макет. Лично я рисую цельную картинку, а потом разрезаю её на части.
    Пример:


    Но иногда нужно отрисовать множество отдельный элементов. В таком случае, рисовать придётся каждый отдельно.
    Пример:



    Лично я пользуюсь Corel Draw, ибо очень удобно. (люблю вектор, да и лицензия у меня). Однако, сами можете рисовать хоть в пэинте. Ещё хочу предупредить, больше 10 элементов у вас прикрепить не выйдет, так что рассчитывайте количество изображений. Я, конечно, знаю, как обойти это ограничение, но ведь я весь такой загадочный...

    3. Вёрстка

    Так, страница у нас создана, графика у нас есть. Теперь начинается магия. Изначально вики-страницы не предназначены для паблика, но нас это не удержит! Мы будем делать всё и сразу.

    Грузим ваши изображения. Имеем много весёлых картинок, которые расположены крайне весело. Аррррр.



    Теперь начинаются математические рассчёты. Максимальная ширина: 600px. Высота нам не важна. Давайте прокликаем каждую картинку и установим ширину таким образом, чтобы общая длина строки не превышала максимальный размер:



    Прим. Поля каждой картинки - 5px, что не стоит учитывать, если мы хотим сделать на выходе цельное изображение. Чуть позже я расскажу, как их убрать.

    После всего этого действа на выходе мы получаем что-то вроде этого:






    Но меню без ссылок нам не нужно. Вот тут и начинается магия.
    Каким образом ВК проставляет ссылки и атрибуты известно, верно, только разрабам, однако где наша не пропадала?
    Опять прокликиваем каждую картинку и прописываем название и ссылку на сайт. Как-то так (осторожно, скрытая реклама):




    Уже работает, но выглядит ужасно. Не стоит пугаться этого ужаса. Дуем из визуального редактора в редактор кода и видим весёлый-развесёлый код, немного похожий на вики-разметку из википедии. Нам нужно убрать поля у картинок. Для этого мы к каждому изображению добавлем атрибуты nopadding и noborder:


    Код:
    [[photo216767283_309869015|99x72px;noborder;nopadding;| ]]
    [[photo216767283_309869017|199x72px;noborder;nopadding;| ]]
    [[photo216767283_309869021|203x72px;noborder;nopadding;| ]]
    [[photo216767283_309869023|95x72px;noborder;nopadding;| ]] 
    [[photo216767283_309869719|298x90px;noborder;nopadding;|page-57681113_44775894]]
    [[photo216767283_309869729|298x90px;noborder;nopadding;|page-57681113_45064452]]
    [[photo216767283_310545432|596x33px;noborder;nopadding;| ]]
    [[photo216767283_309881284|298x117px;noborder;nopadding;|page-57681113_45064396]]
    [[photo216767283_309881296|298x117px;noborder;nopadding;|page-57681113_45064435]]

    Скопируйте себе этот код и отложите в надёжное место. Я, как истинный идиот скидываю его прямо в скайп заказчику (да простит меня Денис :), но на самом деле это удобно - можно восстановить всё прямо из истории переписки).

    Очень важно: ни в коем случае не выходите из текстового редактора, не сохранив код. Если вы перейдёте из текстового редактора в визуальный, а потом назад - у вас слетят все атрибуты.

    На выходе (если всё верно подрассчитали) имеем уже более менее нормальное изображение:





    4. Размещение в закреплённом посте

    Так, страница с меню у вас готова - осталось сделать так, чтобы она была всем видна. Рисуем красивую зазывающую картинку. Ну или не зазывающую. Я делаю нечто вроде такого:



    или такого:



    Затем мы делаем новый пост в паблике, в который вставляем ссылку на нашу страницу с меню и прикрепляем к нему нашу крутую картинку:



    Не пугайтесь, после того, как нажмёте на "опубликовать" адрес ссылки исчезнет и останется только название страницы:




    Ну а дальше всё проще пареной репы: жмём на время создания поста и затем на "закрупить". Вуаля! Стильное меню для вашей публичной страницы готово! Вы восхитительны!




    Макет для паблика, на котором я показывал примеры оформления меню для публичной страницы Вконтакте делал замечательный дизайнер Илья Гармаш. Но чаще я рисую сам.

    Несравненные консультации по продвижению Вконтакте оказывает мой хороший друг и коллега Арсений Скурт


    Ну и несколько примеров, сделанных мною лично с нуля:
    Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 1 сообщение(ий)):
    У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.


    Так же хочу передать пламенный привет всем тем, кто продаёт мои мануалы или копирует к себе на сайты/форумы без указания ссылки на источник. Вы все сгорите в аду.


    С вами был Гендальф Серый, удачи в продвижении!
    • 89

    Спасибо сказали:

    0pium(30.09.2013), 3s777(01.10.2013), Adiofilms(30.09.2013), Aivorg(12.01.2014), Akara(12.10.2013), algaretio(01.10.2013), Anna Iv(13.02.2014), anozit(01.10.2013), arhimed(29.01.2014), ArhStrAngeR(30.09.2013), Asacura(01.10.2013), Asarnatsky(30.09.2013), Asheynik(27.11.2015), Avot(03.10.2013), batik(30.09.2013), BlackMaN333(18.01.2014), Braza(08.10.2013), butus(21.01.2014), BuxFactor(13.10.2013), chudikos(01.10.2013), CuxpecT(30.09.2013), deftones(03.10.2013), dekartwork(18.10.2013), Denis Creative(04.10.2013), Denisua(30.09.2013), dik85(24.01.2014), DmStarkoff(01.10.2013), Donleone(01.10.2013), easymisc(30.09.2013), Fooks(08.05.2015), GeeTon(01.10.2013), GwynnBleiidd(03.10.2013), HaXaL(28.10.2013), heisi(01.10.2013), HelgerLEE(01.10.2013), igor86(17.10.2013), INFOdoz(30.09.2013), Istoric(02.10.2013), kanzas(01.10.2013), kombayn(17.10.2013), Krez(09.10.2013), kvk000(10.10.2013), MacLipson(06.10.2013), maxim324(01.10.2013), Michael2010(08.10.2013), Mohatma(01.10.2013), mr_crossy(02.10.2013), newsss(01.10.2013), NightHawk(30.09.2013), Norder(01.10.2013), Odhost(03.10.2013), OKyJIucT(01.10.2013), oleg_ug(30.09.2013), pinskiy(01.10.2013), Pryanik_IT(08.10.2013), rawebmaster(14.10.2013), repz(06.12.2013), ridmal(05.10.2013), ROMASA464(30.09.2013), roon(04.10.2013), RZA2008(09.10.2013), Scorpiooo(01.10.2013), search(01.10.2013), semyon(30.09.2013), seoalb(01.10.2013), SeotopInUa(01.10.2013), seowp(12.02.2014), Septik(30.09.2013), SharkBusiness(01.10.2013), Sheens(01.10.2013), Shred(01.10.2013), Sk8er(01.10.2013), Sky-R(30.09.2013), sprigan(14.10.2013), stalker37(05.10.2013), STRIJ(30.09.2013), suschinsky(02.10.2013), Translit13(01.10.2013), Vadik(30.09.2013), VARTAN(01.10.2013), Visage(30.09.2013), Volday(04.10.2013), votren(11.10.2013), wolf28(30.09.2013), yurii2000(08.12.2013), zhurik(30.09.2013), zxgame(03.10.2013), Zzorge(30.09.2013), Арсен(02.10.2013), Дмитрий Сатаров(28.10.2013), Стася(21.10.2013),
  2. Продвижение без котиков Аватар для Zzorge
    • Регистрация: 25.02.2012
    • Сообщений: 1,977
    • Репутация: 1864
    Хотел написать подобную статей, но как всегда Кирюха опережает)

    К слову про момент верстки - не делайте её в графическом редакторе, при сохранении он жутко лагает и иногда все портит.

    Кстати, давно хотел спросить. Кирилл, что ты больше любишь, мясо или рулет?
    • 3

    Спасибо сказали:

    Pryanik_IT(08.10.2013), Гендальф Серый(30.09.2013), Стася(21.10.2013),
  3. Sapienti sat Аватар для brainix
    • Регистрация: 01.01.2013
    • Сообщений: 1,925
    • Записей в дневнике: 1
    • Репутация: 817
    • Webmoney BL: ?
    Zzorge, Гендальф Серый, а в личной переписке это нельзя было выяснить? :) Или только что кто-то проспорил

    Гендальф Серый, хотите форум разорить золотыми темами?
    • 2

    Спасибо сказали:

    Zzorge(30.09.2013), Гендальф Серый(30.09.2013),
  4. Опытный Аватар для Denisua
    • Регистрация: 25.02.2013
    • Сообщений: 373
    • Репутация: 52
    • Webmoney BL: ?
    Всем доброго времени суток.
    Гендальф)) Очень порадовал предоставленный тобой здесь контент, так же порадовало меня как заказчика твой подход к выполнению работы. Потому что без письменного ТЗ ты создал шедевр и я рад, что те паблики, которые мне нравились по дизайну и по оферам были сделаны тобой. Что я могу еще сказать ? Всем смело рекомендую обращаться к Гендальфу хотя бы по одной причине. Вот она Будь в тренде ВКонтакте
    • 2

    Спасибо сказали:

    0pium(30.09.2013), Гендальф Серый(30.09.2013),
  5. Banned
    • Регистрация: 12.02.2013
    • Сообщений: 818
    • Записей в дневнике: 1
    • Репутация: 149
    • Webmoney BL: ?
    Блин,спасибо вам!
    Сейчас пойду админам пабликов спамить с предложением о создании меню))
    • 2

    Спасибо сказали:

    yurii2000(05.10.2013), Гендальф Серый(01.10.2013),
  6. Гуру
    • Регистрация: 28.03.2011
    • Сообщений: 1,074
    • Репутация: 198
    • Webmoney BL: ?
    Просто как в дополнение статьи: Простая менюшка реально повышает количество переходов на ваш сайт. Проверено. Как минимум, на процентов 50. Так что всегда делайте менюшки для ваших групп вконтакте, не пренебрегайте ими.
    Купить Хрумер со скидкой. Лучший инструмент для наращивания ссылочной массы!
    • 3

    Спасибо сказали:

    3s777(01.10.2013), Anna Iv(13.02.2014), Гендальф Серый(01.10.2013),
  7. Гуру Аватар для 3s777
    • Регистрация: 09.02.2013
    • Сообщений: 1,417
    • Репутация: 384
    • Webmoney BL: ?
    Как всегда информативно и все по делу.
    Спасибо большое за мануал!
    • 1

    Спасибо сказали:

  8. Дипломник Аватар для VARTAN
    • Регистрация: 22.04.2013
    • Сообщений: 130
    • Репутация: 11
    • Webmoney BL: ?
    Спасибо за мануал очень полезная статья. но зачем совершать дополнительные излишние манипуляции с созданием паблика на постороннем сайте если всё тоже самое можно сделать за 3 шага на офф сайте!?
    • 0
  9. Новичок Аватар для heisi
    • Регистрация: 05.09.2013
    • Сообщений: 12
    • Репутация: 1
    Приятный и простой мануал. Как раз думал что-то аналогичное запилить, а тут как раз в тему дополнительные идеи. Спасибо, буду пробовать
    • 0
  10. You shall not pass. Ага. Аватар для Гендальф Серый
    • Регистрация: 02.02.2013
    • Сообщений: 1,184
    • Репутация: 1512
    • Webmoney BL: ?
    VARTAN, простите, что?
    • 2

    Спасибо сказали:

    ROMASA464(02.10.2013), Septik(01.10.2013),
Страница 1 из 3 123 Последняя

Похожие темы

Темы Раздел Ответов Последний пост
Бесплатный мануал: "Создаем, монетизируем и продаем сателлит"
Оптимизация, SEO 209 03.02.2016 05:52
Посоветуйте мануал по раскрутке паблика ВК
Социальные сети 7 15.08.2012 13:35
Графическое меню вконтакте ( нужна помощь )
Социальные сети 14 08.05.2012 22:53
Вид меню категорий Virtuemart нужно заменить на вид меню Joomla
Вопросы от новичков 2 21.11.2011 21:31
Графическое оформление групп + акция
Услуги по SEO 2 04.11.2011 15:04

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры