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