Formatting tips by Sara Jarvie

avatar

Steem has been a wonderful place for me to express my creativity. As a photographer I enjoy the pursuit of taking great pictures. With more knowledge of formatting I have been able to make creative posts too!

In my recent Share My World: Sibling trip a few people commented on how much they enjoyed the formatting, so I am doing a little tutorial on how I format my blog posts.

Things to note:
-My posts all have original photos and so highlighting those photos is a top priority for me.
-I have been using @steempeak since it's inception. I enjoy the platform and am most impressed with @jarvie and @asgarth and how they are continually improving the site! They really want to make Steem a good experience for everyone.
-Smugmug is where I store and get the info for my pictures.

Single photo

Most people post single pictures so I will start here. There are basically two ways I put in single pictures.

Option 1
With single horizontal photo and I make sure it is large enough to fit across the width of the screen.

image.png

Option 2
For vertical pictures, I make them a bit small and center them on the page.



Simon Gudgeon, Leaf Spirit

image.png

<center>picture</center> You can copy the text that is highlight like this throughout the post to use in your own posts.

Additional Formatting info
I also added information to this picture and italicized it. Which can be done two ways
a. Using the I on the formatting bar at the top of the pageimage.png
b. The method I prefer and use most regularly is to highlight the text then click control "I" which will also put the * asterisks around the words

Two photos

It is nice to put two photos side by side and give a little more context.

Option 1. Put two horizontal pictures next to each other

image.png

image.png

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

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

Additional Formatting info
You will see that the word Florence is in bold and that is done by putting two asterisks (**) on either side of the word(s).

There are two ways to bold words
As with italicizing a word, you can use the bar at the top of the page
image.png

The method I prefer is to highlight the text then click control "B" which will also put the ** asterisks around the words

Option 2. Put two vertical pictures next to each other

image.png

image.png

---------------------------------------------------------------------------------------------------

Additional Formatting info
The dashed line very important. This line stops the rest of the post from being pulled to the right or left.

Option 3.
Words, a vertical and a horizontal picture

image.png

image.png

Additional Formatting info
Using the # will make your words bigger and bolder. For this section I used 4 # marks or Header 4 in the bar at the top of Steempeak.com

Also, very important to have space after the top line of the code and before you start writing, as you can see in the example.

Three photos

I enjoy putting three pictures together and use this option often. It takes the most work and I think looks the best!

Option 1. Put three pictures side by side

image.png

Step 1: Click on the grid on the formatting bar at the top of the page.
image.png

Step 2: Make sure your grid looks like this

image.png

Step 3: Replace the column1, column2 and column3 with picture locations
Step 4: Delete the row that has the content 1, content 2 and content 3

image.png

|column1|column2|column3|
|-|-|-|

Option 2. Put three pictures in a grouping with one vertical and two horizontal

image.png

Step 1. Use this code

image.png

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

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

Step 2. Depending on where you want the vertical and horizontal pictures to be put the picture code into that column. In the picture above you can see I have one vertical on the left and two horizontal on the right.

image.png

Additional Formatting info
Again the dashed line is very important. This line stops the rest of the post from being pulled to the right or left.

Six pictures

I really enjoy telling a story with six pictures all together.

image.png

Step 1: Click on the grid on the formatting bar at the top of the page.
image.png

Step 2: Make sure your grid looks like this

image.png

|column1|column2|column3|
|-|-|-|
|content1|content2|content3|

Step 3: Replace the column1, column2 and column3 with picture locations
Step 4: Replace the content 1, content 2 and content 3 with pictures locations

image.png

Two of my favorite things about Steempeak are Templates and Drafts.

image.png

I have a master template that has all the markdown codes that I use regularly. I can start a post using that template and it will stay in my drafts until I am ready to post it. It is fun to mix and match different codes to make interesting and visually appealing content.

My master template

image.png

Conclusion

And there you have a nice tutorial on how to be more creative with your posts. Thanks to @r00sj3 for inspiring me to explore formatting with your great posts early in my time on Steem. I recently found @abigail-dantes blog and it is formatted so nicely. I would also love to hear some great formatting tips from others.



0
0
0.000
58 comments
avatar

Oh! Thank you @sjarvie5, that compliment coming from you does mean I am doing something right with my post format :) These tips are incredible. I particularly like the 'photo grouping' one.

As for me, because my posts are more text than image based, I am always conscious of breaking the writing with tidy headings and paragraphs. Of course, beautiful images (which I mostly get from pixabay) give that extra appeal and make the whole material more inviting for the readers to engage with it.

At least I think so :)

Wish you a lovely Saturday evening.
Bye for now!

0
0
0.000
avatar
(Edited)

You are welcome. Your posts really are clean and beautiful. They make them so easy to read. How did you get the color line break? That really caught my eye.

I recently went back and read some of your older posts and keep thinking about Mr. Bales. Great story!

0
0
0.000
avatar
(Edited)

The red line is an image @sjarvie5 :)

Here it is:

redline.png

I have a grey one as well, which I use less often:

grey line.png

It is very kind of you to take the time to browse through my blog. I appreciate it very much.
Mr. Bales is one of my favorites as well! :D

Take care <3

0
0
0.000
avatar

Thanks Abigail. I look forward to reading more of your stories. I am looking into doing on online short story writing class. I have wanted to write for some times and feel like now is a good time.

