[РУКОВОДСТВО] Создаем симпатичные интерактивные кнопки (ленты, что угодно) для своего блога в Голосе + немного markdown [ОФОРМЛЕНИЕ]

Меня уже неоднократно просили объяснить, как в Голосе сделать себе интерактивную подпись (в частности, @natasmr,, @ladyzarulem ). И вот я выбрал время и пишу об этом короткий пост.

Исследуем вопрос

Итак, для того, чтобы знать, сколько места отдаёт нам Голос под такие вот кнопки, надо померить максимальную ширину поста. Для этого достаточно сделать printscreen (снимок экрана) любой статьи с картинкой на полную ширину, вставить в ваш любимый графический редактор (у меня - свободный и удобный GIMP) и померить ширину в пикселях (веб-разработчики предпочли бы открыть инструменты разработчика в браузере по F12, пожалуй). Мой принтскрин (кликабелен):

Следуя из данных GIMP, максимальная ширина = 800 пикс. Давайте создадим новый документ, чуть пошире, и набросаем пример сетки расположения элементов. Я сгенерировал лист шириной 1000 пикселей и разметил его от 100 до 900, соответственно, а внутри поставил пробелы в 200 пикселей.

Уже из данной иллюстрации видно, что мы спокойно можем разместить 4 кнопки (ленточки, звёздочки - что угодно) с более-менее адекватными подписями в один ряд. Максимально не раздражающее число рядов - до 3 штук. Я решил остановиться на двух, т.к. мне пока что достаточно 8 кнопок-тематик.

Создаём свои кнопки

Главное понимать, что вам нужно либо сделать объекты менее 200 пикселей в ширину, если мы хотим разместить их с пробелами, либо ровно 200 пикселей, если мы хотим их "слепить" в единую картинку (но это будет сложнее с точки зрения интересного дизайна).

Что касается создания кнопок, здесь у нас три пути. Сложный, средний и простой :)

Первый - для дизайнеров или хардкорщиков, зная размеры (по ширине) в 200 пикселей, можно "накреативить" что угодно - как отдельные картинки кнопок, так и целую иллюстрацию с кнопками разного размера, "нарезанную" на равные кусочки по 200 пикселей в ширину и суммарной ширины в 800 пикселей или 4 "условные кнопки".

Второй - для тех, кто не очень умеет рисовать, но всё же хочет проявить побольше креатива. Вам я предложу скачать фотобанк векторных прозрачных иллюстраций (в сети таких тысячи, например вот или вот) - и использовать их как основу для ваших кнопок. Можно просто загуглить "vector buttons download" и изучить результаты. Но в этом способе по прежнему много возни с фоторедактором и он займет прилично времени.

Третий - для ленивых - и лично я избрал именно его :) Использовать онлайн-генераторы кнопок! Я выбрал вот этот - он прост, быстр, бесплатен и не оставляет никаких копирайтов. На скрине ниже я описал как им пользоваться (кликабельно)

Задаём размер по ширине - 170 пикселей если хотите сделать с пробелами, 200 если слитно, остальные настройки по вкусу. Нажимаем кнопку Download справа-вверху. Движок создаст для нас изображение, которое нужно сохранить правым кликом на изображении (обозовать как хочется, но лучше сразу так, чтобы не перепутать).

Теперь повторяем это действие столько раз, сколько вы хотите сделать кнопок. В моём случае создание 8 кнопок заняло менее 10 минут, при этом я консультировался со своим блогом (смотрел теги).

Добавляем кнопки в "подпись" поста

Для начала, загрузите все ваши кнопки на любой фотохостинг. Я использовал http://imgur.com - он позволяет загрузить сразу много изображений, и выдаёт код для markdown (reddit) - его можно использовать с небольшими изменениями. Подсказка: наведите мышь на загруженную в imgur картинку, появится небольшая стрелочка, нажмите на неё и выберите Get share links. Копируйте код из раздела Markdown (Reddit). У вас должно быть столько же прямых ссылок на картинки, сколько кнопок. Отображаться они ещё не будут - у Reddit немного другой синтаксис Markdown, надо кое-что поправить, да и сделать ваши кнопки "кликабельными".

Вот как нужно отформатировать ваши кнопки

[ ! [ Подсказка ] ( http://imagehost.com/image.png ) ] ( http://me.com/link )

Пробелы в итоговой конструкции не нужны, я их поставил, чтобы было легче понять, что здесь происходит. Мы берём обычную картинку с подписью, которая размещается вот так:

![Подсказка](http://imagehost.com/image.png)

И инкапсулируем (заключаем) эту картинку в "нашу подпись" к ссылке

[Наша подпись](http://link.com)

Отсюда и получаются двойные квадратные скобки. Если вы до сих пор не поняли, вот вам реальный действующий пример:

[![Кинорецензии](http://i.imgur.com/qyhXsZp.png)](https://golos.io/created/ru--reczenziya)

Вот как он выглядит:

Соответственно, Кинорецензии - это всплывающая подсказка кнопки (а заодно подсказка для вас), далее первая ссылка ведёт на картинку, а вторая - туда, куда вы хотите направить читателя. Обратите внимание, нельзя убирать никакие скобки, ни круглые, ни квадратные!

Итак, мы добрались к самому вкусному... Создавайте таких ссылок по количеству кнопок. Между рядами ставьте перенос строки (enter), а между кнопками, если делаете 170 пикселей, как я, с пробелами - по два пробела. В итоге получится то, что у меня - ниже.

Ах да, ваше меню можно "отчеркнуть" горизонтальной чертой, как у меня ниже, для этого поставьте с новой строки просто три звёздочки прямо перед меню, вот так:

***

Они создадут горизонтальную черту на всю ширину.

Надеюсь моё мини-руководство-урок окажется для вас полезным. Присылайте в комментариях образцы того, что у вас получилось. Может запустим конкурс на самую крутую подпись? =)

С вами был корявый верстальщик,
Den Ivanov aka SXIII

P.S. Пока разработчики и пользователи только обсуждают функцию добавления подписей, придётся "страдать" - добавлять подпись каждый раз вручную, копируя её из предыдущих постов, текстовой заготовки или блокчейна (на случай если посты устарели, а подпись - потерялась :).

---