Уважаемые пользователи Голос!
Сайт доступен в режиме «чтение» до сентября 2020 года. Операции с токенами Golos, Cyber можно проводить, используя альтернативные клиенты или через эксплорер Cyberway. Подробности здесь: https://golos.io/@goloscore/operacii-s-tokenami-golos-cyber-1594822432061
С уважением, команда “Голос”
GOLOS
RU
EN
UA
arcange
7 лет назад

Доска Почета - Как создать классный футер для поста с Вашими наградами

Несколько дней назад я представил вам Доску Почета. Если Вы пропустили тот пост, рекомендую потратить пару минут на чтение - он содержит много полезной информации.

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

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


Голосуйте за меня в качестве делегата

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


Если Вам понравился этот пост,
не забудьте проголосовать, подписаться на меня или поделиться

6
905.581 GOLOS
Комментарии (24)
Сортировать по:
Сначала старые