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 ![Steemit-big.png](https://steemitimages.com/DQmYie8dwcKuz4mQvh7Ld4LrHarCDtjbEDoxbUoaevt3152/Steemit-big.png) *** ###### 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: ```

``` ###### 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: ```

``` ###### 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: ```

``` ##### 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: ***

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

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

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

``` ##### 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: ```

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 with justified alignment: ```

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.

``` ##### 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. ***

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

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: ```

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

``` ###### 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. ***

![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)

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.

![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)

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

![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)

``` ##### 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: *** [![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png) ^{*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: ``` [![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png) ^{*This image will open in full size if you click on it.*} ``` ###### 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: ***

[![bbb.png](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png)](https://steemitimages.com/DQmNpKVcJ97N6BMQkMS7qAUGaGne8skKaZUktBdqY5VW1CW/bbb.png) ^{*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: ```

``` *** 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. ![IMG_20160105_115906.jpg](https://steemit-production-imageproxy-upload.s3.amazonaws.com/DQmY51imq4fuAUAtgT7hxPhpWQV193EmWgSVw9YbMXV5Dxu)

citizenzero