Basics of Steem (Part 15) : Markdown Styling (24-30)

in hive-183397 •  2 years ago 

INTRO

This is the last part of the Markdown tutorial. In the previous four episodes, I shared the Markdown code with you a total of 23. In the last episode, I shared the Markdown code as well as some HTML code that we won't be able to use on Steemit. However, we can use these HTML codes in different ways to decorate our post elsewhere. In today's post, I am sharing seven more Markdown codes with you. Also, as a bonus, I'm sharing three more important HTML codes with you so that you can keep them in your library.

Today I am sharing following markdown stylings-

  • Pull Left
  • Pull Right
  • Two Column Text
  • Video
  • Break of Line
  • Small Text
  • Strong Text

So, Let's begin
-

STYLE 24: PULL LEFT (IMAGE)

With the help of this code we can bring any text or image to the left of the texted area. When I move the image to the left, the text is on the right. Again if we want to keep the text on the left then the image should be moved to the right.

We should type

<div class="pull-left"><img src="https://cdn.steemitimages.com/DQmTRjyvx8UzxbiYJrocH8xidfBxK37L9ZFLLPHWhXE9HTu/left.jpg" /></div>

>Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.

This is one my favourite words by Rob Siltanen

It will be shown as below-

Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.

This is one my favourite words by Rob Siltanen

STYLE 24: PULL LEFT (TEXT)

We should type

<div class="pull-left">Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes....</div>

It will be shown as below-

Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes....



Line Break Steem.png

STYLE 25: PULL RIGHT (IMAGE)

With the help of this code we can bring any text or image to the left of the texted area. When I move the image to the left, the text is on the right. Again if we want to keep the text on the left then the image should be moved to the right.

We should type

<div class="pull-right"><img src="https://cdn.steemitimages.com/DQmbqV8qWmkAS1oYVu6frfHhNJGK9F7Shf5CjfKG57kdcT9/Right.jpg" /></div>

>Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.

This is one my favourite words by Rob Siltanen

It will be shown as below-

Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.

This is one my favourite words by Rob Siltanen

STYLE 25: PULL RIGHT(TEXT)

We should type

<div class="pull-right">Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes....</div>

It will be shown as below-

Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes....





We can write some writing in opposite of the image by using left or right code.


Line Break Steem.png

STYLE 26: TWO COLUMN TEXT

By using pull left and pull right commands we can create two columns in our writing.

We should type

<div class=pull-left> Tron Fan Club in Left Column </div>
<div class=pull-right> Tron Fan Club in Right Column </div>

It will be shown as below-

Tron Fan Club in Left Column
Tron Fan Club in Right Column



Line Break Steem.png

STYLE 27: VIDEO

We can embed any video by mentioning the source link of the video by following way.

We should type

<iframe width="1499" height="539" src="https://www.youtube.com/embed/h7jkeMsbGdU" frameborder="0" allowfullscreen></iframe>

It will be shown as below-



Line Break Steem.png

STYLE 28: BREAK OF LINE

To end a line we can use this code of break of line.

We should type

The name of our community is <br> Tron Fan Club

It will be shown as below-

The name of our community is
Tron Fan Club



Line Break Steem.png

STYLE 29: VERY SMALL TEXT

To make our text very small, we can use subscript and superscript code together.

We should type

<sub><sup>This is Tron Fan Club Community</sup></sub>

It will be shown as below-

This is Tron Fan Club Community



Line Break Steem.png

STYLE 30: STRONG TEXT

To make our text bold and Strong, we can use the following code.

We should type

<strong>This is our TFC Community.</strong>

It will be shown as below-

This is our TFC Community.



Line Break Steem.png


Line Break Steem.png



THREE BONUS HTML CODE

For Font colour

<p style="color:red;">TRON FAN CLUB is in red colour.</p>
<p style="color:yellow;">TRON FAN CLUB is in yellow colour.</p>
<p style="color:green;">TRON FAN CLUB is in green colour.</p>

For Font Size

<p style="color:green; font-size:20px;">TFC in 20 PX size with green colour</p>
<p style="color:orange; font-size:30px;">TFC in 30 PX size with orange colour</p>

For Font Background Colour

<p style="color:green; font-size:20px; background-color:yellow;">TFC in 20PX size with Green Colour and Yellow Background</p>
<p style="color:magenta; font-size:30px; background-color:blue;">TFC in 30PX size with Magenta Colour and Blue Background.</p>

CONCLUSION

Basically, I am trying to organize the series of tutorials related to Steem Blockchain in such a way that a new user can easily start working on Steem Blockchain by reading all the posts in series without any help. I am trying to share all the details step by step. If new Steemit users can benefit from this series of posts then this post will be worth writing. Thank you

Line Break Steem.png


Footer.png


Line Break Steem.png

Click to Join our Discord Server

GIF Tron Fan Club.gif

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you, friend!
I'm @steem.history, who is steem witness.
Thank you for witnessvoting for me.
image.png
please click it!
image.png
(Go to https://steemit.com/~witnesses and type fbslo at the bottom of the page)

The weight is reduced because of the lack of Voting Power. If you vote for me as a witness, you can get my little vote.

thanks for this information about markdowns ^-^