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:
 
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:
[
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 :
[](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>[](http://steemitboard.com/board.html?user=arcange) [](http://steemitboard.com/board.html?user=arcange) [](http://steemitboard.com/board.html?user=arcange) [](http://steemitboard.com/board.html?user=arcange) [](http://steemitboard.com/board.html?user=arcange) [](http://steemitboard.com/board.html?user=arcange) [](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!!
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
I like these footers, it's small and classy. (unlike others which take half a page)
Thank you! And with this post, you learned how to define the size that best fit your wish.
great updates and guide. keep it up brother!
Thank you =)
Excellent work dear friend @arcange, I have already entered the page and it is very useful
Cool. Glad you like it!
awesome @arcange
Thanks a lot =)
That's so awesome! I think I'll be
stealingcopying this beautiful footer for my next posts :DGo! Go! Go! That why I made this post =)
thank you very much gonna use it
Thank you .... Well written an so easy to follow. Looks like the laptop is coming out tomorrow.
Tell me please. My banner of awards is not updated. What am I doing wrong?
Nice! It's very cool but now I have to make a choice between your badges and other provide by @elyaque :p
The advantage of yours is that they are dynamics BUT with a lot of html strings.
The advantage of elyaque badges is a picture I made with only one link BUT I have to change the picture regulary..
This is just my way of seeing things.. what do you think?
Anyway big thanks for your work ^^
Thanks for your comment. It looks like the perfect world doesn't exist ... yet =)
Once you have created you SteemitBoard footer, it's just a matter of copy/paste.
Like this :
I will make a mix of both :) Thanks!
I don't understand how to find @elyaque badges, I clicked on the profile but it links to a non-existing site. Or did I do something wrong?
Thanks for your colaborations, Are really helpful! I Follow you!
Excellent info, thanks @arcange.
Thanks for your feedback!
upvoted, resteemed and followed.Just like @good-karma said, keep it up. @arcange
Thanks =)
Awesome thanks ... Its all a learning curve and posts like this make it just that little bit easier . Thank You
Thanks =)
Great thanx!! @arcange
upvoted!
Thanks =)
Wow, looks amazing! Will be using this in my future posts! Thank you much for showing us all! Really great to have. UPVOTED!
Thank you for this great information :)
I got to see this after 4 months of this post. I wish there was more love for such quality posts. Bookmarked it in browser - it is shareworthy!
Thank you for this. I think it is an amazing idea. I just showed my 5 year old and he told me mummy we need to unlock all the other awards! I think that we all have a child inside and having a prizing system work. It is not about money or other material things but about achievement and fullfilment. love your work )
great info :)
I like this footer but it seems my images are not updating as I gain higher levels. Is the automatic update not working?
@arcange Hey mate, hope you are well. I cant seem to get my pictures to update. Am I doing something wrong? Please help!
<center>[](http://steemitboard.com/board.html?user=scrooger) [](http://steemitboard.com/board.html?user=scrooger) [](http://steemitboard.com/board.html?user=scrooger) [](http://steemitboard.com/board.html?user=scrooger) [](http://steemitboard.com/board.html?user=scrooger) [](http://steemitboard.com/board.html?user=scrooger) [](http://steemitboard.com/board.html?user=scrooger)</center>Hey @scrooger,
The problem comes from steemit using an image proxy cache.
As the URL of the image does not change, steemit.com use the image stored in its cache to speed up display.
I already opened an issue on github to have the dev implement a way to bypass the proxy but hadn't get any reaction.
Meantime, you can manually create new images with your footer when your awards get updated and use it in your post.
Understood, thanks a lot!
This part in your links: board.html?user=@scrooger should be board.html?user=scrooger instead. But yes, the database is slow with updating the pictures too.
Nope, the @ is out. still no change. Ah but it's ok. Not going to struggle with it now. Thanks for checking though. Will just manually make one and update one a week or so.
The problem comes from steemit using an image proxy cache.
As the URL of the image does not change, steemit.com use the image stored in its cache to speed up display.
I already opened an issue on github to have the dev implement a way to bypass the proxy but hadn't get any reaction.
Meantime, you can manually create new images with your footer when your awards get updated and use it in your post.
I found a way around it. add .png?update=true
Hey brother... I'm guessing you would have to add this on the end of every line yes?
So instead of:
(
)]
It would be:
(
)]
Well never mind; there's your answer!
I am truing this but it doesn't work
http://steemitboard.com/@elmetro/upvotes.pngHow do you know the name of the badge?
thank you
Already vote
That's really cool.
thanks for sharing with us .
i just test the html code and here are my resualts.
don't forget i'm new here ^_^
Hiya, I know this post is months old, but I just got some badges finally, and am wondering how to post the birthday one in the footer? Is there a list of the titles for the links of all the awards? Thanks!
Woo hoo! Thanks!!! How come it doesn't work when I use it for a blog post? I've been trying like mad to figure it out for the last half an hour haha
I don't know, maybe it has something to do with markdown language, which @steemitboard mentioned?
I always wondered how these things were done! Thanks for a pretty easy tutorial! Will continue to read and follow :)
Thanks @arcange
The awards are not updating for me. I did exactly as described here. When I check the URL's it show thats Steemit is automatically changing the URL to some internal Steemit URL. I did not upload them here or anywhere else. My fault or a change of Steemit works since you posted this?
Steemit has implemented image cache to speed up image retrieval and display.
Unfortunately, this cache mechanism prevent the images to be dynamically updated.
I opened a github issue to ask Steemit's devs to implement a cache bypass, but didn't get any response up to now :(
Meantime, you have to manually build your own footer
Thank you for the info, @arcange. I wonder if I should continue to use the correct links after all and not build another footer. The info might be incorrect now but probably corrects itself later if they ever change it. But then I cannot go back anymore and change my footers in older posts.
Thanks friend @arcange
Hey @steemitboard can you also use this technique for making other images smaller? Could you write a topic about that?
Like could you use this to avoid this:
https://steemit.com/faq.html#Is_there_a_way_I_can_make_my_images_smaller
Good very
great post! Thank you for the help, now i can use that in posts!
useful thanks
I tried it and it works. Thank you for this helpful posts, keep them coming. I need to follow you!!!
Hi @steemitboard
When I use the formula mentioned it does not update the amount of posts/comments/up-votes compared to what I can have done/received.
If I click on the image for example posts written it takes you to the board that is correct number but the image still shows the wrong numbers...
Please Help :)
@arcange What is the script for adding Personal page Happy Birthday badge into the footer? If I want to exchange it for the level.png ? Thanks Also How about placing a backdrop banner behind the badges? If you look close, you can see the numbers show a glare with white as backdrop?
(
@arcange NEVER MIND ON BIRTHDAY. HOW ABOUT A BACKDROP BANNER?
(
If you like this post, Please
UpVote and Follow me...
steemit board & animation
created by @arcange
(
Thanks for the help!
I'm going to use this in my blog posts
I love this and have saved it as part of my "signature" BUT I have noticed mine is not updating... is there something I can do? Or doing wrong?
@arcange...
This is because of image cache "feature" implemented by steemit.com.
@steemitboard will soon publish a post on how to bypass it ;)