
Несколько дней назад я представил вам Доску Почета. Если Вы пропустили тот пост, рекомендую потратить пару минут на чтение - он содержит много полезной информации.
Некоторые люди спрашивают меня, как создать футер, который бы отображал их награды под постами. Я решил опубликовать детальное описание того, как же создать симпатичный футер.
1. Вставьте свои награды
Во-первых, как я уже говорил во вступительном посте, у каждого пользователя есть свои личные награды.
Предположим, я хочу показать мою награду за написанные посты.
Я воспользуюсь следующим URL картинки:
http://golosboard.com/@arcange/posts.png
Она будет отображаться вот так
Чтобы на ней отображалась ВАША награда, просто замените моё имя пользователя на своё.
Пример: http://golosboard.com/@serejandmyself/posts.png
покажет нам
Если же я хочу разместить мою награду за голосование рядом с первой, я просто копирую URL, вставляю его рядом и заменяю имя одной из наград. Но на этот раз я должен вставить URL в маркдаун теги для ссылок:
 
Тогда мои две награды будут отображаться в одну линию
2. Перенаправьте людей на свою Доску Почета
Теперь же я хочу, чтобы читатели моего поста перенаправлялись на мою собственную Доску Почета на golosboard.com, когда они кликают на мой футер.
Чтобы это осуществить, я вставлю каждую картинку в собственную маркдаун ссылку. Эта ссылка выглядит так:
[ your-award-link ](http://golosboard.com/board.html?user=your-name)
Пример:
[
Теперь у меня есть кликабельная картинка, которая перенаправит Вас на мою Доску Почета (наведите курсор на награду и попробуйте кликнуть на нее)
3. Измените размер Ваших наград
Картинки, приведенные выше, слишком велики, чтобы отображаться в одну линию. Как я уже показывал во вступительном посте, я изменю их размер, используя префикс https://imgp.golos.io/[witdh]x[height]/
:
[](http://golosboard.com/board.html?user=arcange)
Что даст нам уменьшенную кликабельную картинку:
4. Финальный результат
Окей, давайте-ка покажем все мои любимые награды.
- Каждая награда будет кликабельна и перенаправит пользователей на мою Доску Почета
- Я воспользуюсь разными размерами, чтобы создать эффект “нарастания/убывания”
- Я хочу, чтобы они выравнивались по центру, так что я добавлю с двух сторон html теги
<center>
и</center>
<center>[](http://golosboard.com/board.html?user=arcange) [](http://golosboard.com/board.html?user=arcange) [](http://golosboard.com/board.html?user=arcange) [](http://golosboard.com/board.html?user=arcange) [](http://golosboard.com/board.html?user=arcange) [](http://golosboard.com/board.html?user=arcange) [](http://golosboard.com/board.html?user=arcange)</center>
Та-дааа… вот и они…







Отлично смотрится, правда?
Вы можете использовать их везде, где поддерживается маркдаун, и каждый раз, когда Вы будете совершать новые достижения на Голосе и повышать уровень своих наград, Ваш значок награды будет автоматически обновляться.
5. Поддержите этот проект
Вознаграждение за этот пост будет целиком использовано на поддержание инфраструктуры Доски Почта (сервера хранения данных, веб-сервера и т.п.).
Если Вы считаете Доску Почета заслуживающей внимания, спасибо за поддержку!
Впечатли своих друзей и… развлекайся!
Помощь с переводом @rusteemitblog







Голосуйте за меня в качестве делегата
Вы также можете проголосовать прямо с платформы Голос здесь. Для этого нужно проделать следующее. Каждый голос важен. Спасибо !

Если Вам понравился этот пост,
не забудьте проголосовать, подписаться на меня или поделиться
Здорово! Прочла и первый пост, который пропустила. Какой вы умница...а я вот даже с такими подробностями ничегошеньки не сделаю...блондинка :-)) Help!!!
только-только пост о своей блондинистости в техвопросах закончила)) посижу рядышком с Вами)
@italia-elena @marfa, давайте я вам помогу! 😉
Напишите мне в Telegram или здесь в чате.
Спасибо большое !!!
Присоединилась в чате, а как вас найти? мой ник italia-elena
Опозорюсь, с вашего позволения =)
Спасибо большое!
Возьму на вооружение. )
super, thank you. I will use it for my topics
Такая заманчивая доска почёта! Только я всё никак не могу посмотреть свои достижения. У меня почему-то высвечивается такое:

Подскажите, почему у меня высвечивается такая ерунда?
Вот что я получаю :

Попробуйте очистить кэш вашего браузера
Или обновить страницу (Ctrl + F5)
так все вроде получилось, вот только третья медаль не правильно отображается, показывает 100 а на самом деле 250...
Это потому, что сайт кэшированные изображения :/
Я общаюсь с разработчиками, так что они могут помочь решить эту проблему.
захожу по ссылке на Доску, забиваю свой ник, открывается какая то хитрая некликабельная страница..
К сожалению, я не могу понять. Пожалуйста, переформулируйте.
404
@arcange - крутой и красивый сервис, молодцы ребята!!!))
Спасибо !!
Молодец! И дочку в ГОЛОС привлёк!))
Выглядит отлично! Поздравляем!
ВООУ пасибо большое)
Спасибо! =)
для пробы, хвастовства и баловства .... )
Спасибо! ... здорово.
Выглядит отлично! Поздравляем!