STEEMIT GUIDE // CODES HTML HELP

in #blog7 years ago

5.jpg

divisor.png

As I can see many people is asking for the codes I use to made cute post, I'm leaving them here in a way of help the community and support the new steemians. Also I'm making a Google doc in ENGLISH and in SPANISH (I'm making the post soon) so everyone can have them anytime they need.

As you all know what HTML and Markdown is I'm just leaving the codes without more words if you have any doub or question feel free to comment or contact me if you need to.

divisor.png

Space between paragraphs

A simple hashtag with spacing above and below.

#

divisor.png

To organize the text with different points

A script with space after it.

Example: (space paragraph script) -List of Thing To DO in 2018

Will look like:

  • List of Thing To DO in 2018

divisor.png

To justify text

<div class="text-justify">Paragraph here.</div>

And it will look like my texts in the beggining super cute and easy to read with no space in the endings in each line that could make the paragraph look a bit weird.

divisor.png

To center

<p><center>The word or paragraph that you want to center.</center></p>

It would like something like this.

divisor.png

To create quotes

> Just that and a space

It would look like this.

divisor.png

To create hyperlinks

Example: [The name of the Link] (The link)

[Jokossita’s Blog](https://steemit.com/jokossita)

Jokossita’s Blog

divisor.png

To write in bold

2 underscores or asterisks are placed at the beginning and end of the phrase or word to be highlighted.

Example: **bold** __bold__

It would be: bold in both cases

divisor.png

To write in Italics

Same as bold but only an asterisk or underscore would be used.

Example: *italics* _italics_

It would be: italics in both cases also

divisor.png

To write in bold Italics

Same as bold but instead of two asterisk or underscore would be used 3.

Example: ***italic bold*** ___italic bold___

It would be: italic and bold

divisor.png

To write in crossed out

Same as the others but only two things of this: ~ would be used.

Example: ~~crossed out~~

It would be: crossed out

divisor.png

To write in a block

I could made all this grey blocks using simple ` 3 times each side

Example: ```Hey everyone```

It would look like: Hey everyone

divisor.png

To write in a block and make list

| Post | Day |
| --------|---------|
| Travel | Jan 3 |
| Food | Dec 29 |

Its pretty easy and it would look fantastic like this:

PostDay
TravelJan 3
FoodDec 29

You can make more celds and go crazy with the code just need some imagination.

divisor.png

The text can be structured with headers:

You put a hashtag and a space between the tittle or the subtitle

H1 in each one I just use a # hashtag

H2 or ## two in this one and this way I go

H3 using more hashtags ###

H4 making subtitles ####

you can also use 6 hashtags to make it even smaller

divisor.png

Images

To place the image on the right

<div class="text-justify"><div class="pull-right">the image</div>

To place the image on the left

<div class="text-justify"><div class="pull-left">the image</div>

divisor.png

To make your text even prettier

To pull your text to the rigth:

Example: <div class="text-right">Your text here.</div>

And tadaaa this this code is working because my text is on the right.

If you want the text to the left just change the word "right" to "left"

To made two columns of text:

<div class="pull-left">Text of first column</div>
<div class="pull-right">Text of the second column</div>

Text of the first column We can put images here also if we want but I can tell this is a cute way to write in two languages at the same time
Text for the second column would go here, so we can see how it's organized easily and both columns make a cute post

divisor.png

If you have more and want to share codes let me know, this way we all can help each other to improve. I'm leaving in each postthe google docs so you can find them easily and use it anytime you want.

divisor.png

If you are new in steemit you can use my guides of HTML

AYUDAS EN HTML PARA STEEMIT

STEEMIT CODES HTML HELP

If you join Steem Follower Let me know in the comments to help each other.

You can read my lastest posts:

Happy New Year !!! Real life stories.

DAY 2 !! Almost crazy!! Seven day Dtube challenge

DAY 1 !! Driiving me CRAZY !! Seven day Dtube challenge

Sort:  

See that I'm right :), you explained well how to do it. Good job!

You always make me smile haha thanks <3

Wow, excelente, gracias @jokossita

Siempre a la orden, pronto publicare lo mismo en español!

DO u know i recently googled html guides for my steemit post? it was frustrating because to resize my picture in here. and for a newbie who has no experience of coding? it was so bad.....
ThX for a good post, im not just upvoting this, i will bookmark too. =)

Haha I can tell I was there in the same position as you when I started but luckily I got some friends helping me out, you can also take the google doc in the end of the post. Glad that I could make something good for the community :D

Excellent recap! And there was one trick in there that I did not know! Excellent! 😊

Glad that I could help you some how :D

Hi @jokossita thanks for this informative post. You’ve given a few examples here of some classes that have been written by Steemit, such as text-left and text-justify, would you happen to know where there is a complete list of the prewritten classes that can be used for formatting with Steemit?

Thanks heaps.

I can give the one that I use, is in google docs at the end of each post that I write if you want also!

Thanks for this offer. I had a look at the one you put at the end of each post - there’s some very good information there. Easy to read and make use of in posts.

Do you happen to know if there is any way to change the default text used in the body of the post - for example, so it is Sans Serif instead of Serif.

Thanks for you help - it’s not easy being the new guy on the block!!

Is ok, we all were newbies in some point. I really don't know but If I get any knowleged I will let you know or I'll make a post :)

Coin Marketplace

STEEM 0.17
TRX 0.16
JST 0.030
BTC 59374.25
ETH 2544.66
USDT 1.00
SBD 2.47