Steemit Formatting - Beyond the basics - Part I

in #steemit7 years ago (edited)

Top_border

Steemit is a wonderful platform which allows you to communicate with others and exchange useful ideas while you earn money. While submitting stories most of the new users do not use the editor in full capacity.
The objective of this post and video tutorial is to educate you about the same. If you find it useful for the community, please upvote and resteem. It took me a few hours to make the videos and write a post. Cute hug
Under the hood, Steemit uses something called as Markdown to format text.

Top_border

What is formatting?


It is the art of beautifying the document to make it look more interesting to others. Watch the videos below to find out more. The first video is for newcomers. Advance users please check out the relevant videos by topic.


Basics of Steemit editor


Top_border

Display data in tabular format: Tables


To copy and paste, please visit this link.

A 3 column table with three rows:

Serial #NamePoints
1Sam999
2Tina998
3Rita944
4Tim997

A two column table with five rows:

NameCellphone number
Sam999-88-8878
Eddy666-88-8878
Time444-88-8878
Beth222-88-8878
Rita777-88-8878

Top_border

Two column layout.


Order in which the div tag appears does not matter. To copy and paste, please visit:

Text on left, and image on right.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

Top_border

Text on right, and image on left.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

Top_border

Top_border

Ordered and unordered lists.


To copy and paste, please visit this link.

This is an ordered list.

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

This is an unordered list with sub items.

  • Tea
  • Coffee
  • Juice
    • Latte
    • Espresso
    • Frappe

Top_border

How to use headers


Headers allows us to change the size of the fonts. There are two ways to use headers on Steemit. Check out the video to learn more.

H1 or header 1 is used for title's.

H2 or header 2 is used for sub-title's.

H3 or header 3

H4 or header 4

H5 or header 5
H6 or header 6. This is the smallest of headers.


Top_border

Playing around with text

Steemit markdown allows you to add b tag which turns the text bold . The strong tag does not seem to work here. If you make a mistake and preserve the previous word, you can use del tag to strikeout the milkstake mistake. To add a hyperlink, use anchor tag. The word to be displayed to the users, must be in-between the opening and closing a tag. The href attribute/property is used to specify where the link leads to. In this case, if you click it, it takes you to my profile. Just beneath this line you can see some dummy python code which is displayed using the code tag. See how different it looks when compared to normal text. Visit this link to copy and paste stuff.

#!usr/bin/python
print "I love Steemit and you will love me for this post. Please upvote and resteem"


You could also quote stuff. Check an example below.

Education is The Manifestation of The Perfection Already in Man
– Swami Vivekananda

Watchout! More to come.

Top_border

To copy and paste, please visit this link.


Please upvote.

Bottom_border

Sort:  

Thank you very much. :) I appreciate it.

Awesome post, but dont forget the most important formatting, the centralising of your content. Simply use the following tags before and after the part you want to be centered.

<center>
Your content here
</center>

And it should display like this


Your content here

You can also escape the syntax using the \ placed before a function in order to give copy and paste-able code snippets.

Resteemed!

Great input. Yes, I used the center tag in the post. :)
Maybe I didn't write about it. I wasn't sure about the \ tough. How does that work?

Not 100% on what you mean by ", but I shall assume you mean quotes like you have already used above.
To Quote something simply pass the > symbol before what it is you are quoting, and should look like this

Great input.

I apologise if I am mistaken by your question. Hope this helps though. :D

Haha. Nvm. It'd escaped it. :)
Yes, quotes are covered in the tutorial.

no worries, I'm still curious as to what you were trying to ask though?

This is a good starting point for beginners!
It does help if you know html - its all same same but different :-)
thank you for lending a hand!!

Thank you very much for the inputs. Yes, I agree. If you know HTML then this is very similar.
However, most of the tags don't work. They only allow a few selected tags.
You could check Github markdown. Most of this is based on Github. :)

yeah - i know - i have to calm and use what is there :-)

Hello Joey. Thank you very much checking out the article. I appreciate it. :)
Hope this helps. Have a great day ahead.

This post was resteemed by @resteembot!
Good Luck!

Learn more about the @resteembot project in the introduction post.

Congratulations @dontview! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

You got your First payout

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

This post has received a Bellyrub and 0.54 % upvote from @bellyrub thanks to: @dontview. Send SBD to @bellyrub with a post link in the memo field to bid on the next vote, every 2.4 hours. Be sure to vote for my Pops, @zeartul, as Steem Witness Hope you enjoyed your bellyrub!

I came by to thank you for the tip in my wallet. That was very nice of you and I appreciate it.

But this post is worth gold for me. I'm just learning this markdown skill and very happy to know it. You have definitely gone beyond the basics and are very clear in your explanations. I hope you help many and I will do my best to get the word out.

Upvoted, bookmarked, resteemed, promoted in Steemit Chat, and tweeting to my steemer twitlist.