Making Steemit Posts in different beautiful ways

Hi Steemians!
Hope you all are fine and having fun on steemit. Today, I am going to tell you how you can make beautiful posts in different ways.

Presentation is most important thing in a post.

As we have seen on many occasions that people say, "Food has to look good than taste". Same thing implies to your post, If a post looks good and you have good contents in a post, you will more likely get good post revenues. A post having good contents but bad look may not get much or reader may not be able to read the post so easily.

So, today I am going to tell you different ways to create a good eye catching post. We will discuss following things in this post:

Using Different Alignments in a post
Creating Two Column Posts
Creating Four Column Posts
Creating Eight Column Posts
Adjusting images in different ways in a post
Display an image in different sizes and patterns without changing actual size.
Adding open in full size onclick capability to an image
Making an image gallery

As you already know "Markdown Styling Guide" and we already have many guides on "Markdown Styling". So, I am going to touch different ways to beautify your posts.

Using Different Alignments in a post

Alignments are really important in a post. We should know how to align and decide which alignment to choose for every block of the post. So, here we will discuss 4 ways of aligning different parts of a post (Left Alignment, Center Alignment, Right Alignment, Justified Alignment) and we can't use normal CSS styling or HTML techniques to align or design a post. That's why we will stick to the ways steemit markdown editor allows.

Left Alignment

Left alignment is the default alignment scheme in a post. So, we don't need any special effort to align a post left.

Center Alignment:

To center align text in a part of post we use a div with class "text-center".
Here is how a center aligned part looks like:

This is center aligned part. This is center aligned part. This is center aligned part. This is center aligned part. This is center aligned part. This is center aligned part. This is center aligned part. This is center aligned part.

Here is the full code for center alignment:

<div class="text-center">
This is center aligned part. This is center aligned part. This is center aligned part. This is center aligned part. This is center aligned part. This is center aligned part. This is center aligned part. This is center aligned part. 
</div>

Right Alignment:

To right align text in a part of post we use a div with class "text-right".
Here is how a right aligned part looks like:

This is right aligned part. This is right aligned part. This is right aligned part. This is right aligned part. This is right aligned part. This is right aligned part. This is right aligned part. This is right aligned part.

Here is the full code for center alignment:

<div class="text-right">
This is right aligned part. This is right aligned part. This is right aligned part. This is right aligned part. This is right aligned part. This is right aligned part. This is right aligned part. This is right aligned part. 
</div>

Justified Alignment:

To Justified align text in a part of post we use a div with class "text-justify".
Here is how a justify aligned part looks like:

This is justify aligned part. This is justify aligned part. This is justify aligned part. This is justify aligned part. This is justify aligned part. This is justify aligned part. This is justify aligned part. This is justify aligned part.

Here is the full code for center alignment:

<div class="text-justify">
This is justify aligned part. This is justify aligned part. This is justify aligned part. This is justify aligned part. This is justify aligned part. This is justify aligned part. This is justify aligned part. This is justify aligned part. 
</div>

Creating a Two Column Post:

To make a two column post we use two divs with "pull-left" class in first div and "pull-right" class in second div.
Here is how a two column part of post looks like:

The text for first column goes here. The text for first column goes here. The text for first column goes here. The text for first column goes here.

The text for second column goes here. The text for second column goes here. The text for second column goes here. The text for second column goes here.

Here is the code for a two column part of a post:

<div class="pull-left">

