[Статья] Меню для группы вконтакте!

[Losyurban]

В этой теме я расскажу как сделать графическое меню в группе социальной сети ВКонтакте. Это помогает улучшить вид страницы группы.

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

2. Теперь, используя инструмент «Раскройка»,
[Ссылки могут видеть только зарегистрированные пользователи. ]
я режу картинку на части – эти части станут кнопками в будущем. Я разрезал на 4 полоски - получилось следующее:

[Ссылки могут видеть только зарегистрированные пользователи. ]

3. Выбираю в меню «Файл» строку «Сохранить для Web и устройств» (можно использовать комбинацию клавиш Al+Ctrl+Shift+S).

[Ссылки могут видеть только зарегистрированные пользователи. ]

4. В настройках сохранения выбираю тип файла JPEG, ставлю максимальное качество, выбираю галочками «Постепенно» (загрузка картинок на страницу) и «ICC-профиль» (это профиль цветовой компенсации).
[Ссылки могут видеть только зарегистрированные пользователи. ]

5. Нажимаю кнопку «Сохранить». Photoshop сохранит всё это как html-файл с картинками (картинки находятся в папке images). Теперь жму «Готово», Photoshop можно закрыть (он больше не понадобится).

Далее я загружаю картинки в любой альбом (наверное лучше в фотоальбом группы) с помощью стандартного загрузчика фотографий.

[Ссылки могут видеть только зарегистрированные пользователи. ]

Далее я захожу в редактирование меню «Важная информация» (стандартно оно называется «Новости», на сайте есть хаутошка о том, как переименовать меню «Новости»).
[Ссылки могут видеть только зарегистрированные пользователи. ]

7. И прописываю следующий код:

[[photo5634052_195301019|370px;nopadding;|page-11053617_29800171]]

photo5634052_195301019 – это ссылка на фотографию. Ее номер в адресной строке браузера:
[Ссылки могут видеть только зарегистрированные пользователи. ]

370px — это ширина фотографии. Можно делать меньше, но не больше – все равно они автоматически уменьшаться.

nopadding — это тег, убирающий пробелы между картинками.

page-11053617_29800171 — это ссылка, на которую будут переходить, щелкая на данной картинке. Узнать ее можно также как и ссылку на фотографию, просто открыв нужную страницу и скопировав ее из адресной строки браузера.

В итоге получилось вот такое меню:
[Ссылки могут видеть только зарегистрированные пользователи. ]

-------------------------------------------------------------------------

Помог? - Ставь спасибку или плюсик)