How to Use Blogger Post Editor Tools

In this lesson, you will learn how to work with and use Google Blogger Post Editor Tools to —

  • Change Font, Font Size & Format
  • Make text Bold, Italic, Underline & Strikethrough
  • Set Text Color & Text Background Color
  • Add or Remove link
  • Insert Images
  • Insert a Video
  • Align text, make Numbered list & Bullet list item
  • And more

Go to Post Editor Page

To the see the toolbar, you have to go to Blogger post editor page. Sign in to Blogger

  1. Sign in to Blogger with your Google Email and Password.
  2. In the left top, click this icon Down Arrow Icon and choose the blog.
  3. In the left menu, click Posts > New post or Edit post.

In the post editor page, you will see a toolbar like below —

Blogger Post Editor Toolbar

Blogger Post Editor Toolbar

You see the tools are showing on the toolbar. To know the tools name, keep your mouse on each button then the name will appear like below ─

Blogger Link button with title Add or remove link


Compose and HTML Mode

Use Compose mode always. Using HTML mode would be difficult to you if you don’t have HTML knowledge. To see in compose mode, click Compose tab and click HTML tab to see in HTML mode.

Blogger Post Editor - Compose and HTML Mode

Undo and Redo

This Undo Blogger Post Editor - Undo Button and Redo Blogger Post Editor - Redo Button buttons are very useful to undo and redo your changes in a post.

Change Font, Font Size & Format

  1. Font — First, select the text then choose a Font blogger-post-editor-font-button.
  2. Font size — Choose a size Blogger Post Editor - Font Size Button for the selected text.
  3. Format — There are 4 types of text format Blogger Post Editor - Format Button in Blogger post editor ─
    • Heading — uses <h2> element, font size will be bigger.
    • Subheading — uses <h3> element, font size will be bigger but less than Heading.
    • Minor heading — uses <h4> element, font size will be bigger than normal size.
    • Normal — uses <p> element; font size is normal.

Blogger Post Editor - Change Font, Font Size, Format

Bold, Italic, Underline & Strikethrough Text

  • Bold — Select text then click Blogger Post Editor - Bold Button button to make text bold.
  • Italic — Click Blogger Post Editor - Italic Button button to make text italic.
  • Underline — Click Blogger Post Editor - Underline Button button to make underlined text.
  • Strikethrough — Click Blogger Post Editor - Strikethrough Button to strike through text.

Blogger Post Editor - Bold, Italic, Underline and Strikethrough

Text Color & Text Background Color

  • Text color — To set text color, select text then choose a color from Blogger Post Editor - Text Color Button button.
  • Text background color — To set background color, select text then choose a color from Blogger Post Editor - Text background color Button button.

When you click the buttons then a Color Palette will appear like below ─

Blogger Post Editor - Color Palette

See the screenshot with Red text color and Blue background text ─Blogger Post Editor - an Image with Red text color and Blue background text

Add or Remove link

Add link: Select text then click Add or remove link Blogger Post Editor - Add or remove link Button button. A modal dialog box will open up ─Blogger Post Editor - Modal Dialog Box for Adding Link

  • Text to display — The text you want to add link to it will be displayed in this field.
  • Web address — Insert a url (e.g. http://www.example.com/hello-world.html).
  • Email address — You can use an Email instead of a Web address.
  • Check Open this link in a new window if you want to let the link open in a new tab or a new window of the Browser.
  • Check Add ‘rel=nofollow’ attribute if you don’t want to allow Search engines to follow or index this link.
  • And finally click OK button.

Remove link and Change: When you click a linked text will appear bubble panel including ─ link/web address, Change, Remove and Close Blogger Post Editor - Close Button after Clicking on a Link buttons.

Blogger Post Editor - Change and Remove Button after Clicking on a Link

  • Change — You can change or edit everything again.
  • Remove — Click this button to remove the link.
  • Close — To close bubble panel, click Blogger Post Editor - Close Button after Clicking on a Link button.

Insert Images

To insert images, first keep your mouse cursor on where you want to put the image then click Insert image Blogger Post Editor - Insert image Button button. A light-box will appear which has 6 tabs ─

Blogger Post Editor - Modal Dialog for Inserting Image

  1. Upload — To upload images from your PC.
  2. From this blog — The images you’ve uploaded before in this blog.
  3. From Google Album Archive — The photos you’ve uploaded to other Google products.
  4. From your phone — The photos you’ve uploaded from your phone.
  5. From your webcam — The photos you’ve taken using your webcam.
  6. From a URL — Use an image url.

Blogger Post Editor - Insert and Edit Image

Insert a Video

Click Insert a video Blogger Post Editor - Insert a video Button button. A modal dialog will appear which has 4 tabs —

Blogger Post Editor - 4 Tabs for Inserting a Video

  1. Upload — Choose a video from your PC or drag and drop on it. Wait until finishing the upload.
  2. From YouTube — To insert a video from YouTube, type a video title in the search box then hit Enter or click YouTube Search button. Select a video from list then click Select.
  3. My YouTube videos — The videos you’ve uploaded on YouTube will be found here.
  4. From your phone — An app has to be installed in your Phone or Computer to use this feature.

Insert Jump Break

If you don’t want to show full content of your blog posts on Index pages (Index pages include homepage, labels page and yearly archive page), then insert jump break Blogger Post Editor - Insert jump break Button after which part of the content you want to show. If you insert Jump Break, a Read more » link will appear instead of full content.

Blogger Post Editor - Read more link after Inserting jump break

Note: Some templates do itself, they take some specific number of characters to show on Index pages and a Read more link shows instead of the rest content.

Alignment, Numbered list & Bullet list

  1. Alignment — Select text then click Blogger Post Editor - Alignment Button to align text to Left, Center, Right and Justify.
  2. Numbered list or Ordered list — To set numbered list, select text then click Blogger Post Editor - Numbered list Button. The list items will be marked with numbers (1,2,3,4,…) by default.
  3. Bullet list or Unordered list — Click Blogger Post Editor - Bullet list Button to set bullet list. The list items will be marked with bullets (•) by default.

Blogger Post Editor - Alignment, Numbered list and Bullet list

Quote, Remove Formatting

  1. Quote — To set quote, select text first then clickBlogger Post Editor - Quote Button. Browsers have default CSS values for <blockquote>. You can customize it with CSS,
  2. Remove formatting — To remove any used format, click Blogger Post Editor - Remove formatting Button. For example, you’ve set <blockquote> format with any text, select the text and click this button to remove the format.

Check Spelling

Check spelling should work automatically, if not then click Check spelling Blogger Post Editor - Check spelling Button button and keep writing.