![aaa.png](https://steemitimages.com/DQmPdgjuLRksRVwqLeBuiHQWbJumfieaLk2MjobJwuNmLoV/aaa.png)
The text for first column goes here. The text for first column goes here. The text for first column goes here. The text for first column goes here.
</div>
<div class="pull-right">

![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)
The text for second column goes here. The text for second column goes here. The text for second column goes here. The text for second column goes here. 
</div>

Creating a Four Column Post:

To make a four column post we use two divs with "pull-left" class in first div and "pull-right" class in second div in each div we created in a two column part.
Here is how a Four Column part of a post looks like:

To make it even better we may apply justified alignment to this part.

First column text goes here. First column text goes here. First column text goes here. First column text goes here. First column text goes here.

Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here.

Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here.

Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here.

Here is how a Four column part with justified alignment looks like:

First column text goes here. First column text goes here. First column text goes here. First column text goes here. First column text goes here.

Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here.

Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here.

Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here.

Here is the code for a Four column part of a post:


<div class="pull-left">
<div class="pull-left">
First column text goes here. First column text goes here. First column text goes here. First column text goes here. First column text goes here.
</div>
<div class="pull-right">
Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here.
</div>
</div>
<div class="pull-right">
<div class="pull-left">
Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here.
</div>
<div class="pull-right">
Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here.
</div>
</div>

Here is the code for a Four column part of a post with justified alignment:

<div class="text-justify">
<div class="pull-left">
<div class="pull-left">
First column text goes here. First column text goes here. First column text goes here. First column text goes here. First column text goes here.
</div>
<div class="pull-right">
Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here.
</div>
</div>
<div class="pull-right">
<div class="pull-left">
Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here.
</div>
<div class="pull-right">
Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here.
</div>
</div>
</div>

Adjusting Images in different ways in a Post:

Adjusting Image with 100% width of a Post:

We don't need any special thing to adjust an image to 100% width of a post as it is done by default in a post.

Adjusting Image with 50% width of a Post:

To adjust Image with 50% with to a post we just do the things we did in two column post.

Here is how an image looks like when its adjusted in a 50% width with justified alignment text.

This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image.

Here is the code to adjust an image in 50% width:

<div class="text-justify">
<div class="pull-left">

![aaa.png](https://steemitimages.com/DQmPdgjuLRksRVwqLeBuiHQWbJumfieaLk2MjobJwuNmLoV/aaa.png)

</div>
<div class="pull-right">
</div>
This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image. This is the text of post adjusted with 50% width image.
</div>

Adjusting Image with 25% width of a Post:

To adjust Image with 25% with to a post we just do the things we did in four column post with a bit difference in code.

Here is how an image looks like when its adjusted in a 25% width with justified alignment text.

This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image.

Here is the code to adjust an image in 25% width:

<div class="text-justify">
<div class="pull-left">
<div class="pull-left">

![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)
</div>
This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image.
<div class="pull-right">
</div>

</div>
<div class="pull-right">
<div class="pull-left">

![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)
</div>
This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image. This is the text of post adjusted with 25% width image.
<div class="pull-right">
</div>
</div>

</div>

Adding open in full size onclick capability to an image

To add open in full size onclick capability to an image, we just use the markdown link code to with the image code. Here is how the example code looks like:

[(drop image)](  (paste image url) )

Now here is the working example:

^{This image will open in full size if you click on it.}

To make it even better I have added "sup" tag with a message to open the image and a center tag to keep it in center of a page. Here is the code for this:

<center>
[![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)
<sup> *This image will open in full size if you click on it.*</sup>
</center>

Making an image gallery:

Making an image gallery in a post is very easy now. You just have to apply the knowledge you got in "creating columns in a post". So, we will just use our column making skills to create photo gallery in a post. You may create a two column, four column, eight column or sixteen column according to your needs. Just follow the column making skills and onclick open full image capabilities.
Here is how a four column image gallery looks like:

^{Click to open in full size.}

Try to keep the size of images same to keep it tidy

Here is the code for image gallery:

<div class="pull-left">
<div class="pull-left">

<center>
[![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)
<sup> *Click to open in full size.*</sup>
</center>
</div>
<div class="pull-right">

<center>
[![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)
<sup> *Click to open in full size.*</sup>
</center>
</div>
</div>
<div class="pull-right">
<div class="pull-left">

<center>
[![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)
<sup> *Click to open in full size.*</sup>
</center>
</div>
<div class="pull-right">

<center>
[![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)
<sup> *Click to open in full size.*</sup>
</center>
</div>
</div>

I hope you all liked my work. Thanks for stopping by.

Join our Discord channel for further queries and details:
https://discord.gg/QEv6HGT

Who we are?

Company Name: ITwithSM
Profile: We design and develop web/desktop/android/apple applications.
Future Plans: Drive some Investment to steemit from our costumers but before that steemit needs some cleaning (Stopping Spammers) and some good practices (Stop foolish flag wars between whales).
Website: www.itwithsm.com

Making Steemit Posts in different beautiful ways | Beautify Your Steemit Posts

Presentation is most important thing in a post.

As you already know "Markdown Styling Guide" and we already have many guides on "Markdown Styling". So, I am going to touch different ways to beautify your posts.

Using Different Alignments in a post

Left Alignment

Center Alignment:

Right Alignment:

Justified Alignment:

Creating a Two Column Post:

Creating a Four Column Post:

Adjusting Images in different ways in a Post:

Adjusting Image with 100% width of a Post:

Adjusting Image with 50% width of a Post:

Adjusting Image with 25% width of a Post:

Adding open in full size onclick capability to an image

Making an image gallery:

Who we are?

Keep visiting my blog to get more exciting stuff.