[HOW TO] Posting Fundamentals. New to Steemit?. Never Blogged?.Video companion for each section.




New to steemit?. First time blogging?.In this post i will show you everything you need to get started.


1. Grammarly 1:16 2. Bold Headers 4:07 3.Line breaks and Dividers 6:06 4. Bulleted lists 7:30 5. Text hyperlinks 8:15 6. Insert images 9:21 7. Insert videos 12:04 8. Center text,images,videos 12:30 8. Hosting images 13:52

When I started steemit I had never blogged before. Bad grammar and spelling because of lack of schooling. Not much experience with any coding. All I have is life experience and lessons learned and want to share them.

For a total newbie to steemit it can be a bit challenging. The things that seem simple to many can be confusing as hell to many new users.

In this post, I will provide you with the necessary tools and information you will need to make your first post confidently.

In this post I will show you how to: (also shown in the video above)

  • Use Grammarly (writing editor)
  • Bold text
  • Different sized headers for your paragraphs
  • Line breaks
  • Bulleted lists
  • Turn text into a live hyperlink
  • Insert images
  • Insert videos
  • Center text,images,videos
  • Host images

1 - Grammarly (video reference)

Install Grammarly (FREE ) Works best in Chrome

If you are like me and your grammar and spelling is not the best, then having a way to correct this fast and easy is a huge advantage. For this, we will use a free online assistant called Grammarly.

Grammarly has helped me improve in leaps and bounds and gives me full confidence that everything will be in check when I post. Grammarly is a browser plugin and displays directly in any content box you are typing in so it is very fast to access. Below you can see how easy it is to access the Grammarly editor while I am creating this post.



2 - Bold headers (video reference)

Before we start a paragraph it is good practice to start with a nice bold header. Here we will look at creating different sizes.

To create headers that are nice and bold and different sizes like this:

1.COOL HEADER

2.COOL HEADER

3.COOL HEADER

4.COOL HEADER

We simply add the # symbol in front of the letters but add a space between them like this:

# 1.COOL HEADER
## 2.COOL HEADER
### 3.COOL HEADER
#### 4.COOL HEADER

3 - Line breaks (video reference)

To make a space between each line you simply hit 'enter' on your keyboard.
If you want more space you can use the HTML tags <b>. When you use multiple <b> tags you must add the forward slash / to the last line like this </b>

For example like this:
<b> <b> </b>
You must close that last tag with / otherwise you will make text below bold by default.

Dividers

If you want to make a visual divider for a line break that looks like this:


There are 3 symbols on your keyboard you can use to create a divider

  1. Asterix *
  2. Plus sign +
  3. Underscore _

To create the divider - First hit enter on your keyboard to create a new line. Next, hold the shift key and hit the Asterix 3 times. Make sure you hit the asterisk 3 times *** otherwise the divider won't show.

4 - Bulleted Lists (video reference)

We create a bullet by holding the Shift key and tapping the + symbol. Then tap the space bar and type the text. This is what it looks like raw:
+ First line
And the result:

  • First line

To create a bullet with a subcategory​ we simply don't add the + on the next line like this:
+ First line
Second line

The result is this:

  • First line
    Second line

5 - Turn text into a live hyperlink (video reference)

There are 2 ways to do this, Using Markdown code or Standard HTML.

In this first scenario, we will use Markdown code.
This is the code[link](http://www.google.com)
This the result:
link

This is the HTML code::
<a href="http://www.google.com/" target="_blank">link</a>
This is the same result:
link

Now for some reason, the target="_blank part of the code which is meant to open the link in a new browser window when clicked on , won't work I am unsure why that is.

You can use Markdown and HTML together in a post without any conflicts as far as I know. I personally use both.

6 - Insert images (video reference)

The safest way to ensure your images display :

I will use an example image I have hosted with Amazon.
Use the following HTML code:
<img src=" https://s3-us-west-2.amazonaws.com/cryptoiskey/steemit/firstblog-tutorial/example.jpg" border="0" />

So add this before the url <img src=" and this after the url " border="0" />

And it will display like this:


7 - Insert videos (video reference)

Use Youtube videos.

links works directly in the steemit editor without any additional code like this:
https://youtu.be/gfvrD2jvum4

I have only seen Youtube videos on steemit so this is the easiest format to use.

8 - Center text,images,videos (video reference)

To center our text or images or even the video, all we need to do is use the HTML center tags
<center>content here</center>

For example, let's center the word 'AWESOME'. This is what the code looks like :
<center>AWESOME</center>

AWESOME

To make the text bold add the b tags <center><b>AWESOME</b></center>

AWESOME

With an image is is better practice to add the HTML tags like this <center><img src=" url here " border="0" /></center>

For example, ​let's center the example image I have on Amazon. This is what the code looks like :
<center><img src=" https://s3-us-west-2.amazonaws.com/cryptoiskey/steemit/firstblog-tutorial/example.jpg" border="0" /></center>




Hosting your Images (video reference)

If you want a free easy to use and close to the steemit family I recommend https://www.steemimg.com/Developed by @blueorgy . Another popular site for hosting images is https://imgsafe.org/

Personally i use Amazon S3 (video reference)

There are many web services for hosting images. I have been hosting images online since 2005 and have used public free services as well as my own servers. Now I only use one service that I know is reliable, secure backs up on multiple devices, and delivers fast content to the end user. Amazon S3 is cloud based and you can create an account for free and there will be no costs for the first year.
Amazon S3 works on a tier system so you only pay for what you use. I can tell you it is very cheap. I have a catalog in a virtual world where I host many images, the cost is around 10 - 30 cents per month. I found it far superior to any other service.

for free and there will be no costs for the first year.
Amazon S3 works on a tier system so you only pay for what you use. I can tell you it is very cheap. I have a catalog in a virtual world where I host many images, the cost is around 10 - 30 cents per month. I found it far superior to any other service.
Here is a video on Amazon S3
More information on Amazon S3

Markdown editors:
http://dillinger.io/
https://stackedit.io/

Other useful links

All steemit apps in one place - http://steemtools.com/
Steemit Chat - https://steemit.chat/

H2
H3
H4
3 columns
2 columns
1 column
37 Comments