Evolved08gsr's Steemit Navigation Tips # 002 - Better Portraying your ContentsteemCreated with Sketch.

in #steemit7 years ago

Every day I'm scrolling through the "new" tab, I stumble upon some awesome content, but I struggle to get through reading it because the text is in blocks, the charts they tried to create are misaligned, or the pictures they posted hurt the flow of the post.


So Here I am, Trying to Help my Fellow Steemians Improve the Portrayal of their Content on Steemit!

I will walk you through the various methods that I employ in my posts. Granted, I don't always use them to their fullest potential, nor do I claim to make the best posts, but the functions that I use are bound to help improve your posts!

I would be remiss if I didn't start off that the Built-In Steemit Text Editor for posting uses "MarkDown" language, and also accepts most HTML coding. Now, let's get started..

Contents:

  1. Using Headings to Guide your Story
  2. Adding Natural Breaks or Horizontal Lines
  3. Formatting and Aligning your Text and/or Pictures
  4. Creating a List and/or Using Bullets
  5. Using Tables

1. Using Headings to Guide your Story

As you're writing your post, think about what your main points are of your post.

  • Does it make sense to give the reader a break between some large paragraphs and give them a "One-Liner" describing what you're about to discuss next?

If you answered Yes, consider using the <h1> or # tags. The <h1>, simply, stands for Header 1 and will provide you with Large Bold Text. <h1> correlates to a single #, <h2> is the same as ##, <h3> is the same as ###, and so on. There are as many as six header choices, each of which will add an extra line of spacing below the Heading (except if you use the hashtag version):

<h1>One</h1>
# One

One

One

<h2>Two</h2>
## Two

Two

Two

<h3>Three</h3>
### Three

Three

Three

<h4>Four</h4>
#### Four

Four

Four

<h5>Five</h5>
##### Five

Five

Five
<h6>Six</h6>
###### Six

Six

Six



Oftentimes I find Heading 1 to be too IN-YOUR-FACE when I'm writing a post, so I use the h2 and h3 tags more frequently.


2. Adding Natural Breaks or Horizontal Lines

When you first read this part, you may have thought "What in the Heck is a Natural Break!?". Well, what I mean by a natural break, is simply where you add new lines between every few sentences of text, in a naturally flowing manner.

I don't want you to split a single thought into multiple paragraphs. I want you to find a place in your post where you can give your reader a break from reading large chunks of text.

  • If you're reading a post and it seems to be a single block of text, or several large blocks of text, the reader's eyes tend to go fuzzy and they stop reading.
  • Is it easier to read the first two chunks of text above, or the following text below:

When you first read this part, you may have thought "What in the Heck is a Natural Break!?". Well, what I mean by a natural break, is simply where you add new lines between every few sentences of text, in a naturally flowing manner. I don't want you to split a single thought into multiple paragraphs. I want you to find a place in your post where you can give your reader a break from reading large chunks of text.

......................

Another option you have for breaking up text is a horizontal line. You may have noticed that I am using them to split each of my Content Topics.

There are a few methods to create a horizontal line:
--- (3 hyphens)


*** (3 asterisks)


___ (3 underscores)


<hr> (HTML code: Horizontal Rule)


  • There are various circumstances where you may need to get creative in your coding so the proper functions are displayed. For example, in order for my 3 hyphens above to post properly, I needed to either insert a line break (<br>) in my code before discussing them, or add a space character following the : at the end of my previous sentence.
  • Another character that will sometimes give you trouble when you're coding is the !(exclamation point).


3. Formatting and Aligning your Text and/or Pictures

Formatting Text

This part is probably the most simple, but also the most important. Emphasizing your text is fine fun!

<b>BOLD</b>
BOLD
**BOLD**
BOLD

<i>ITALIC</i>
ITALIC
*ITALIC*
ITALIC

<strike>STRIKETHROUGH</strike>
STRIKETHROUGH
~~STRIKETHROUGH~~
STRIKETHROUGH
<b><i>BOLD and ITALIC</i></b>
BOLD and ITALIC
***BOLD and ITALIC***
BOLD and ITALIC

