Steemit Blog Post Layout –
How to make your posts stand out from the rest

^{^source}

So you can write?

But you are struggling with the layout a bit?

Don’t worry, with these handy tips, you can turn your Steemit blog post into something spectacular.

Let’s be honest, blogging isn’t easy. At first you have to find your niche. Then find topics to write about in that niche. After spending hours figuring out if your grammar is correct, you have composed your masterpiece and it’s time to present it to the world.

You open the Steemit site, click on the green-cyan/turquoise “POST” sign and paste your script. Add some large images that fill the whole width. Add your footer, tags and hit the “POST” button again.

Now comes the exciting part to see how much user interaction and $$ your crypto creating content will generate.

But...

What if you could stand out from the crowd a bit?

Luckily there are some different ways, but you will have to learn the quick basics of HTML.

Don’t be afraid of it, it’s very easy.

It might seem bit time consuming, yes. Is it worth it? Oh definitely! This method is suggested to be used only if you post via a laptop/desktop computer, though. It will be easier via laptop/desktop, in my personal opinion, but putting in that extra effort will go a long way in the end.

Basic Post Layout

When you think about your blog post when writing it, you have to think about how you want to present it to the world. Will I have a large image at the top? Do I want a smaller image on the side and text next to it?

Here are three examples:

The first example is a standard post easily made on Steemit
The second example can be used for story or information posts
The third example can be used for DIY or food blogs

Where do we find the HTML code when writing our blog posts on Steemit?

Click on “POST”
Type something into the body
“Markdown” will change to “Raw HTML”
Click on “Raw HTML”

Your post layout will change to the html code with a live review below it. I have yet to learn and try Markdown styling, but I find that I have more control of my post when I work with the html code directly.

When you see the following code, you will know that what you did was correct:

What you are seeing now is the pure basic form of html. It has an open tag with <html> in it to state the type of document to the browser and at the end a closed </html> tag.

Each tag has to be opened and closed. You can see the same with the <p> tag which is for a paragraph and the <h> tag inside. You open the paragraph and you close “/” the paragraph.

When I compile my post, I will divide it into a couple of paragraphs. Yes, I know it’s not necessary, but it’s how I lay the code out in my mind. It prevents me from becoming confused and allows me to concentrate on a specific code section at a time.

How to create layout 2:

Ok, let’s give the half page image and neighboring half page text layout a try.

This layout is best for desktop view. On mobile the images might look a tad on the smaller side.

Below are two examples of the view on my mobile. The first one (left) was taken from the @steemapp and the second one from Google Chrome for iPhone 6.

As you can see, it’s best to stay away from images that have high amounts of detail, which you want your reader to concentrate on for some specific reason. Low attention, but vibe creating images to boost the message of your post in a more professional way is the best to aim for.

Let’s say that for this example, our post is about Lewis Hamilton. So we start with the open <html> tag, then the largest open header tag available <h1> followed by the post name.

CODE

<html> <h1>LEWIS HAMILTON</h1> </html>

RESULT

LEWIS HAMILTON

There are six different heading tags available for html. You can check them all out here or try them out yourself <h1><h2><h3><h4><h5><h6>. The html editor on @steemit is live. Whatever you edit at the top will have changed by the time you have scrolled down.

For SEO (Search Engine Optimization) purposes, it’s never suggested to mix your <h> tags. Don’t use <h1>, <h6>, <h3> etc. Keep them in an orderly fashion. <h1>, <h2>, <h2>, <h3>, <h3>, <h1>, <h2>, <h3>, <h2>, <h3>, <h4>, <h3>, <h4> etc. Think of the <h> tags as the index of a book. Use this index method as a way to lay our posts out. Hence, the name header tag.

Normally the header tag is on the left hand side of the page. If you want it to be in the middle, I use the following code to accomplish it:

CODE

<html> <p><center><h1>LEWIS HAMILTON</h1></center></p> </html>

RESULT

LEWIS HAMILTON

Notice how you close the tags in the reverse order of which you opened them. The last tag you opened is the first one you close again. You always close you code up and lock it in when you are done with it.

To add the image to the left hand side, we have to add it before we add our first text paragraph. We are going to use the <div> tag to package it and pull it to the side of the page. When we do this, it shrinks to a quarter of the original image size. The height and width of the image both halved in size.

So let’s add the code to our existing code:

CODE

<html> <p><center><h1>LEWIS HAMILTON</h1></center></p> <div class="pull-left"> <center> <img src="https://www.YOURIMAGELINKHERE.com/" /> <br> <em><a href="LINK TO IMAGE SOURCE WEBSITE"><sup><sup>source</sup></sup></em></a> </center> </div> </html>

Now your image should display on the left side of your page after you scrolled down to your live view at the bottom of your “Raw html” document:

If you want the image to be on the right hand side, change “pull-left” to “pull-right”

Next step is to add your first paragraph. Keep it short, otherwise it will hang over at the bottom like mine did. To add the first paragraph, we are going to use the <p> tag.

CODE

<html> <p><center><h1>LEWIS HAMILTON</h1></center></p> <div class="pull-left"> <center> <img src="https://www.YOURIMAGELINKHERE.com/" /> <br> <em><a href="LINK TO IMAGE SOURCE WEBSITE"><sup><sup>source</sup></sup></em></a> </center> </div> <p>YOUR FIRST PARAGRAPHT TEXT COMES HERE</p> <p>YOUR SECOND PARAGRAPH TEXT COMES HERE</p> <p>YOUR THIRD PARAGRAPH TEXT COMES HERE</p> </html>

You have officially created your basic layout!

All you have to do going forward is to copy the <div> code into your post, choose which side of the page, add the link to your image and don’t forget to add the source if you don’t own the image. If you do own the image and don’t want to link to a personal or specific portfolio or account, delete the <a href section and only use:

CODE

<html> <p><h1>LEWIS HAMILTON</h1></p> <div class="pull-left"> <center> <img src=" https://www.YOURIMAGELINKHERE.com/" /> </center> </div> </html>

If for some reason you want your image to be a clickable image, but still looks like the image above, use the following code:

<div class="pull-left"> <center> <a href="https://LINK-TO-WHERE-THE-USER-MUST-GO-TO"> <img src="https://www.YOUR-IMAGE-SOURCE.com/" /> </a> </center> </div>

How to create layout 3 - Image Slider

For layout three, we are only going to concentrate on the image slider of things. Sometimes you want to keep things the old original large image way, but what if you can add an interesting twist to it?

The slider images can be used to display random images pertaining to your post, e.g. bunching images together, to help give more life to your post or to be used as a step-by-step method. Cooking, diy, any type of step by step guides!

Here is an example of the image slider:

SLIDE LEFT TO RIGHT FOR IMAGES

^{^source}

CODE

</table> </td> </pre></img src="LINK-TO-IMAGE-1" /></img src=" LINK-TO-IMAGE-2" /></img src=" LINK-TO-IMAGE-3" /></img src=" LINK-TO-IMAGE-4" /> <//pre> <//td> <//table>

How to set up your Previous Posts list

Oh yeah, if you are still with me, BONUS! You will like this idea…

If you are a regular @steemit publisher, this will aid you in not only gaining followers, but help with up votes on recently published items alike. It can be used to emphasize important posts, previous work or anything that flows your mojo.

Whatever tickle your beans.

The images I used dimensions were all 150 x 84 and it did the trick nicely. You should be able to go higher than 84px, but try so keep the width at 150px.

I could only get this to work after my signature and at the very end of my post. If I put it before my signature, it pulls it in to one of the columns, even though the code shows that it’s closed.

Maybe someone can shed some light on this?

Here is an example of the previous posts (only use at the end of your post, after signature!). Example is an image, click HERE to see it live in action:

CODE

It's not beautiful, but it works! Every time I try to neaten it up, the code breaks. If you have an easier method, please post it in the comments below.

Thank you for taking the time and that you stuck with me through this. It might seem very daunting at first, but you will see that in the end, it’s the best to have as much control over your post as possible.

If you liked this post, please do not hesitate to UPVOTE, FOLLOW and RE-STEEM. Spread the love, spread the knowledge.

Team South Africa banner designed by @bearone

darnscotty