You shall not pass. Ага. - Репутация: 1513
- Webmoney BL:
? | ![Золотой пост](http://webmasters.ru/forum/img/gold_post.gif) Гендальф Серый. Создание графического меню для публичной страницы Вконтакте. Работает исключительно на магии. Специально для 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. Подготовка графики Ну что, страница у нас есть, осталось сделать графический макет. Лично я рисую цельную картинку, а потом разрезаю её на части. Пример: ![](http://s4.uploads.ru/t/KcyAQ.png) Но иногда нужно отрисовать множество отдельный элементов. В таком случае, рисовать придётся каждый отдельно. Пример: ![](http://s4.uploads.ru/t/zGh2H.png) Лично я пользуюсь Corel Draw, ибо очень удобно. (люблю вектор, да и лицензия у меня). Однако, сами можете рисовать хоть в пэинте. Ещё хочу предупредить, больше 10 элементов у вас прикрепить не выйдет, так что рассчитывайте количество изображений. Я, конечно, знаю, как обойти это ограничение, но ведь я весь такой загадочный... 3. Вёрстка Так, страница у нас создана, графика у нас есть. Теперь начинается магия. Изначально вики-страницы не предназначены для паблика, но нас это не удержит! Мы будем делать всё и сразу. Грузим ваши изображения. Имеем много весёлых картинок, которые расположены крайне весело. Аррррр. ![](http://s5.uploads.ru/t/VajwS.png) Теперь начинаются математические рассчёты. Максимальная ширина: 600px. Высота нам не важна. Давайте прокликаем каждую картинку и установим ширину таким образом, чтобы общая длина строки не превышала максимальный размер: ![](http://s5.uploads.ru/t/VhxGQ.png) Прим. Поля каждой картинки - 5px, что не стоит учитывать, если мы хотим сделать на выходе цельное изображение. Чуть позже я расскажу, как их убрать. После всего этого действа на выходе мы получаем что-то вроде этого: ![](http://s4.uploads.ru/t/9SpNw.png) Но меню без ссылок нам не нужно. Вот тут и начинается магия. Каким образом ВК проставляет ссылки и атрибуты известно, верно, только разрабам, однако где наша не пропадала? Опять прокликиваем каждую картинку и прописываем название и ссылку на сайт. Как-то так (осторожно, скрытая реклама): ![](http://s5.uploads.ru/t/NW8s3.png) Уже работает, но выглядит ужасно. Не стоит пугаться этого ужаса. Дуем из визуального редактора в редактор кода и видим весёлый-развесёлый код, немного похожий на вики-разметку из википедии. Нам нужно убрать поля у картинок. Для этого мы к каждому изображению добавлем атрибуты 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]] Скопируйте себе этот код и отложите в надёжное место. Я, как истинный идиот скидываю его прямо в скайп заказчику (да простит меня Денис :), но на самом деле это удобно - можно восстановить всё прямо из истории переписки). Очень важно: ни в коем случае не выходите из текстового редактора, не сохранив код. Если вы перейдёте из текстового редактора в визуальный, а потом назад - у вас слетят все атрибуты. На выходе (если всё верно подрассчитали) имеем уже более менее нормальное изображение: ![](http://s4.uploads.ru/t/KcyAQ.png) 4. Размещение в закреплённом посте Так, страница с меню у вас готова - осталось сделать так, чтобы она была всем видна. Рисуем красивую зазывающую картинку. Ну или не зазывающую. Я делаю нечто вроде такого: ![](http://s4.uploads.ru/t/IHn5D.png) или такого: ![](http://s4.uploads.ru/t/LEqCB.jpg) Затем мы делаем новый пост в паблике, в который вставляем ссылку на нашу страницу с меню и прикрепляем к нему нашу крутую картинку: ![](http://s4.uploads.ru/t/l2QpJ.png) Не пугайтесь, после того, как нажмёте на "опубликовать" адрес ссылки исчезнет и останется только название страницы: ![](http://s5.uploads.ru/t/09TPZ.png) Ну а дальше всё проще пареной репы: жмём на время создания поста и затем на "закрупить". Вуаля! Стильное меню для вашей публичной страницы готово! Вы восхитительны! ![](http://s5.uploads.ru/t/WAOJf.png) Макет для паблика, на котором я показывал примеры оформления меню для публичной страницы Вконтакте делал замечательный дизайнер Илья Гармаш. Но чаще я рисую сам. Несравненные консультации по продвижению Вконтакте оказывает мой хороший друг и коллега Арсений Скурт Ну и несколько примеров, сделанных мною лично с нуля:
Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 1 сообщение(ий)): У вас нет прав чтобы видеть скрытый текст, содержащийся здесь. | Так же хочу передать пламенный привет всем тем, кто продаёт мои мануалы или копирует к себе на сайты/форумы без указания ссылки на источник. Вы все сгорите в аду. С вами был Гендальф Серый, удачи в продвижении!
|
Спасибо сказали: | 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), | |