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.

 

 

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.
  

 

• Click "HTML view". You can see the HTML tags and CSS styling.
• To go back to normal view click "Compose view".
  

 

 

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.
  

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

12. Insert Video

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

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

13. Insert Special Characters

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

 

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

15. Text Align

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

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

 

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.

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

16. Insert Bullets

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

17. Insert Numbered List

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

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.

 

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.
  

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. 

 

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

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.
  

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

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

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

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

 

• Here you can see that the Urdu word "Khushamdeed" has been inserted in Urdu language.

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

 

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.

• You can see that the bullets have been removed.

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.

 

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

 

 

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

 

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

 

 

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

• How To Configure/Set The Custom Robots Header Tags On Blogger

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.

Recommended Post

• How To Buy A Domain & Hosting In 2020 - For Beginners
• How To Display Google Ads On Blogger - Step By Step | Monetize A Blogger Blog | Earn Money Online
• How To Configure Google Search Console On Blogger | Add Sitemap | Inspect URL
• How To Add & Test Custom Robots Txt On Blogger/Blogspot | Blogger SEO
• How To Configure/Set The Custom Robots Header Tags On Blogger | Blogger SEO
• How To Find & Add Analytics Web Property ID On Blogger | Google Analytics For Blogger
• How To Fix Valuable Inventory: No Content Google Adsense Error | Google Adsense Approval

Related Posts