Complete Introduction To Blogger HTML Editor For Beginners

1. Title Bar

• Title Bar is a place where you type the title of a post. Title shouldn’t be too long.

 

2. Editor Views

• There are two views of HTML Editor i.e Compose & HTML.
• Compose is a normal or front view where you write & compose your post.
• HTML view contains the HTML code of a post. You switch to HTML view when you have to add/remove code or HTML tags.
• Click the Pencil icon at your top-left to expand the view options.

Read this post to learn basic HTML tags & CSS that are commonly used:

• Before You Write Your First Post On Blogger, Must Understand These Basic HTML Tags & CSS Properties

 

 

3. Undo/Redo

• Left arrow is for Undo, means to go one step back.
• Right arrow is for Redo, means to go one step forward.

4. Font Type

• Font Type lists you different type of fonts like Arial, Courier, Georgia, Times etc.
• Click the “A” icon to expand font types.

5. Font-Size

• Click the “TT” icon to expand the different font-sizes.
• Remember to not use the Font-Size when you use Headings like h1, h2, h3 etc as you will see in the next step. Headings have their own sizes.
• If you want to apply font-size to a specific word or line, select that text before you apply the font-size.

6. Font Format

• Choose “Normal” when you write a post. You can use “Paragraph” when you write paragraphs.
• There are 4 formats of headings i.e Major Heading(h1), Heading(h2), Subheading(h3), Minor Heading(h4).

7. Add Style

• B: To bold the text.
• I: To apply italic.
• U: To underline the text.
• ABC: To apply Strikethrough. It means such words are mistakes and are not included. It adds a horizontal line on top of the selected word.
• To apply any of the style first select the text on which you want to apply the style and then click the desired icon.

8. Pick A Text Color

• Click “A” icon to pick a text color. The default color for text is black.
• If you want to change the color of specific line or word, select the text before you pick color.

9. Pick A Background Color

• Pick a background color for your text by clicking “Text background color” icon.
• Select the text before you pick color.

10. Insert A Link

• To make a link select the text first and then click “Insert or Edit Link” icon.
• Paste your link in “Paste or search for a link”.
• Tick “Open link in a new window”.
• Click APPLY.

• The default special characters are emojis.
• Click the dropdown list to choose other categories.

• You will have plenty of options like Symbol, Punctuation, Number, Format & Whitespace etc.

• Here you can see that we have given the “Increased Indent” to first line. It has moved further from the second line.

• Click “More Options” icon.
• To add auto numbering to your line/lines of text, click “Numbered list” icon.

20. Insert Read More

• “Insert jump Break” is used to create “Read More” link. When you insert “Jump Break” it inserts a horizontal line in your editor. The content above the horizontal line will be visible and below will be hidden on your homepage. The horizontal line does not appear on your blog, it is converted to “Read More” link.
• In order to insert the “Jump Break” first move the cursor to the position where you want to add “Read More” link.
• Click “Insert jump break” icon.
• Click “More options” icon(three horizontal dots).
• Click (-) icon.

• When you click “Left to Right Layout” the text moves to left.
• When you click “Right to Left Layout” the text moves to right.
• Here you can see that we have clicked “Right to Left Layout” and it is moved to right side.

22. Input Tools

• Input Tools lets you type in the language of your choice. It is a very advance feature.
• Transliteration refers to the method of mapping from one system of writing to another based on phonetic similarity.
• Click “More Options”.
• To expand the languages click the Globe icon.

• Choose the language.
• Here we have chosen Hindi langauge.

• Now you can see that an icon appeared beside “More Options” icon.
• First option is for mapping from one system of writing to another based on phonetic similarity. You will type the words of your langauge with English characters and it will map to your chosen language words.

• In Hindi “Namaste” meaning is “Greetings”. Here we have typed the word Namaste with English alphabets. It has mapped it into Hindi and showing 5 options.
• Click the correct suggestion.
• Here the first suggestion is the correct option.

• Here you can see that we have written the Urdu word “Khushamdeed” means “Welcome”.
• It is showing different suggestions in Urdu language.
• To insert a suggested word click on it.

Post Settings

• Labels are similar to categories. Post is linked to the Labels that you write in the Labels Bar. Let’s say you write “HowTo” label there. Now when anyone will click “HowTo” label on your blog, all the blog posts associated with “HowTo” will be listed.
• Always use Labels relevant to your post.
• You can write more than one Label for a post. Use comma(,) to separate one Label from the other.
• Use Backspace to remove a Label.

• By default when you click “Publish” button your post is published automatically.
• In case if you want to schedule your post to be published at some other date and time you can use “Set date and time”.

• “Links” is the URL of your post. Always remember that once you Publish the post the URL cannot be changed, so carefully create your URL.
• There are two options: Automatic Permalink & Custom Permalink.
• Automatic Permalink means Blogger generates link from the title of the post.
• Custom Permalink means, you can add your own link or you can edit/customize the automatic permalink manually.
• You can customize your link after the date.

• Sometimes “Automatic Permalink” generates accurate URL, but sometimes not. So using the “Custom Permalink” you can write accurate URL of your post.
• Insert hyphen(-) after each word in custom URL.
• Don’t write characters like “a”,”the”,”an” etc in your URL.
• You can preview your Custom URL under the Permalink? as we have underlined.
• Don’t write anything on “Title Link?”, “Enclosure Links?” etc.

• Last post Setting option is “Custom Robot Tags”.
• The “default” option will have been selected already. Leave as it is. You have to configure the “Custom Robots Tags” on Blogger Settings.

That’s it. You’re done with HTML Editor. If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.