How To Create A Footer Template With Image Grid

in footer •  3 months ago

footer-table-cover.jpg

One of the features to make your blog look professional and to find more readers is to create a footer for your posts. In this tutorial I will show you how to use markdown to create a nice looking table for your content and safe the footer as a draft for future posts.

Flauwy-devider.png

Creating The Footer

If you have looked at a few Steemit posts you have already encountered many different variations of refining ones post with a footer. My favorite approach is to point to your best content with a grid of images and links. Making the images clickable will approve the conversion rate. And by making all images equally sized you can create a symmetric looking presentation.

After you created your images for the footer we need to write the Markdown code. If you have never used Markdown before just follow my example here. To create a 2-column table we use the following code:

markdown.png

Code Breakdown

Links

The Markdown Image-Link is the code you get when you upload an image to the editor of Steemit, Busy, eSteem and so on. It always starts with an exclamation mark followed by two straight brackets [ ] which are followed by the url of the image wrapped in two round brackets ( ). When you wrap that code one more time in two straight brackets [ ] and follow them with the url of a link wrapped in two round brackets ( ) then you create an image-link. It is basically an image code nested in a link code.

Table

The table is created by splitting content A and B with a vertical line: A | B
After this line must follow the column amount in form of -|-| symbols. If you want more columns you can add one further -| for each column. After this second row must follow at least one final third row which is also separated like the first row in form of A | B. You can add as many further rows as you like. The first row that does not include a vertical separator line will end the table.

My Footer Example

code.png

Green are image-links, red are URLs or website-links and blue are the link texts. Yellow is the table code.

You can see how this looks like at the bottom of this post.

Saving Your Footer As A Draft

If you use Busy.org or the eSteem Surfer app you have access to the amazing draft function. Create your new footer directly in their editor to see how the result will look like in the preview. When you are ready with the editing give your post a fitting title and save is as a draft instead of publishing it. Now you can always just copy the footer code out of your draft when you write a new post. If you only use Steemit you can save the code in a text file to keep it ready for your next article.

Example Footer

And here we have my new footer that I have explained in detail in the paragraphs above. You probably want to add a title and maybe further information about yourself to your own footer.


Steemy1UP
60 Steem Tutorials with SteemyThe 1UP Curation System
wlokgqo4p3.jpgvx14qijmmo.jpg
Meet @TheCryptoDwarfThe Animated @SmartBee

Let me know what you think about footers in general and about using tables in specific for that kind of task. And are you on Busy or eSteem Surfer when you write your posts?

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: