Привет!

Просматривая свой профиль на PromoDJ в поисках «чтоб такое еще придумать с оформлением», я обратил внимание на область страницы между «шапкой» и «обо мне», там можно ввести только одну строку: как правило, это ссылка или просто короткое сообщение:

У меня, после долгих проб, ошибок и постоянной внутренней самокритики 8-), получилось разместить в этой строке менюшку с ссылками на свои профили на различных сервисах:

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

Что тебе потребуется:

1)     Создать отдельную папку на диске и обозвать ее на свой вкус, в нее мы будем складывать нужные нам файлики.

2)     Текстовый редактор (я юзаю notepad++ для удобства редактирования кода, но можно и в обычном блокноте).

3)     Графический редактор (adobe photoshop - в идеале или paint.net – бесплатен и функционален или им подобный)

4)     Твой любимый браузер (я юзаю mozilla firefox, но это на твое усмотрение)

5)     30-40 мин свободного времени

Итак, приступим. Для начала, после того, как в моей голове сформировался образ того, что меню «будет примерно вроде как бы наверное таким», я поискал картинки логотипов тех сервисов, где у меня есть аккаунты или группы и т.д и которые буду размещаться в меню. Сделать это проще простого – набираешь в google «<имя сервиса> logo», переходишь на вкладку «Картинки» и скроллишь в поисках тебе подходящего. Желательно, чтобы они смотрелись на белом фоне.

Нашел понравившийся? Открывай его в полном размере и сохраняй в отдельно подготовленную папку. Как-то так:

Сделать это нужно для всех тех сервисов или ресурсов, что ты будешь размещать в меню. Ага, ты нашел, отобрал, сохранил в папку все нужные нам логотипы-картинки? Двигаем дальше.

Теперь необходимо их подогнать примерно под один размер. Как это делал я – в фотошопе открыл один логотип, прикинул примерный размер меню и сколько по ширине и высоте оно будет, уменьшил логотип до 140х30 (у тебя, разумеется, размеры могут отличаться, все зависит от задумки). Затем, добавил контраста и яркости, т.к. при уменьшении картинки часть цветов и четкости потерялась, а нам нужно, чтобы все картинки были четкими и смотрибельными. Опять же – ты можешь обрабатывать их как хочешь, фильтры там, эффекты и т.д., это на твой вкус. И сохранил в формате png (можно и jpeg и gif, как хош). Покажу на примере фотошопа, в другом редакторе действуй по аналогии:

Теперь не спеши закрывать эту картинку в твоем редакторе, нужно проделать эту операцию со всеми изображениями, для удобства можно их уменьшать, копировать только нужную нам область логотипа (без лишних фонов краев и прочего)  и переносить в предыдущий проект 140x30 пикс., чтобы там уже их подгонять по размерам и как он будет смотрется. Т.е. мы просто выключаем слой в предыдущей картинке с логотипом, вставляем другой логотип и свободно его трансформируем, периодически включая слой предыдущего логотипа, чтобы по ширине и высоте они были примерно одинаковыми. Затем отключаем все слои, кроме нового логотипа, и сохраняем. Так проделываем для всех скачанных нами картинок (если способ, который я показал слишком замороченный для тебя или у тебя не фотошоп и ты не знаешь как сделать подобное в другом редакторе – то не парься, просто пооткрывай все логотипы-оригиналы и уменьши каждый до нужных тебе размеров и, конечно, сохрани в отдельные файлы). =)

Итак, все нужные картинки менюшки ты сделал. Что теперь? Идешь в свой профиль на PromoDJ и делаешь альбом с открытым доступом, после чего закачиваешь в него все нужные картинки, снимаешь галку «Приватный альбом», щелкаешь «Волшебные настройки» и тоже снимаешь все галки, после чего заливаешь картинки и сохраняешь альбом.

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

Скриншот, как ты видишь, из Mozilla Firefox, в других браузерах действуй по аналогии. После чего, в новой вкладке открой сервис коротких ссылок гугла https://goo.gl/

update: сервис goo.gl закрыли,но есть множество альтернатив

Вставляешь туда ссылку на изображение, скопированную с картинки из альбома, жмакаешь «я не робот», набираешь капчу, затем «shorten url» и получаешь короткую ссылку (справа). Копируй ее и сохрани в новом текстовом файлике. Так, последовательно, копируй и укорачивай ссылки на все изображения в альбоме и сохраняй их в текстовом файлике.

Укорачиваем мы их для того, что в строке, где мы в итоге будем водить наш код меню, есть ограничение на длину обрабатываемых  bb-кодов (если не в курсе, что такое bb-код, читай тут), если будет слишком длинно – код не сработает корректно.

Ну что ж, почти готово. Осталось только подготовить код строки меню. Открывай тот же текстовый  файлик (если закрыл), в котором находятся укороченные ссылки на изображения. Начинаться наша строка будет с bb-кода [list], он позволяет сделать маркированный список. Структура такова:

[-list] [-*]первая строка [-*] вторая строка…[-*]последняя строка [-/list]

"-" нужно удалить из строки, он вставлен для того, чтобы код полностью отобразился!

Можешь проверить, вставь этот код в указанную область

[-list] [-*]1 [-*]2 [-*]3 [-/list]

"-" нужно удалить из строки, он вставлен для того, чтобы код полностью отобразился!

Должно получится что-то тип этого:

Только вместо цифр мы будем вставлять ссылки на те ресурсы, что нужны в меню и ссылки на изображения в альбоме. Структура такая:

[-list] [-*][-url=1-я ссылка на ресурс][-img]укороченная ссылка на 1-е изображение[-/img][-/url][-url=2-я ссылка на ресурс][-img] укороченная ссылка на 2-е изображение[-/img][-/url] [-/list]

"-" нужно удалить из строки, он вставлен для того, чтобы код полностью отобразился!

[-*] это элемент кода, который создает новую строку списка, у меня 2 картинки в строчку в меню, на следующей строке по аналогии (начинается с [-*]), итоговый код примерно такой (ссылки на изображения изменены!):

[-list] [-*][-url=https://www.beatport.com/artist/dj-aristov/60595][-img]goo.gl/BCpRB2[-/img][-/url][-url=https://www.facebook.com/djaristov][-img]goo.gl/mXV2b9[-/img][-/url] [-*][-url=http://vk.cc/1u0OPn][-img]goo.gl/37VCPl[-/img][-/url][-url=https://itunes.apple.com/ru/artist/dj-aristov/id323325380][-img]goo.gl/QSbKOZ[-/img][-/url] [-/list]

"-" нужно удалить из строки, он вставлен для того, чтобы код полностью отобразился!

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

Разумеется, это может быть не только кликабельное меню с ссылками на твои контакты и профили, все ограничено только твоей фантазией и работающими bb-кодами в строчке, так что пробуй, проверяй и у тебя все получится! Удачи!

PS: При копировании и размещении моей статьи или ее частей на других ресурсах, ссылка на оригинал обязательна!