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

itwithsm (67)in #steemit • 7 years ago (edited)

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

Keep visiting my blog to get more exciting stuff.

#design #post #help #layout

7 years ago in #steemit by itwithsm (67)

$21.84

Sort:

Trending

[-]

nomannomi (61) 7 years ago

It is the best way for using steemit and making good earning . Your coding is beautifull I hope peoples like your post . Peoples will make beautifull posts on steemit from this ways.

$0.00

1 vote

[-]

itwithsm (67) 7 years ago

Thank you so much my friend..

$0.00

[-]

silentscreamer (69) 7 years ago

I just wanted to say that i love that animation at the bottom. Is that something the community can use or would that be frowned upon?

$0.00

[-]

itwithsm (67) 7 years ago

Feel free to use it. :) no problem dear...

$0.00

[-]

chiboyzz (46) 7 years ago

great post bro keep it up. It was very informative but i would still like to get the hang of this markdown styling. It is still very much confusing

$0.00

[-]

itwithsm (67) 7 years ago

Well I thought not to include markdown in my tutorial to keep it unique as there are many tutorials already available on steemit and web. If you have some questions about markdown language, feel free to ask...

$0.00

[-]

liberviarum (50) 7 years ago

Nice info. So i assume all those classes are already built in inside Steemit? Nice.

$0.00

[-]

itwithsm (67) 7 years ago

Yap all these classes are already built in steemit... I searched all the classes already built in steemit and found only 4 classes built for use in steemit.. So, worked around using these classes...

$0.00

1 vote

[-]

hoschitrooper (54) 7 years ago

nice post...maybe ill try it next time... to change a thing :D

$0.00

[-]

itwithsm (67) 7 years ago

Thank you so much..

$0.00

[-]

ptcmyanmar (58) 7 years ago

can I translate this to burmese language.

$0.00

[-]

itwithsm (67) 7 years ago

Check your discord DM my friend... I have sent the procedure to your chat.. :)

$0.00

[-]

techslut (70) 7 years ago

Useful posting cheatsheet to have around. Resteemed so I never lose it. Thank you!

$0.00

[-]

itwithsm (67) 7 years ago

Thanks for the complement my friend...

$0.00

[-]

thinkingishard (39) 7 years ago

how the heck do I save a post so I can come back to this when I know I will need it! .... another addition to the favorites tab I guess ....

$0.00

[-]

itwithsm (67) 7 years ago

You may save its link in any text editor.. Or Resteemit and it will stay on your profile and you will be able to find it anytime you want....

$0.00

[-]

thinkingishard (39) 7 years ago

good point, resteem it is, I am new to the platform and this is a great no nonsense post on how to easily make posts look better, really appreciate it

$0.00

[-]

itwithsm (67) 7 years ago

Thank you so much for the appreciation...

$0.00

[-]

laxam (57) 7 years ago

Thanks to you I saw it in my feed as well, so thanks for resteeming it! ;)
Great post, @itwithsm

$0.00

[-]

itwithsm (67) 7 years ago

You welcome dear.

$0.00

[-]

citizenzero (56) 7 years ago

Excellent tutorial. Thanks for sharing. I'm hopeless when it comes to online formatting. This has given me lots of new information to help make my posts more interesting. Upvoted, Resteemed and following now.

$0.00

[-]