Formatting tips by Sara Jarvie

in tutorial •  5 years ago 

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.

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:  

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

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

Posted using Partiko iOS

That would be so great if @asgarth could add them to the bar!

This is totes sexy.

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

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

Very Cool!

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

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

Thanks so much @guchtere

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!

  ·  5 years ago (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!

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

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.

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

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

Wow, such a good guide for photography users. Great work 👍🏻

Posted using Partiko iOS

Thanks @anaerwu

Thank you for these tips @sjarvie5, this is going to be sooo useful, bookmarking it for future reference!

Posted using Partiko Android

Thanks @lizelle, so glad you like it!

you should get a medal for this :D i suck in formating, and this will be a great help

Thanks @bil.prag!

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

@putu300 you are welcome. I am so glad you are going to use it soon.

This is so great. Thanks for telling me. I enjoyed the post about the fist market too!

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

thanks so much @riverflows and for posting your proof too!

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.

You are welcome @yineskallovera

Great information and suggestions!

thanks @violetmed

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

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!

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

ha ha thanks @carrieallen!

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!

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.

That is a very smart tip, thank you!

That☝️

I only used to use the option about center

I am so glad you liked it!

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.

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.


This post was shared in the Curation Collective Discord community for curators, and upvoted and resteemed by the @c-squared community account after manual review.
@c-squared runs a community witness. Please consider using one of your witness votes on us here

Thanks

Good post, it's very interesting ...
Regards...

Thanks @sounddam

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!

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.

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



Hey @sjarvie5, here is a little bit of BEER for you. Enjoy it!