0
0
0.000
avatar

Super stuff. The table of images is cool.

The one thing i like to use below some of my images is the <sup> or <sub> tags. (subscript and superscript)

For example <sub>this</sub> produces slightly smaller letters aligned with the bottom of the line.

<sup>This</sup> produces slightly smaller letters aligned with the top of the line

You can nest them to make stuff impossibletoread

Example using your image


A slightly smaller description

0
0
0.000
avatar

Awesome. Thanks so much. That is one thing that I saw that I was wondering how it was done. Yay.

0
0
0.000
avatar

Nice. I didn't realize you could nest subscript & superscript tags!

Very Cool!

0
0
0.000
avatar

I suck at formatting and I have not bothered to learn any of this. This is seriously super helpful and I’ll save this post somewhere so I can have a look see when ever I need to. Great work!

0
0
0.000
avatar

That☝️

I only used to use the option about center

0
0
0.000
avatar

Just copy her text and add them to SNIPPETS in steempeak then you can have it easily at your disposal. I think that's what I'm gonna do.

0
0
0.000
avatar

This is fab!! Resteemed and bookmarking for future reference!!
You are awesome!

0
0
0.000
avatar

Thanks @mumma-monza! I also really like that steempeak allows you to bookmark favorite posts! I saw your posts and am excited for you and your son!

0
0
0.000
avatar

PRO TIP: SAVE THE TEXT IN SNIPPETS

This is what i'm gonna do... I'm gonna take her code formatting ideas and save them to SteemPeak snippets.
image.png

In fact maybe these should be automatic snippets on steempeak @asgarth?

  • Centered Image
  • 3 Image
  • 1 Vertical Left - 2 Horizontal Right
  • 2 Horizontal Left - 1 Vertical Right
  • Side by side
  • Side by side with text
0
0
0.000
avatar

Think you’ll make a lot of people very happy with that option👏

Posted using Partiko iOS

0
0
0.000
avatar

Great tips... and it is good posts like these are made to remind new users how to format... a good looking post is IMPORTANT!

as per comment above also good for sources eg

Here is my proof 1

Here is my proof <sup>[1](linkhere)</Sup>

Posted using Partiko Android

0
0
0.000
avatar

Great writeup for formatting posts! Think I’m gonna point people to your post in the future instead of explaining how i did the trick with pictures in my posts.😎

Posted using Partiko iOS

0
0
0.000
avatar

Congratulations @sjarvie5! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You received more than 1000 as payout for your posts. Your next target is to reach a total payout of 2000

You can view your badges on your Steem Board and compare to others on the Steem Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Do not miss the last post from @steemitboard:

The new SteemFest⁴ badge is ready
Vote for @Steemitboard as a witness to get one more award and increased upvotes!
0
0
0.000
avatar

Wow, thank you thank you very much. i am going to try this soon.

0
0
0.000
avatar

Gracias por la publicación, soy relativamente nueva en la comunidad de steemit y deseo mejorar la calidad de mis publicaciones. Leeré y releeré tu publicación pues tienes excelentes consejos.

0
0
0.000
avatar

This is amazing! Thank you for this tutorial, @sjarvie5! I had basically resigned myself to just having ginormous images breaking up paragraphs, so I’m stoked to have this resource to have more flexibility with formatting. ✨

!BEER

0
0
0.000
avatar

I am so glad you liked it @oheyo. Looking forward to seeing some of your posts using the new formatting tools!

0
0
0.000
avatar

ilovethispostmeirl39360084.png
Thanks for the great content!
I have bookmarked this along with a few others.

DUDE. I totally didn't know I could just click to get the table!!! OMG! I have a little notepad with things like that I can copy/paste quickly.... but this is quicker. :)

0
0
0.000
avatar
(Edited)

Nice tutorial but markdown is pretty limited imho. Putting image in a table is weird. I made a lot of posts and spent a lot of time in format before, to make my posts look better, but now I just simply post on WP and mostly of time gallery won't show on steem, it's been a headache, just too difficult to use.

0
0
0.000
avatar

Thanks for your comment. I guess I have gotten used to using the codes and with the templates in steempeak it hasn't been too much of a problem for me.

0
0
0.000
avatar

This is pretty helpful. I am familiar with creating grids w markdown buy it hasn't occurred to me to use them the way you demonstrated.

Neither have I considered "templatizing" my blog format. (If it's not a word, it is now!) That could be a real timesaver. Thanks!

I know it's a bit late in the game but K resteemed anyway as I felt the info could be helpful.

0
0
0.000
avatar

Thanks for the comment and resteem. Yes, if other will see it and find some useful tips that is great!

0
0
0.000
avatar

I use my photos on all posts so this post is going to help how and where I post my images in a post, thanks.

0
0
0.000
avatar

You are welcome glad you found the post.

0
0
0.000
avatar

After so much time I still come back to refresh my memory. Excellent post Sara :)
@traisto you should read it!

0
0
0.000
avatar

Thanks Stefanos. It was a long time ago. I think I should make another post so some of the new people coming in can get the info too.

0
0
0.000
avatar

Definitely! This kind of info is precious!

0
0
0.000
avatar

Sara, this is AMAZING info! A new post on this sounds awesome!!!
Thanks @fotostef! I even tried some of these in the last post today ;)

0
0
0.000