Основы Wiki-разметки vk - мануал для заработка онлайн

Основы Wiki-разметки vk. Мануал для заработка онлайн.

Wiki Art — это красивое оформление групп В Контакте. Пример такого оформления можно увидеть в моей группе В Контакте по адресу vk.com/teen_blog. Наверное, вам покажется все больно заумным и сложным, но это не беда! Я тоже сначала испугался, но потом все понял!

Для того, чтобы вам так же научиться оформлять группы, необходимо знать/иметь следующие вещи:

• Как делать группы В Контакте
• Основы Wiki-разметки
• (Хотя бы) основы Photoshop
• Терпение
• Желание научиться

Если вы все это имеете, то можете читать дальше, а если нет, то вот вам маленькие предпосылки, где этим всем премудростям обучиться:

1. Как делать группы В Контакте
2. Основы Wiki-разметки в этом посте разбираться не будет. Я советую вам посетить одно интересное сообщество, в котором есть подробнейшая информация про это ремесло — vk.com/wiki
3. Основы Photoshop — искать в сети. Я думаю, что лучше будет, либо просмотреть какой-нибудь видеокурс по нему или прочитать книгу (можно найти в Яндексе), так же можно заказать меню у фрилансеров на free-lance.ru
4. Терпение — no comments
5. Желание научиться — терпение

Вот примерно как-то так... Первая остановка — настойка группы.

Для того, чтобы оформить группу в стиле Wiki-Art вам необходимо включить в группе сервис «Новости». Делается это в Управлении сообществом. Теперь перейдите на главную страницу вашей группы и под описанием группы появился такой раздел "Новости", нажимая на который разворачивается, пока, пустое пространство. Редактировать его можно, если нажать на этом же блоке, но чуть-чуть правее кнопку Редактировать.

После того, как вы все включили, можно перейти уже к теории Wiki-разметки В Контакте.

Wiki-Art

Создание меню для группы в стиле Wiki-Art проходит примерно по такому плану:

1. Рисование меню в Photoshop.
   
2. Разделение изображения на части.
   
3. Загрузка отдельных частей меню(картинок-нарезок) В Контакт
   
4. Написание кода.

Рисование меню в Photoshop

Как я уже ранее сказал рассказывать, как нарисовать меню и аватарку я в этом посте не буду. Вот как выглядит мое меню и аватарка в Photoshop:

Кстати... Максимальная ширина меню (именно меню, притом, что в одной строчке находятся 2 картинки) - 370px ,на счет длины незаморачивайтесь, делайте хоть какую, а максимальный размер аватара - 200x700px.

Разделение изображения на части

Как вы уже, наверное, заметили, меню в моем случае используется для навигации по группе: если нажмешь сюда, перейдешь вот сюда и т.п. Следовательно необходимо эту картинку как-то разделить на части. Делается это так же в фотошопе с помощью инструмента Раскройка(Slice). Разрезать меню надо примерно так:

Чтобы визуально вам стало все ясно, где какие части, вот:

Теперь необходимо это все сохранить. Идем в Файл - Сохранить для Web и устройств.

Теперь зайди в ту папку, в которой вы все сохранили и посмотрите, что у вас получилось. Все okay?

Загрузка отдельных частей меню(картинок-нарезок) В Контакт

Теперь необходимо загрузить фотографии в группу. Для этого я вам совутую создать новый альбом в группе и назвать его, например, #Системный. Теперь в этот альбом загрузите нарезки меню, желательно через стандартный загрузчик фотографий, да бы качество не ухудшилось. Сделайте так, чтобы никто кроме администрации группы не мог редактировать альбом.

Пишем код

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

Квадратными скобками мы показываем обработчику, что это идет код и его надо обработать (не вникайте), photo-номер_фото - это ссылка на фото. Где ее взять? Сначала надо зайти в группу и в альбом, куда вы загрузили изображения. Нажмите на любую картинку, чтобы её просмотреть. Теперь посмотрите на адрес страницы:

photo-33693457_276874190 - и есть адрес изображения.

После адреса изображения идет прямой слеш( | ), потом указываются параметры изображения: размер, отображение рамок, отображение отступов, отображения изображения, как ссылки. Размер изображения  можно узнать, если кликнуть на него Правой кнопкой мыши =>>Свойства =>> Подробно. Размер указывается таким вот образом: ШИРИНАxДЛИНАpx(!). Например, 361x200px .

После того, как вы указали размеры изображения, необходимо поставить точку с запятой ( ; ), да и вообще после каждого параметра необходимо ставить точку с запятой. После последнего параметра, ТОЧКА С ЗАПЯТОЙ НЕ СТАВИТСЯ.

Теперь необходимо убрать отображение рамки и отступа. Делается это с помощью параметров noborder и nopadding соответственно.

Параметр nolink указывается только тогда, когда вам не надо, чтобы картинка была ссылкой. Если не поставить этот параметр, то нажимая на картинку, вас будет перебрасывать на большую копию изображения, если же картинка должна быть ссылкой на какой-нибудь материал/опрос/обсуждения и т.п., то после всех параметров надо опять указывать прямой слеш( | ) и прописывать ссылку на материал. Вот пример, что может у вас получится:

[[photo-33693457_276875214|368x57px;noborder;nopadding;nolink|http://блог-обычного-школьника.рф]]

Кстати, все параметры указываются без пробелов!

Если прописать весь код в одну строку (без переноса на новую), то получится, что все картинки будут расположены друг под другом, что не очень красиво и совсем не то, что вы хотели, для того, чтобы сделать перенос в нужном месте надо просто нажать Enter.

После того, как вы собрали картинку, у вас должно получиться что-то на подобии этого:

Ничего не понятно, но так хочется научиться Wiki-Art'у? Вот вам видеокурс по этой теме. Автор курса Bred. Курс состоит из 3 частей. В каждой части есть своя изюминка. Курс просто замечательный! Просмотрев его вы станете мастером своего дело и сможете творить во благо всего человечества! ;-)

P.S сайт - Beatlive.ru

Источник:

Дополнительные материалы можно скачать здесь