My New Steem Footer - HTML Reveal
I believe that strong community and quality content are the two most important aspects of the Steem experience. But I also understand the importance of an aesthetically appealing Steem blog.
Over the last few days, I have been trying to add some personal touches to the visual components of my blog. Last night, I revamped my Steem Cover Image. Today I have been creating a footer for my Steem posts.
The following is a screenshot (which I only created so that my post would have a thumbnail image). If you want to see the real deal, you can find it at the end of this post.
Looks Can Be Deceiving
My footer is a basic HTML table that consists of 2 columns and 3 rows.
Normally I would use Markdown to create a table (if you don't know how to create a table in Markdown check out my FREE online course called Steem Markdown), but since I wanted to format images and text within the cells of the table I choose to use HTML.
Some of the elements I have included in my footer are:
- table row =
<tr> - standard cell =
<td> - bold text =
<b> - superscript =
<sup> - text links =
<a href="url">text</a>
If you are interested in the exact HTML that I used, keep reading.
<table>
<tr>
<td><a href="https://steemit.com/@sumatranate"> <img src="https://cdn.steemitimages.com/DQmdyPb3u987U3EpzQf2yt5oaNarWLpPXEeZv4LRou2sxU7/Image-1%20copy.png"></a><sup>image source: bitmoji app</sup></td>
<td><b>Like This Post?</b> Upvote, Comment, Resteem<br> <b>Want More Like It? <a href="https://steemit.com/@sumatranate">Follow My Steem Blog!</a></td>
</tr>
<tr>
<td><a href="https://steemskills.teachable.com/p/steemmarkdown/"><img src="https://cdn.steemitimages.com/DQmayPd42Sy8gwVdq2WKesHWWkbJpho3hqn2oQw2jm8x7D9/FREE%20Online%20Course.png"></a></td>
<td> Learn how to <a href="https://steemskills.teachable.com/p/steemmarkdown/">format your Steem posts</a> so that you great content looks great!</td>
</tr>
<tr>
<td><a href="https://steemit.com/birthday/@birthdayboost/wanna-join-the-best-birthday-party-on-the-steem-blockchain"><img src="https://cdn.steemitimages.com/DQmVuJuW5ctWL42GEJVknNF9mQmm2M4HhdvQzhRXu9HUeMD/BirthdayBoost%20Footer.png"></a><sup>image source: <a href="https://pixabay.com/en/birthday-candlelights-candles-1835449/">pixabay</a></sup></td>
<td><b>Wanna Join The Best Birthday Party On The Steem Blockchain?</b> <a href="https://steemit.com/birthday/@birthdayboost/wanna-join-the-best-birthday-party-on-the-steem-blockchain">Click here</a> for more details!</td>
</tr>
</table>
With a little time and effort (and some help from a trusty search engine), you can create great elements that compliment your Steem content and Steem posts.
Let me know if you have any questions.
@SumatraNate
More About My Steem Projects
 image source: bitmoji app |
Like This Post? Upvote, Comment, Resteem Want More Like It? Follow My Steem Blog!  Learn how to format your Steem posts so that your great content looks great! |
image source: pixabayWanna Join The Best Birthday Party On The Steem Blockchain? Click here for more details! |
|
I like it! I noticed your little circle thingy changed the other day. I can't remember what it's called......hm. Anyway, looks nice and snazzy to me! Nice job!
Thanks @apanamamama! That circle thingy is called a Profile Picture. I had to look it up!
Thanks for stopping by and leaving a kind comment.
Ah yes, a profile picture!! Ha!
Thanks for sharing this the footers look so cool, I must try sometime settign up a better footer for my posts
@tattoodjay, what do you think about this?
Unless stated otherwise all photos used in my posts are taken and owned by myself, if you wish to use any of my images please contact me.
SteemUSA is a growing community that supports people who are from or living in the United States. Check out the latest post or join us on Discord.
If your interested in TheAlliance, check out the latest post.
@sumatranate you just tidied that up quickly looks better I think
Gotta bookmark this, I've always wanted to add a footer, but all the other examples I've found didn't seem to come out very nice. This one definitely looks the best.
That is one of the nicest compliments I have heard today - bookmark worthy.
FYI, it does not appear that Steemit.com is able to read html syntax about column width. So I had to adjust my wording to make sure that my pictures were not too small. I tried width = # of pixels and width = percentage but neither of them worked.
This looks great! and I'm going to suggest your course to one of our recent graduates!! :) I think he will really love it! :)
Thanks for stopping by. Send people to the course. I hope it helps many.
Great idea to use table, I didn’t think about that, I just centered my banners. Thank you #sumatranate 😊
Glad to share. I am not sure that a table is required but it worked well for my situation. I guess that someone could use a table with a single row. That way the background color would be the same.
Guess it depends on your visual preferences and needs. Thanks for stopping by!
Great post!
I use markdown to create tables
It goes like this
Text (|) Text
(---- | ----)
Text (|) Text
Remove the brackets
You can use block code (three ticket marks (```) before and after) so that you don't have to include the brackets.
I love it! Thank you! Ive always wondered how to do that.
Thanks for sharing this! I have minimal knowledge of html, but I think I'll give it a go.
Go for it. It is better to try and make some mistakes then not try at all. My HTML experience is limited to what I have learned from the internet. You can do it.
excellent steem project! @sumatranate
Thanks @ahlawat.