All of your text and pictures will automatically be "Left Aligned", so using "Center" is another great method for Splitting Chunks of Text. Especailly if you mix it with BOLD and/or ITALICS:

<center><b>Center Aligned</b></center>

Center Aligned and Italic

Formatting Images

I found a useful trick on Steemit that you can use once you've uploaded an image to the Steemit blockchain. For example, I will load an image from a free-use site with the following source.

Original Image Code:

![](https://steemitimages.com/DQmTfe8mkJHZWPGL83jsxgzhVQkPYjMiP2HQhAvPeSYdCzt/image.png)

This image has an original image size of 465 × 354 pixels. Resulting in a ratio of ~1.3136:1
(calculated by dividing the first number 465 by the second number 354)
In many cases, your images will have larger original sizes (HD images, 4k images, etc.), and possibly varying ratios of 1:1, 4:3, 3:2, etc.
Anyway, the point is this: How can we make this image look better?

One way is to center the image, and another is to change the image size. I will show you both in a single step and provide an explanation.


<center>![](https://img1.steemit.com/263x200/https://steemitimages.com/DQmTfe8mkJHZWPGL83jsxgzhVQkPYjMiP2HQhAvPeSYdCzt/image.png)</center>

The way you can make the picture above work is by using the following tricks.

  1. Insert the url https://img1.steemit.com/300x300/ in front of your image url, where 300x300 in this case was actually 263x200 for the image above. The reason I chose that size is because I wanted my image to be 200 pixels tall, and I multipled 200 by 1.3136 (the ratio we calculated earlier) to get 262.72 and I rounded to the nearest pixel of 263.
  2. Center the image using the code I noted above <center>

I don't suggest "blowing up", or making your images larger than their original pixel sizes because you will likely "pixelate" the image, which makes it appear blurry or "blocky".

As you get more advanced, you can also align your image with text, but since I'm still a bit of a rookie in that department, I will share that insight at a later date.


4. Creating a List and/or Using Bullets

Numbered Lists and Bullet Lists have very simple code to generate.

To build a Bullet List, you simply need to use - (a hyphen), * (an asterisk), or + (an addition sign).

- Bullet Item #1
- Bullet Item #2
- Bullet Item #3
  • Bullet Item #1
  • Bullet Item #2
  • Bullet Item #3
* Bullet Item #1
* Bullet Item #2
* Bullet Item #3
  • Bullet Item #1
  • Bullet Item #2
  • Bullet Item #3
+ Bullet Item #1
+ Bullet Item #2
+ Bullet Item #3
  • Bullet Item #1
  • Bullet Item #2
  • Bullet Item #3
  • Bullets can be used as a list, similar to above, or it can be used similar to a Heading - in order to break up different topics or ideas.

For a Numbered List, as long as you don't start a new list or interrupt the list part-way through, you can use whatever numbers you want.

1. Numbered List #1
1. Numbered List #2
1. Numbered List #3
  1. Numbered List #1
  2. Numbered List #2
  3. Numbered List #3
1. Numbered List #1
5. Numbered List #2
9. Numbered List #3
  1. Numbered List #1
  2. Numbered List #2
  3. Numbered List #3
<ol>
<li>Numbered List #1</li>
<li>Numbered List #2</li>
<li>Numbered List #3</li>
</ol>
  1. Numbered List #1
  2. Numbered List #2
  3. Numbered List #3

Unfortunately, you're unable to use more advanced HTML coding to allow your numbered lists to start at different numbers, or to use Roman Numerals or the Letters of the Alphabet, but a Numbered List is very helpful when you're listing out a process where Order is Important.


5. Using Tables

Tables are a more advanced feature, and work best when you have "structured data" that you want to express in an organized format. The only way that I've been able to get a table to work is by using legacy HTML code.

Here's what works for me (extracted from another one of my posts):

<table>
<tr>
  <th>TXC_author</th>
  <th>Unique # Repeated Comments</th>
  <th>Total Repeated Comments Posted</th>
  <th>Total Posts and Comments</th>
  <th># Days with Repeated Comments</th>
  <th># Days Since Account Created</th>
</tr>
<tr>
  <td>zcgolf16</td>
  <td>3</td>
  <td>299</td>
  <td>496</td>
  <td>1</td>
  <td>77</td>
</tr>
<tr>
  <td>toscani40</td>
  <td>1</td>
  <td>249</td>
  <td>646</td>
  <td>1</td>
  <td>48</td>
</tr>
</table>
TXC_author Unique # Repeated Comments Total Repeated Comments Posted Total Posts and Comments # Days with Repeated Comments # Days Since Account Created
zcgolf16 3 299 496 1 77
toscani40 1 249 646 1 48

To give you a quick overview of what each tag means, <table> is to tell the Editor that you're creating a table, <tr> indicates that the following information will create a Table Row, <th> indicates the different Table Headings that you will provide, <td> indicates the different Table Data values that you will provide.

You will only have ONE set of TH items, and each of your TD values will be a value for each of the TH items. TD holds the records in your Table, and are placed in the same order as the TH items you listed previously.



If you Enjoyed this Post or Think other People might Benefit from this Information
Upvote for more posts
Comment about what you liked
Re-Steem for others' benefit


_____________________________________________________

Thanks for reading, I hope you have a great day!
_____________________________________________________

My Crypto Updates:

If you want to read more, please take a look at some of my other posts:

Sort:  

I think that if a post contains no link to a vid or a pic then it is censored from new/created.

I don't think those posts are "censored" from new/created, but they easily get lost. For example, this post was lost in the new/created section within 60 seconds of my post. I couldn't find it when I was scrolling down the list.

Adding an attention-grabbing picture is definitely a helpful method of getting people to view your post.

Thanks for your comment!

I think that it is not a matter of attention, at least not of upvotes, because randowhale and its likes do not help at solving this issue.
It is a matter of steemit's own code not displaying them regardless of votes, unless searched for in such a complicated manner, that is as if the searcher knew all of the author's tags and title in advance.

Randowhale doesn't make your post more or less likely to be seen. It's not a magic account.

If you have content that other people like, and you're interacting in the community, you will get more exposure. There's no secret trick to getting popular or rich here.

Randowhale knocks your post's worth up, and this increases visibility, unless your post got omitted by Steemit's display mechanism due to not having a link to a pic or a vid.
If Steemit omitted your content from searches, people will not be exposed to it, and obviously will not get to like it, so exposure comes before liking.
Likes do increase exposure, but likes can not happen without exposure, while exposure can happen without likes.

Nice post. For tables there also another way using markdown. I think it's easier and that's what I used in my post: https://steemit.com/steemit/@emble/top-posts-on-steemit-a-year-ago-today-aug-13-16

Yeah, you can use something like:

 | Heading 1 | Heading 2 | Heading 3| 
 |:--- |:----:| ----:| 
 | left align | center align | right align |
Heading 1Heading 2Heading 3
left aligncenter alignright align

but I always have trouble getting this to work!

It works for me, but ye it should work better

I agree. Thanks for your comment! :)

I have to say that the content of most of the posts in steemit are generally low quality.
I very much have the feeling people want to make quick money on this very platform and produce as much content as possible.
What would you say to this? And, how could this be increased within the steemit community?
I believe in Quality-Over-Quantity!
Greetings, @martinmusiol

I agree. Quality over Quantity is the way to grow the community the most, and the best!

I also agree that there is an absurd amount of people who take the alternate approach. Since one of the recent Hard Forks, people are no longer limited to the amount of posts that they can receive curation / author rewards for. As such, people are generating 20+ articles per day, and self-voting all of them to receive the highest amount of reward from their own Steem (as opposed to upvoting others' content across the platform).

My hope is that those people eventually get bored because they're effectively wasting their time by doing this on a daily basis for pennies. Then the real people who want to make this community better will continue to grow, and continue to make Steemit a better place with some amazing Original and Interesting Content!

Coin Marketplace

STEEM 0.22
TRX 0.26
JST 0.039
BTC 99024.83
ETH 3475.09
USDT 1.00
SBD 3.20