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
- Sign in to Blogger with your Google Email and Password.
- In the left top, click this icon and choose the blog.
- In the left menu, click Posts > New post or Edit post.
In the post editor page, you will see a toolbar like below —
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 ─
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.
Undo and Redo
This Undo and Redo buttons are very useful to undo and redo your changes in a post.
Change Font, Font Size & Format
- Font — First, select the text then choose a Font .
- Font size — Choose a size for the selected text.
- Format — There are 4 types of text format 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.
- Heading — uses
Bold, Italic, Underline & Strikethrough Text
- Bold — Select text then click button to make text bold.
- Italic — Click button to make text italic.
- Underline — Click button to make underlined text.
- Strikethrough — Click to strike through text.
Text Color & Text Background Color
- Text color — To set text color, select text then choose a color from button.
- Text background color — To set background color, select text then choose a color from button.
When you click the buttons then a Color Palette will appear like below ─
See the screenshot with Red text color and Blue background text ─
Add or Remove link
Add link: Select text then click Add or remove link button. A modal dialog box will open up ─
- 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 buttons.
- Change — You can change or edit everything again.
- Remove — Click this button to remove the link.
- Close — To close bubble panel, click button.
To insert images, first keep your mouse cursor on where you want to put the image then click Insert image button. A light-box will appear which has 6 tabs ─
- Upload — To upload images from your PC.
- From this blog — The images you’ve uploaded before in this blog.
- From Google Album Archive — The photos you’ve uploaded to other Google products.
- From your phone — The photos you’ve uploaded from your phone.
- From your webcam — The photos you’ve taken using your webcam.
- From a URL — Use an image url.
Insert a Video
Click Insert a video button. A modal dialog will appear which has 4 tabs —
- Upload — Choose a video from your PC or drag and drop on it. Wait until finishing the upload.
- From YouTube — To insert a video from YouTube, type a video title in the search box then hit Enter or click . Select a video from list then click Select.
- My YouTube videos — The videos you’ve uploaded on YouTube will be found here.
- 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 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.
Alignment, Numbered list & Bullet list
- Alignment — Select text then click to align text to Left, Center, Right and Justify.
- Numbered list or Ordered list — To set numbered list, select text then click . The list items will be marked with numbers (1,2,3,4,…) by default.
- Bullet list or Unordered list — Click to set bullet list. The list items will be marked with bullets (•) by default.
Quote, Remove Formatting
- Quote — To set quote, select text first then click. Browsers have default CSS values for
<blockquote>. You can customize it with CSS,
- Remove formatting — To remove any used format, click . For example, you’ve set <blockquote> format with any text, select the text and click this button to remove the format.
Check spelling should work automatically, if not then click Check spelling button and keep writing.