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

[itwithsm]

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:

1. Using Different Alignments in a post
2. Creating Two Column Posts
3. Creating Four Column Posts
4. Creating Eight Column Posts
5. Adjusting images in different ways in a post
6. Display an image in different sizes and patterns without changing actual size.
7. Adding open in full size onclick capability to an image
8. 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.

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.}

^{Click to open in full size.}

^{Click to open in full size.}

^{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.

Comments

[nomannomi]

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.

[itwithsm]

Thank you so much my friend..

[silentscreamer]

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?

[itwithsm]

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

[yash628]

Yes,It is very nice post.
I learn Many important things from this post.
I will improve my post by this suggestion.

[itwithsm]

Thank you so much..

[liberviarum]

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

[itwithsm]

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...

[hoschitrooper]

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

[itwithsm]

Thank you so much..

[ptcmyanmar]

can I translate this to burmese language.

[itwithsm]

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

[techslut]

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

[itwithsm]

Thanks for the complement my friend...

[thinkingishard]

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 ....

[itwithsm]

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....

[thinkingishard]

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

[itwithsm]

Thank you so much for the appreciation...

[laxam]

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

[itwithsm]

You welcome dear.

[citizenzero]

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.

[itwithsm]

Thank you so much... Your appreciation means a lot to me...

[soundwavesphoton]

Excellent post. I'm bookmarking it to use as a future resource. Very helpful, much thanks.

[itwithsm]

Thank you so much my friend...

[bhop42moro]

Very valuable. Thank you.

[itwithsm]

Thanks and you welcome...

[ankapolo]

thank you for making this! I see a lot of work has been put into this! resteemed, upvoted and i'm sending you a mental nugget, for all the effort.

[itwithsm]

Thank you so much... :D

[arhaynez]

Just the thing I was looking for. Thanks for sharing @itwithsm

[itwithsm]

You welcome dear...

[sillentkiller]

Impressive !! already bookmarked it 👌
Thanks For sharing 🤗

[itwithsm]

Thank you and you welcome....

[nationall]

thnx

[itwithsm]

you welcome...

[simplymike]

Great post. You point out things I didn't know were possible with markdown, like creating the image gallery and the full size onclick capability. I'm going to keep this post close, and try out a couple of things in my next posts :0)

[itwithsm]

Thank you so much..

[cutemachine]

The image onclick trick is a nice one. Thanks​ for the tutorial.

[itwithsm]

Thanks and you welcome dear...

[abinz]

Thank you for the information and the link

[itwithsm]

You welcome dear...

[robertandrew]

Thank you @itwithsm ! I will have to read over this a few times to let it sink in. But very helpful, indeed

[itwithsm]

You welcome... You don't need to read it again and again its ready to use code, just copy the code and replace the text with your own.. :)

[craigtransforms]

Thank you for this. Ive dealved into the code a little such as making text bold and creating bullets lists etc. Also making the dtube images larger. But this I did not know, I will be bookmarking and coming back for reference, thanks again!

[itwithsm]

You welcome dear...

[oadissin]

peace
thank you for the post
I know nothing about programming. So is there an easy way to edit the text of our post without dealing with all these codes letters?

[itwithsm]

Well you don't need to know much programming dear. Just copy the code given in the post and replace the text with your own.. :)

[oadissin]

Thank you

[brandonsadventur]

This is excellent! Thank you!

[itwithsm]

Thank you and you are welcome dear...

[pkalmik]

This is helpful information for all steemian. thanks for sharing. I have a question. Why we can't use CSS here.? If we use Css could have been better sorted.

[itwithsm]

markdown and steemit doesn't allow CSS and javascript usage in post but it would be awesome if they allow using CSS at least.

[juzmen-juvy18]

your post is really helpful. keep on posting of helpful post @itwithsm

[itwithsm]

Thank you and I will keep posting some more helpful materials surely..

[vjbasil]

This is very informative!
Thanks.

What I would like to see though is a better user interface for the whole of Steemit.
Including something like the tiny editors you see in most CMS systems; actually a sort of micro WYSIWYG HTML editor.

still a fantastic contribution; I will resteem it to my blog!

@vjbasil

Besides it would be an improvement if Steemit becomes more than a blog system of sorts: I would like to see a feature comparible with google+ communities

[itwithsm]

Yeah at least it should allow some css styling in the post editor.. But it doesn't allow/render any in post CSS setting...

[cjack28091]

Thanks for the awesome post! I am new to the steemit community and trying to figure out my way around. I want to optimize my ability to produce quality content and this really helps. Keep up the great work and I will continue supporting!

[itwithsm]

Thank you so much...

[simplymike]

@itwithsm Where do you upload your images? I tried https://steemitimages.com/, but the site won't open

[itwithsm]

I upload the images in steemit markdown right away and it works fine for me...

[sairakiyani]

Wow what a fantastic informative post .
I want to know something more I will send you message on messenger.
Tell us about good comments .
Its helps me a lot. I needed this post but I am little bit late to saw this post.
Thanks @abdulmanan bro.
Keep it up big bro. You doing a great job .

[itwithsm]

Thanks dear! I am on facebook.. you may ask...

[sairakiyani]

My pleasure .I'll contact you

[hazelwink]

Thank you for this one @itwithsm. As a newbie here in steemit, i really need these types of posts. I've liked it very much and upvoted it it's very helpful.

[itwithsm]

You welcome and I will keep on posting more helpful content...

[chiboyzz]

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

[itwithsm]

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...