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

in #steemit8 years ago




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/

Sort:  

Thanks buddy, always good to have tips on doing things better! Keep Steemin'!

Your welcome:)

Thanks for the Grammarly tip! I didn't realize they had a chrome app.

It is a great little app. I might invest in the premium version not sure yet, it is quite expensive.

Thank you for putting this together. This should really help newbies to blogging.
Great job!

Steem on,
Mike

Your welcome. Hopefully it helps a few people:)

Whoa, thanks for all of this. We need all the help we can get to learn the ins and outs of this platform.

Very useful information, book mark it right now!

Yup a good go to if you forget things:)

When I saw how it was set up, I put it in my saved file to refer back to. Nicely organized.

Thanks,

I tried to make it as painless as possible to read and understand. Some people like to read a tutorial and some like to watch the video, so wanted to cover all bases.

Well done with this well explained guide!

Thankyou so much @cryptoiskey i hate having to ask dumb questions

Yeah i have the same problem. Didn't blog or even write at all before steemit, so no experience really with anything. I am sure their is many on steemit that are in the same situation, it is all new to them.:)

These are things that I had no idea about 3 weeks ago.

Thanks for helping everyone become more professional @cryptoiskey!

I just wanted to point out. I stated that you can use Markdown and HTML without any issues. I tried to remove that sentence but it won't allow me to edit the post it throws an error. Anyway, the ​point being I don't believe now they do work that well together.

Top notch stuff. I wish I had seen this when I started out!!

Thanks mate appreciate the comment:)

I thought this was a great post, so I linked it in my newest post now that I have reached more than 100 followers. I hope you don't mind, and THANKS.

Thanks for the mention and congrats on the 100:) @papa-pepper

THANK YOU, AND YOU'RE WELCOME.

Grammarly is useful

other information have a look to Markdown doc
https://guides.github.com/features/mastering-markdown/

Thanks for the post. It's sad this was so ignored.

np.. I guess you lose some you win some mate:) @trev

@cryptoiskey this video was awesome! There were two things I still did not know how to do and you address them here, quickly and easily. This post deserves way more votes and $$$......and I know what that feels like so wanted to say great post. All newbies should watch this.

Unfortunately whales already know this stuff and those are the votes you need....hopefully that will balance out as the community grows!

Thanks for posting this!

Really nice post bro and I understand where you coming from I come from the same background but check this I can't download grammarly because I already have grammarly however what I don't have is a laptop or a tablet I have to do everything on Android and grammarly doesn't have an app yet so yeah my spelling sucks and I guess it's just going to suck for a while

excellent post, thank you

Very useful post! Thanks a lot.

Thanks this is very helpful