Complete Introduction To Blogger HTML Editor For Beginners - Step By Step

Blogger offers a very user-friendly and light HTML Editor for writing blog posts. Before you write your first post on Blogger it is very important for you to be familiar with HTML Editor's elements & Post Settings, so that you won't find any difficulty while writing a post and get maximum benefits from their features.

In this tutorial we will guide you step-by-step to How to use the elements of Blogger's HTML Editor, Their function and How to use Post Settings.
 
 
Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 0

1. Title Bar

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

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 1

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.
 
Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 2

  • Click "HTML view". You can see the HTML tags and CSS styling.
  • To go back to normal view click "Compose view".
 
Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 3

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

Blogger Templates

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.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 4

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.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 6

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.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 6

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

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 7

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.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 7

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.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 8

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. 

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 10

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.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 12

11. Insert Image

  • Click "Insert Image" icon to insert or upload images.
  • To upload an image from your computer click "Upload from computer".
  • To insert an image from your Google Photos click "Photos".
  • To insert an image from your existing images click "Blogger".
  • To insert an image from URL click "By URL".

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 13

12. Insert Video

  • Click "Insert video" icon to insert a video.
  • To upload a video from your computer click "Upload from computer".

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 14

  • To insert a video form  YouTube click "YouTube".
  • Click the "Search" tab.
  • If you have the URL of YouTube video just Paste in the Search Bar and click Search button. Select the video and insert.
  • If you don't have the URL of YouTube video type your search keywords in the Search Bar. Click Search button and select your desired video from the suggestions.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 15

13. Insert Special Characters

  •  Click "Insert Special Character" icon to insert emojis, special characters, symbols, punctuation etc.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 18
 
  • The default special characters are emojis. 
  • Click the dropdown list to choose other categories.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 19

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

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 20

15. Text Align

  • Text Align is used to align the text, image or video.
  • Click the "Text Align" icon to expand options.


Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 20

  • It will show you 4 options i.e Left align, Center align, Right align & Justify.
  • Select the text, image or video which you want to align and click on one of the option.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 21
 

16. Increase/Decrease Indent

  • Indent is used to position a line of text or block of text further from the starting position of page. 
  • Select the text and click "Increase Indent" icon or "Decrease Indent" Icon.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 22

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

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 24

16. Insert Bullets

  • Click "More Options" icon.
  • Click "Bullet list" icon to insert bullets to your selected line/lines of text.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 29

17. Insert Numbered List

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

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 32

18. Quote Text

  • The "Quote text" is used to specify that a text is quoted from another source. In HTML the text comes in between these tags  <blockquote> </blockquote>. It increases the indent.
  • Click "More Options" icon.
  • Select the text and click the "Quote text" icon.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 33
 

19. 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.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 34

20. Move The Text Right Or Left

  • Select the text which you want to move left or right.
  • Click "More Options" icon. 
  • There are two options i.e Left to Right Layout & Right to Left Layout. 
 
Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 35

  • 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.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 36

21. 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.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 37

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

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 38

  • 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.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 39

  • 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.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 40

  • The "Keyboard" option in "Input Tools" allows you to pick the keyboard of your chosen language so that you can type in that language. 
  • For most of the languages it offers you 1 keyboard, but for Hindi language it offers two keyboards i.e one with English alphabets and the other with Hindi alphabets.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 41

  • The "Handwriting Option" allows you to write the words in your langauge by a Pencil. It shows you the close suggestions in that particular langauge.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 42

  • 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.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 43
 
  • Here you can see that the Urdu word "Khushamdeed" has been inserted in Urdu language.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 44

  • To stop the "Input Tools" feature click the language icon. It will be turned into light grey.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 45
 

22. Clear Formatting

  • "Clear Formatting" removes the styling or formatting.
  • Here you can see that we have applied the bullets to two lines.
  • Select the text of which you want to remove the style or formatting.
  • To clear formatting click "More Options" icons. 
  • Click "Clear formatting" icon.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 46

  • You can see that the bullets have been removed.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 47

Post Settings

 Post Settings are located at your right side.
  • 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.

Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 48
 
  • 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".
 
Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 49

  • "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. 
 
Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 50

  • 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.
 
Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 53
 
  • "Search Description" allows you to write 150 characters. Mostly the first two lines of the post are written or pasted here. This description is also displayed under the thumbnail when you share a post on Twitter or Facebook.
 
Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 54

  • "Options" is about reader comments on a post. You can choose whether you want to allow people to comment on your post or not. The default permission is "Allow".
 
Complete Introduction To Blogger HTML Editor For Beginners - Step By Step 55
 
  • 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. 
In order to know what are "Custom Robots Tags" & how to configure them on Blogger, read this tutorial:


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.

Related Posts

Comments

Post a Comment