My New Steem Footer - HTML Reveal

in steemmarkdown •  6 years ago  (edited)

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.


banner.png

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: pixabay Wanna Join The Best Birthday Party On The Steem Blockchain? Click here for more details!
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: