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.

steemit design post help layout

7 years ago by itwithsm (67)

$21.84

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:

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

[-]

itwithsm (67) · 7 years ago

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

$0.00

[-]

soundwavesphoton (66) · 7 years ago

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

$0.00

[-]

itwithsm (67) · 7 years ago

Thank you so much my friend...

$0.00

[-]

bhop42moro (46) · 7 years ago

Very valuable. Thank you.

$0.00

[-]

itwithsm (67) · 7 years ago

Thanks and you welcome...

$0.00

[-]

ankapolo (59) · 7 years ago (edited)

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.

$0.00

[-]

itwithsm (67) · 7 years ago

Thank you so much... :D

$0.00

[-]

arhaynez (47) · 7 years ago

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

$0.00

[-]

itwithsm (67) · 7 years ago

You welcome dear...

$0.00

[-]

sillentkiller (50) · 7 years ago

Impressive !! already bookmarked it 👌
Thanks For sharing 🤗

$0.00

[-]

itwithsm (67) · 7 years ago

Thank you and you welcome....

$0.00

[-]

nationall (55) · 7 years ago

thnx

$0.00

[-]

itwithsm (67) · 7 years ago

you welcome...

$0.00

[-]

simplymike (67) · 7 years ago (edited)

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)

$0.00

[-]

itwithsm (67) · 7 years ago

Thank you so much..

$0.00

[-]

yash628 (33) · 7 years ago

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

$0.00

[-]

itwithsm (67) · 7 years ago

Thank you so much..

$0.00

[-]

abinz (25) · 7 years ago

Thank you for the information and the link

$0.00

[-]

itwithsm (67) · 7 years ago

You welcome dear...

$0.00

[-]

robertandrew (67) · 7 years ago

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

$0.00

[-]

itwithsm (67) · 7 years ago

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

$0.00

1 vote

[-]

craigtransforms (58) · 7 years ago

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!

$0.00

[-]

itwithsm (67) · 7 years ago

You welcome dear...

$0.00

[-]

oadissin (73) · 7 years ago

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?

$0.00

[-]

itwithsm (67) · 7 years ago

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

$0.00

[-]

oadissin (73) · 7 years ago

Thank you

$0.00

[-]

brandonsadventur (52) · 7 years ago

This is excellent! Thank you!

$0.00

[-]

itwithsm (67) · 7 years ago

Thank you and you are welcome dear...

$0.00

[-]

pkalmik (49) · 7 years ago

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.

$0.00

[-]

itwithsm (67) · 7 years ago

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

$0.00

[-]

juzmen-juvy18 (46) · 7 years ago

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

$0.00

[-]

itwithsm (67) · 7 years ago

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

$0.00

[-]

vjbasil (55) · 7 years ago

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

$0.00

[-]

itwithsm (67) · 7 years ago

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

$0.00

[-]

cjack28091 (25) · 7 years ago

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!

$0.00

[-]

itwithsm (67) · 7 years ago

Thank you so much...

$0.00

[-]

simplymike (67) · 7 years ago

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

$0.00

[-]

itwithsm (67) · 7 years ago

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

$0.00

[-]

sairakiyani (36) · 7 years ago

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 .

$0.00

[-]

itwithsm (67) · 7 years ago

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

$0.00

[-]

sairakiyani (36) · 7 years ago

My pleasure .I'll contact you

$0.00

[-]

hazelwink (50) · 7 years ago

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.

$0.00

[-]

itwithsm (67) · 7 years ago

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

$0.00

[-]

cutemachine (62) · 7 years ago

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

$0.00

[-]

itwithsm (67) · 7 years ago

Thanks and you welcome dear...

$0.00