Difference between revisions of "Tips for formatting your post"

From Steem Center
Jump to: navigation, search
m (Links:: Thumbnails)
m (In other languages)
 
(18 intermediate revisions by 9 users not shown)
Line 1: Line 1:
 
It is highly recommended that you properly format your post before submitting it. To create your content on Steemit you can either use the "Editor" or "Markdown" mode. The following is a brief summary of some of the most common formatting commands available in Steemit '''Submit a Story''' Markdown window. <br>
 
It is highly recommended that you properly format your post before submitting it. To create your content on Steemit you can either use the "Editor" or "Markdown" mode. The following is a brief summary of some of the most common formatting commands available in Steemit '''Submit a Story''' Markdown window. <br>
These tips derived from tutoring sessions with @razvanelul as well as this GitHub's [https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet Markdown Cheat Sheet]
+
These tips derived from tutoring sessions with @razvanelul<ref name="multiple">[https://steemit.com/@razvanelulmarin @razvanelulmarin] Retrieved in July 26th, 2017</ref> as well as this GitHub's '''Markdown Cheat Sheet'''.<ref>[https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet Markdown Cheat Sheet] Written by '''Adam Pritchard''' in [[GitHub]], retrieved in July 26th, 2017</ref> In addition, You can also use HTML tags if you are not using the Markdown Editor.
  
== Large Text ==
+
=== Large Text (Header) ===
  
To create large text, use an # <br>
+
To create large text, use an # , or by using the  <nowiki><h1></nowiki> tag<br>
 
The more ##### you use the SMALLER the text will appear. <br>
 
The more ##### you use the SMALLER the text will appear. <br>
 
Make sure to leave a space between the # and the word you want to enlarge. <br>
 
Make sure to leave a space between the # and the word you want to enlarge. <br>
  
* Largest is # word
+
* Largest is # word, or <nowiki><h1></nowiki> word <nowiki></h1></nowiki>
* Smallest is ###### word
+
* Smallest is ###### word, or <nowiki><h6></nowiki> word <nowiki></h6></nowiki>
  
== Bold ==
+
=== Bold ===
  
 
To make a word appear in '''bold''' font, use ** before and after the word. <br>
 
To make a word appear in '''bold''' font, use ** before and after the word. <br>
You do NOT need to leave spaces between the ** and the word.
+
You do NOT need to leave spaces between the ** and the word.<br>
 +
You can also use the <nowiki><b></nowiki> tag. <br>
  
 
* '''word''' : <nowiki>**word**</nowiki>
 
* '''word''' : <nowiki>**word**</nowiki>
 +
* '''word''' : <nowiki> <b> word </b> </nowiki>
  
== Italics ==
+
=== Italics ===
  
 
To make a word appear in ''italics'' use a single * on each side of the word. <br>
 
To make a word appear in ''italics'' use a single * on each side of the word. <br>
You do NOT need to leave spaces between the * and the word.
+
You do NOT need to leave spaces between the * and the word.<br>
 +
You can also use the <nowiki><em></nowiki> tag.
  
 
* ''word'' : <nowiki>*word*</nowiki>
 
* ''word'' : <nowiki>*word*</nowiki>
 +
* ''word'' : <nowiki><em>word</em></nowiki>
  
== Link ==
+
=== Link ===
  
 
To link a website to a word or phrase in your post, use [ ] and ( ). <br>
 
To link a website to a word or phrase in your post, use [ ] and ( ). <br>
Line 36: Line 40:
 
*  <nowiki><a href="https://website.com">name of website</a></nowiki>
 
*  <nowiki><a href="https://website.com">name of website</a></nowiki>
  
== Picture ==
+
=== Justify ===
 +
 
 +
To justify a text use:
 +
 
 +
* <nowiki><div class="text-justify"> Text </nowiki></div>
 +
 
 +
=== Picture ===
  
 
To include a picture, paste the address of the image into your post. <br>
 
To include a picture, paste the address of the image into your post. <br>
 
See more on the article [[Including images in your posts]].
 
See more on the article [[Including images in your posts]].
  
== Video ==
+
=== Video & Media ===
  
To include a video, paste the link into your post.
+
The most basic way to include a video is to paste the link into your post.  Another way is to include an embedded HTML (<code>iframe</code>).  Only YouTube, Vimeo, and SoundCloud (embed only) are supported.
  
== Center Pictures, Videos, or Text ==
+
=== Center Pictures, Videos, or Text ===
  
 
<nowiki>To center the picture use <center> and </center></nowiki>
 
<nowiki>To center the picture use <center> and </center></nowiki>
Line 59: Line 69:
 
*  <nowiki><center> videolink </center></nowiki>
 
*  <nowiki><center> videolink </center></nowiki>
  
== Breaks ==
+
=== Breaks ===
  
 
To create small spaces above and below the picture, use <nowiki><br>
 
To create small spaces above and below the picture, use <nowiki><br>
Line 68: Line 78:
 
To create a new line without new paragraph you need to put at least 2 spaces at the end of each line.
 
To create a new line without new paragraph you need to put at least 2 spaces at the end of each line.
  
== Captions ==
+
=== Captions ===
  
To make it appear that a picture has a caption, use the  break feature, center feature and the italics feature. (Special thanks to @razvanelul for this cool idea)
+
To make it appear that a picture has a caption, use the  break feature, center feature and the italics feature. (Special thanks to @razvanelul for this cool idea)<ref name="multiple">[https://steemit.com/@razvanelulmarin @razvanelulmarin] Retrieved in July 26th, 2017</ref>
  
 
*  <nowiki><br><center>picture.jpg</center></nowiki><br>
 
*  <nowiki><br><center>picture.jpg</center></nowiki><br>
 
<nowiki><center>*caption*</center><br></nowiki>
 
<nowiki><center>*caption*</center><br></nowiki>
  
 +
=== Text slider ===
 +
 +
All you need to do is put 4 spaces before the text you want to make into a slider.<ref>[https://steemit.com/creative/@chron/shortcut-to-move-able-sliding-text-banner-on-steemit Shortcut to move-able sliding text banner on steemit] Written by '''Chron''' (@chron) in [[Steemit]] in July 26th, 2017</ref>
 +
 +
 +
==References==
  
==Links:==
+
<references />
  
* '''Steemit''' : https://steemit.com/welcome (retrieved in January, 23th, 2017)
+
==Links==
* '''Steemithelp.net''' : [https://www.steemithelp.net/quick-start-guide/ Steemit Quick Start Guide: Step by Step from Registration to Your First Post]
 
* '''Steemithelp.net''' : [https://www.steemithelp.net/#/new-page-1/ Post, Curation, Guild and Groups]
 
* '''R''' : https://steemit.com/@razvanelulmarin
 
* '''@steemitguide''' : [https://steemit.com/steemit/@steemitguide/steemit-markdown-tutorials-for-beginners-a-compilation-of-my-written-guides-to-help-you-edit-your-posts-via-raw-editor-like-a Steemit Markdown Tutorials for Beginners: A Compilation of my written Guides to Help you Edit your Posts via Raw Editor like a Pro; Markdown & HTML Codes]. January 2017
 
* '''@smysullivan''' : [https://steemit.com/challenge30/@smysullivan/markdown-formatting-a-minnows-tale Markdown Formatting, a Minnows Tale!]. January 2017
 
* '''@future24''' : [https://steemit.com/howto/@future24/tutorial-how-to-publish-an-article-at-steemit-quick-and-easy-guide-english-german Tutorial: How to publish an article at Steemit? Quick and easy guide! (English/German)]. October 2016
 
* '''@ervin-lemark''' : [https://steemit.com/steemit/@ervin-lemark/how-can-you-left-or-right-align-parts-of-your-steemit-article-images-included How Can You Left Or Right Align Parts Of Your Steemit Article, Images Included?]. October 2016
 
* '''@blueorgy''' : [https://steemit.com/emojis/@blueorgy/steemit-emojis-master-list Steemit Emoji Master List]. September 2016
 
* '''@minion''' : [https://steemit.com/writing/@minion/professional-tutorial-for-post-formatting-both-for-beginners-and-advanced-users Professional Tutorial for Post Formatting, both for Beginners and Advanced users]. August 2016
 
* '''@senseiteekay''' : [https://steemit.com/steemit/@senseiteekay/tips-for-posting-on-steemit-and-128204 Tips for Posting on Steemit (Updated)]. August 2016
 
* '''@gainingsteem''' : [https://steemit.com/steemit/@gainingsteem/the-definitive-steemit-com-writing-guide-the-basics-of-posting The Definitive Steemit.com Writing Guide – The Basics Of Posting]. July 2016
 
* '''@cryptogee''' : [https://steemit.com/steemit/@cryptogee/format-your-steemit-articles-and-gain-steem-power Format Your Steemit Articles And Gain Steem Power!]. May 2016
 
* '''@xeldal''' : [https://steemit.com/steem/@xeldal/how-to-liven-up-your-steem-posts-with-markdown How to Liven up your Steem Posts with Markdown]. April 2016
 
* '''@inertia''' : [https://steemit.com/steemit/@inertia/soundcloud-tip-thumbnails Soundcloud Tip: Thumbnails].  October, 2016
 
  
==Related articles:==
+
* '''Steemit''' : https://steemit.com
 +
* '''Steemithelp.net''' : https://www.steemithelp.net
 +
* '''@steemitguide''' : [https://steemit.com/steemit/@steemitguide/steemit-markdown-tutorials-for-beginners-a-compilation-of-my-written-guides-to-help-you-edit-your-posts-via-raw-editor-like-a Steemit Markdown Tutorials for Beginners: A Compilation of my written Guides to Help you Edit your Posts via Raw Editor like a Pro; Markdown & HTML Codes]. ''January 2017''
 +
* '''@xeldal''' : [https://steemit.com/steem/@xeldal/how-to-liven-up-your-steem-posts-with-markdown How to Liven up your Steem Posts with Markdown]. ''April 2016''
 +
* '''@cryptogee''' : [https://steemit.com/steemit/@cryptogee/format-your-steemit-articles-and-gain-steem-power Format Your Steemit Articles And Gain Steem Power!] ''May 2016''
 +
* '''@gainingsteem''' : [https://steemit.com/steemit/@gainingsteem/the-definitive-steemit-com-writing-guide-the-basics-of-posting The Definitive Steemit.com Writing Guide – The Basics Of Posting]. ''July 2016''
 +
* '''@minion''' : [https://steemit.com/writing/@minion/professional-tutorial-for-post-formatting-both-for-beginners-and-advanced-users Professional Tutorial for Post Formatting, both for Beginners and Advanced users]. ''August 2016''
 +
* '''@senseiteekay''' : [https://steemit.com/steemit/@senseiteekay/tips-for-posting-on-steemit-and-128204 Tips for Posting on Steemit (Updated)]. ''August 2016''
 +
* '''@blueorgy''' : [https://steemit.com/emojis/@blueorgy/steemit-emojis-master-list Steemit Emoji Master List]. ''September 2016''
 +
* '''@future24''' : [https://steemit.com/howto/@future24/tutorial-how-to-publish-an-article-at-steemit-quick-and-easy-guide-english-german Tutorial: How to publish an article at Steemit? Quick and easy guide! (English/German)]. ''October 2016''
 +
* '''@ervin-lemark''' : [https://steemit.com/steemit/@ervin-lemark/how-can-you-left-or-right-align-parts-of-your-steemit-article-images-included How Can You Left Or Right Align Parts Of Your Steemit Article, Images Included?] ''October 2016''
 +
* '''@inertia''' : [https://steemit.com/steemit/@inertia/soundcloud-tip-thumbnails Soundcloud Tip: Thumbnails].  ''October, 2016''
 +
* '''@smysullivan''' : [https://steemit.com/challenge30/@smysullivan/markdown-formatting-a-minnows-tale Markdown Formatting, a Minnows Tale!] ''January 2017''
 +
* '''@sidwrites''' : [https://steemit.com/steemit/@sidwrites/3-simple-formatting-tricks-for-your-next-steemit-post 3 Simple Formatting Tricks For Your Next Steemit Post]  ''May 2017''
 +
* '''@scrooger''' : [https://steemit.com/howto/@scrooger/how-to-post-with-html-markdown-super-simple-with-copy-paste-cheat-sheet-make-your-posts-looks-so-much-better Pimp your post with this simple Cheat Sheet! Just copy and paste!]  ''June 13, 2017''
 +
* '''@jrswab''' : [https://steemit.com/education/@jrswab/formatting-tested-ways-to-improve-your-content Formatting: Tested Ways To Improve Your Content]  ''November 2, 2017''
 +
* '''@ladyjah''' : [https://steemit.com/explore/@ladyjah/exploring-steemit-with-html-codes Exploring #Steemit with HTML Codes]  ''November 5, 2017''
 +
* '''@acidyo''' : [https://steemit.com/embed/@acidyo/how-to-embed-youtube-videos-on-steemit-so-it-adds-views-to-the-video How to embed Youtube videos on Steemit so it adds views to the video]  ''December 9th, 2017''
 +
* '''@katerinaramm''' : [https://steemit.com/steemit/@katerinaramm/the-ultimate-steemit-markdown-guide The Ultimate Steemit MarkDown Guide]  ''June 4, 2018''
 +
 
 +
==Related articles==
  
 
* [[Including images in your posts]]
 
* [[Including images in your posts]]
 
* [[Increase_your_Steem_Net_Worth|Increase your Steem Net Worth]]
 
* [[Increase_your_Steem_Net_Worth|Increase your Steem Net Worth]]
* [[In_the_news|In the News]]
+
* [[Post]]
 +
* [[Tag]]
  
==References:==
+
==External Links==
  
 
* '''Frot Design''' : [http://www.frot.co.nz/design/computing/a-bunch-of-stuff-about-steemit/ A bunch of stuff about Steemit] ''Written by unsigned, published in 10/27/2016 ''
 
* '''Frot Design''' : [http://www.frot.co.nz/design/computing/a-bunch-of-stuff-about-steemit/ A bunch of stuff about Steemit] ''Written by unsigned, published in 10/27/2016 ''
 +
 +
== In other languages ==
 +
 +
* [[Bahasa Indonesia]] (Indonesian): [[Tip Memformat Tulisan di Steemit]]
 +
* [[繁體中文]] (Chinese, Traditional) : [[為帖文加上格式]]
 +
* [[简体中文]] (Chinese, Simplified) : [[为帖文加上格式]]
 +
* [[Español]] (Español latinoamericano): [[Formatear un post con Markdown]]
 +
* [[Galego]] : [[Cómo formatear un texto co Markdown]]
 +
* [[日本語]] (Japanese): [[投稿の書式設定のヒント]]
 +
* [[Vietnamese]] (Tiếng Việt): [[Hướng dẫn trình bày bài viết]]
  
 
<br>
 
<br>
Line 113: Line 146:
 
|}
 
|}
 
<br>
 
<br>
 +
 +
[[Category:Tutorial]] [[Category:Content]]

Latest revision as of 06:53, 8 July 2018

It is highly recommended that you properly format your post before submitting it. To create your content on Steemit you can either use the "Editor" or "Markdown" mode. The following is a brief summary of some of the most common formatting commands available in Steemit Submit a Story Markdown window.
These tips derived from tutoring sessions with @razvanelul[1] as well as this GitHub's Markdown Cheat Sheet.[2] In addition, You can also use HTML tags if you are not using the Markdown Editor.

Large Text (Header)

To create large text, use an # , or by using the <h1> tag
The more ##### you use the SMALLER the text will appear.
Make sure to leave a space between the # and the word you want to enlarge.

  • Largest is # word, or <h1> word </h1>
  • Smallest is ###### word, or <h6> word </h6>

Bold

To make a word appear in bold font, use ** before and after the word.
You do NOT need to leave spaces between the ** and the word.
You can also use the <b> tag.

  • word : **word**
  • word : <b> word </b>

Italics

To make a word appear in italics use a single * on each side of the word.
You do NOT need to leave spaces between the * and the word.
You can also use the <em> tag.

  • word : *word*
  • word : <em>word</em>

Link

To link a website to a word or phrase in your post, use [ ] and ( ).
The text goes in the [ ] and the link goes in the ( )

  • [word or phrase](website.com)

If you are not using the markdown editor, you can also create a link this way

  • <a href="https://website.com">name of website</a>

Justify

To justify a text use:

  • <div class="text-justify"> Text </div>

Picture

To include a picture, paste the address of the image into your post.
See more on the article Including images in your posts.

Video & Media

The most basic way to include a video is to paste the link into your post. Another way is to include an embedded HTML (iframe). Only YouTube, Vimeo, and SoundCloud (embed only) are supported.

Center Pictures, Videos, or Text

To center the picture use <center> and </center>

  • <center>picture.jpg</center>

To center text use <center> and </center>

  • <center> word </center>

To center a video use <center> and </center>

  • <center> videolink </center>

Breaks

To create small spaces above and below the picture, use <br>

  • <br><center>picture.jpg</center><br>

To create a new line without new paragraph you need to put at least 2 spaces at the end of each line.

Captions

To make it appear that a picture has a caption, use the break feature, center feature and the italics feature. (Special thanks to @razvanelul for this cool idea)[1]

  • <br><center>picture.jpg</center>

<center>*caption*</center><br>

Text slider

All you need to do is put 4 spaces before the text you want to make into a slider.[3]


References

  1. 1.0 1.1 @razvanelulmarin Retrieved in July 26th, 2017
  2. Markdown Cheat Sheet Written by Adam Pritchard in GitHub, retrieved in July 26th, 2017
  3. Shortcut to move-able sliding text banner on steemit Written by Chron (@chron) in Steemit in July 26th, 2017

Links

Related articles

External Links

In other languages




Help keep this wiki page updated. Register, click in edit, add or modify the text and save.
If you're already a steemian you can be rewarded with steem, see how in @steemcenterwiki.