[SteemitBoard] - How to create an awesome footer with your awards

in steemitboard •  2 years ago

Yesterday, I introduced the SteemitBoard.com, the First Steemit Game Experience. If you missed the post, take a few minutes to read it, there are lot of useful information in it.

Some people asked me how to create a footer to display their awards at the bottom of their posts. I will provide here a more detailed example on how to create a nice looking footer.

1. Embed your awards

First, as explained in the introduction post, each user has his own badges.

Let say I want to display my “posts” award

I will use the following image URL:
http://steemitboard.com/@arcange/posts.png

It will show this

To display YOUR award, just replace my username with yours.

Example: http://steemitboard.com/@dantheman/posts.png will show

If I want to display my “voted” award next to the first one, I just have to copy the URL side by side and replace the badge name. But this time, I will have to embed the URL into a full markdown link tags:

![](http://steemitboard.com/@arcange/posts.png) ![](http://steemitboard.com/@arcange/votes.png)

This will displays my 2 awards in a row

2. Redirect to your Board of Honor

Now, I want my post readers to be redirected to my personal Board of Honor on SteemitBoard.com if they click on my footer.
To do this, I will embed each image into its own markdown link. This link looks like this:
[ your-award-link ](http://steemitboard.com/board.html?user=your-name)

Example:

[![](http://steemitboard.com/@arcange/level.png](http://steemitboard.com/board.html?user=arcange)

I now have a clickable image which will redirect you to my Board of Honor (move your mouse over the award and try to click on it)

3. Resize your awards

The above images are way too big to fit all in a single row. As explained in the introduction post, I will resize it using the https://steemitimages.com/[witdh]x[height]/prefix :

[![](https://steemitimages.com/100x80/http://steemitboard.com/@arcange/level.png)](http://steemitboard.com/board.html?user=arcange)

which will show a smaller, clickable image:

4. Final result

OK, let's display all my favorite awards.

  • each award will be clickable and redirect to my Board of Honor
  • I will use different sizes to create a "crescendo/decrescendo" effect
  • I want them centered, so I will surround everything with the <center> and </center> html tags

<center>[![](https://steemitimages.com/50x60/http://steemitboard.com/@arcange/commented.png)](http://steemitboard.com/board.html?user=arcange) [![](https://steemitimages.com/60x70/http://steemitboard.com/@arcange/votes.png)](http://steemitboard.com/board.html?user=arcange) [![](https://steemitimages.com/70x80/http://steemitboard.com/@arcange/posts.png)](http://steemitboard.com/board.html?user=arcange) [![](https://steemitimages.com/100x80/http://steemitboard.com/@arcange/level.png)](http://steemitboard.com/board.html?user=arcange) [![](https://steemitimages.com/70x80/http://steemitboard.com/@arcange/comments.png)](http://steemitboard.com/board.html?user=arcange) [![](https://steemitimages.com/60x70/http://steemitboard.com/@arcange/voted.png)](http://steemitboard.com/board.html?user=arcange) [![](https://steemitimages.com/50x60/http://steemitboard.com/@arcange/payout.png)](http://steemitboard.com/board.html?user=arcange)</center>

Tada ... here it is ...

Isn't it good looking?

You can use it everywhere markdown is supported, and each time you accomplish new achievement on Steemit and upgrade your award level, your banner will be automatically updated.

5. Support this project

All rewards from this post (and from the introduction post - you can still upvote it) will be used to maintain the SteemitBoard infrastructure (storage server, web server, ...).

If you find SteemitBoard valuable, thanks for supporting it.

Impress your friends and ... have fun!!

Thanks for reading!


Support me and my work as a witness by voting for me here!

You like this post, do not forget to upvote or follow me or resteem

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order: