Formatting Tips: Plus, Post Your Code to Win!

in #naturalmedicine2 years ago


Sometimes us old timers in Steemworld forget what it's like to be a newbie and trying to figure out what's what, who's who, and even how to create an upvote worthy post. We thought a series of posts on 'how to' might be useful for newcomers, especially those who've landed themselves within the Lotus Tribe at Natural Medicine.

This first post is about formatting a good post. Three essentials must be your starting point - great formatting on bad content won't help!

  • Be unique and original
  • Source your photos and referenced text (don't plagiarise!)
  • Check your spelling and grammar.

Additionally, our community has certain expectations for good content - you can refer to the content guidelines here. We appreciate posts which

  • tell a personal story (just science can be so dry!)
  • refer to studies, data and research if applicable
  • make an effort!

Here are some formatting tips that might just want our curators to alert Curie and other curation teams that your posts deserves some extra love - let alone our Lotus and Natural Medicine whales!

Firstly, we'd like to say that most of these can be found by using Steempeak for your drafts. However, to save you scrolling to the top of the page every time you want to use any of the features below, you might like to learn some of the basic codes below.

Headings, Bold & Italics

Divide your content - big slabs of text can be boring to read! Simply put 1 to 7 hash tags in front of your text to create varied sizes of headings. Too easy!

# Heading ##### Heading

Hashtags will make your text smaller or larger, and bold.

*italics* break up your writing
**bold** or create emphasis
***italics and bold*** by using variations of bold, italics or both!

Arranging Images: Left, Right Or Centre?

Whilst it might not always be easy to tell if your image is sliding over to the left or right, on various front ends or mobile devices it may appear off centre, which can look pretty awful. Insert your image in the middle of centre code to make sure it's going to centre. You can do the same to centre text.

<center>Insert Image Here<center>

It can look really fabulous to see a slab of text to the left or right of a long section of text. You need the div class code for this - try keeping it on a sticky note on your desk top so it's easy to cut and paste when you need it, or, in a draft in Steampeak (we love Steempeak for drafting - super hot tip!)

<div class="pull-right">
Image Goes Here

Oh, and can you see the line above and below?? That's an easy one! Use this code: <hr>

Want two images to sit side by side, or align your text in columns? Experiment with the following code. We totally recommend using Steempeak, as you can see the effects of your code on the right hand side as you write it.

<div class="pull-right">
Image Goes Here
<div class="pull-left">
Image Goes Here

Adding Numbered Reference to Cite Your Sources

<sup>Number Goes Here</sup>

We really like posts which reference studies and research when you're making claims about the benefit of a particular herb or plant. You can paraphrase, such as saying something like, 'Studies suggest that posts who reference scientific journals are more likely to receive bigger upvotes1', or 'according to @naturalmedicine, good content should be well written and attractive to look good for the outside world, thus raising the value of Steem!2

See those little numbers? You can make it clickable too, or simply put the link at the end of the post in a numbered list. To make it hyperlinked, try this code:

<sup>[1](post link goes here)</sup>

This code is actually just really nice to do fine print, like this:

Support Natural Medicine by delegating here

Which of course, leads us to..

Creating Hyperlinks

Hyperlinks are good to refer back to previous posts or to blogs. For example, you might like to tell people about the latest contest by @naturalmedicine to win Steem. Simple use the following code: [words here](text here)

Adding a Quote in an Insert

> makes your writing, like a quote or an important message. Try using > plus **text** -- > ****

which would look like this.

Try A Table When Listing

  • We so rarely see this code on Steemit posts, but it look so GOOD! You can create a bullet point list simply by using - before your text (see the bullet at the start of this line) - but why not try this code?

-| -| -|
Lavender | Calming, Sleep | Y
Peppermint | Digestive, Pick me Up | Y
Mint | Mojitos | Y
NaturalMedicine | Lotus Love | Y

LavenderCalming, SleepY
PeppermintDigestive, Pick me UpY
NaturalMedicineLotus LoveY

Make Your Images Pop - And Source Them!

This is great when you're really featuring images. Oh, and please, please source your images! It's fine to use images from, say, Unsplash, which are free to use, but do make sure you credit them! Never pass off the work of others as if it's your own - it's really easy to check!

[IMAGE SOURCE](Link to Webpage)


Make your Thumbnails Count by Using Apps

Often, the thumbnail can get you an upvote just by inviting people into your post! Try using an app like Sparkpost, and make your thumbnail the right size. @greencross has some great tips for making thumbnails - check out this post for tips and ideas.

Got a formatting tip we haven't mentioned here?

For a chance to win 5 Steem + 50 Lotus, post your best formatting tip here!

Thinking about writing a #naturalmedicine post this week? We have upvotes to burn and will resteem the best of you to nearly 1,000 followers! Go you! We're also resteeming on our @uplotus account, so go give that a follow too! And if you want to see your Lotus Rewards on your post, try viewing from, or through Tribes on Steempeak.

All the curation and author rewards in LOTUS for this post will be burnt to help the ecosystem.

We need YOU! Please consider delegating to help keep this collective going. The minimum entry for membership is 50SP (free for members under 150SP), and helps give YOU upvotes, contests, meditation sessions, an awesome discord support group, and so much more!



if you go to take a picture with your i phone but go to "panorama" instead of picture you can take extra long pictures and steem formats it as long as the panorama is.
The trick is holding the i phone sideways. That's the only way it will format correctly.

Dear friends, @naturalmedicine This is a wonderful post.
We must add a command that we use to highlight something, we use it in Steempeak too, we love Steempeak ha ha.

We must give the credit to our music teacher @kantos, who opened this account for us and taught us many commands.

The command is


<div class="phishy">

I use quotes with > in front of the line...

or do it twice >> for reply ;)

tripple funky :)

pressing TAB is good! ;)

Sometimes I use this: /good for newbs/
and then copy the generated code into my post :)


very useful post of yours, I've learned some new things ;) THANKS!

 2 years ago 

Oh I love that generator! Good one!

Posted using Partiko Android

Great post. I like looking at well formatted stuff more.

I use < center > to center text and image< /center> and < code > to get this style of gray < /code> and - to make a list and 1. To make numbered lists I also use # to make hastags and @ for mentions and ~~ ~~ for strikethrough and =) for :)

 2 years ago 

I was wondering how to do that 'gray box text' thingy.....

now I will use it more often

 2 years ago 

Congratulations - you won 5 Steem and 50 Lotus for a tip we didn't mention, and that me (@riverflows) didn't know about! xx Check your wallet!

Wow! Thank you ♡♡♡

Thanks a lot for the great info. I learned some formatting tips from this post. love it!
and thanks for the mention :)

If you want to justify the text of your post you can use:

div class="text-justify"
Inside < > brackets

And at the end of the text, you close the label with

Inside < > brackets

A justified text looks like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium velit vel vulputate auctor. In leo nibh, tincidunt at malesuada ac, molestie at ante. Donec cursus metus ac euismod venenatis. Donec ac vulputate nisl. Maecenas hendrerit erat at hendrerit congue. Nulla facilisi. In hac habitasse platea dictumst. Integer ullamcorper tincidunt nulla at tempus. Donec lacinia velit bibendum, finibus nulla eget, egestas nibh. Maecenas id sodales lectus, a tincidunt mi. Nullam commodo elementum urna, vitae condimentum risus viverra rutrum. Curabitur vestibulum eu diam id convallis. Nunc vitae nibh vitae libero facilisis congue. Nunc vitae justo risus. Duis molestie mauris sit amet.

it seems we're allowed to use a lot of CSS classes in our posts here :)
now i need to find a list of them... ;)

edit: here they are

 2 years ago 

I can never get tables to work for me.

I might have to give it another go.

This is one I use for when I include song lyrics in my post — which reminds me, I haven’t had a soundtrack in a post for some time!!

One thing's for certain,
A year like this passes so strangely
Somewhere between sorrow and bliss
— Florence & The Machine


  • pre class="wp-block-verse"

inside < > brackets,
then end it with:

  • /pre

inside < > brackets,

first, thank you for this very informative content. But I'm just wondering, is this applicable on phone? Like that center, oh I think it will not because I couldn't fine the symbol to use in center.

Anyway I'm thinking to write new about like this.

Posted using Partiko Android

 2 years ago 

@mrnightmare89 Sadly, Partiko makes a mess of formatting so viewing this post on phone doesnt make sense. But still use code, as people viewing from browser get a better experience!

Posted using Partiko Android

ah okay, for example if you want to shortened the link of the source in displaying, you can write like this [source](copied link from the source) to make it look like this, source. If the website is wrong, the word will not be highlighted.

Excellent information. Love and desire to share useful knowledge are perceived. Well done!

True! :)

I have to admit that I learnt some new things here and that after two years and three months on here. I especially like the 'Table' tip. It looks pretty awesome.

No formatting tips from my side. I like to use GIF's though these days. Even more as they show parts of the game(s) that I'm working in and can be created in the Bitsy game editor but I guess that's not very helpful for those not using that program