This is our Blogger FAQ and Help guide on the questions and issues that are commonly raised by Bloggers as well as the readers of our Blog at Tips for New Bloggers. Here, we shall elaborate on the finer details of the customization tips for your Blog template, give further examples, and answer specific queries. For detailed write-ups and discussions on the topics, please refer to the articles in our main Blog. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change.
Blogger FAQ and Help

  • Insert an image to the left of Blog Title and Description [read]
  • Add a Horizontal Navigation Bar in Header Image [read]
  • Unable to remove Header Image [read]

Blog Posts
  • Arrange, customize and shift the Blog Posts and Footer elements [read]
  • Insert a picture or image beside the Blog Post Title [read]
  • How to have standard or pre-formatted text in Blog Posts [read]
  • Add Highlighting to Text and Background Color in Text Box [read]
  • Change Blogger Post URL - SEO Tip [read]
  • Change the Post a Comment Link [read]
  • Add scrollbars to text within Blog Posts [read]

  • Add Background color and image to Sidebar Titles [read]
  • Have different Background colors for each widget [read]
  • Style and Position Sidebar Images [read]

  • How to align Blog Post Footer elements to the left [read]
  • Move Comments Label to below Post Title [read]

Links and Labels
  • How to add Hover, Mouseover and Rollover effects for links [read]
  • Remove automatic number count in Labels widget [read]
  • Remove link underlines in Blog Posts and/or sidebar [read]
  • Be notified by Blogger when there is a Backlink [read]
  • Change and Edit Labels in Multiple Posts [read]

  • How to change Background Colour of TicTac Template [read]
  • How to remove the Pencil or Screwdriver and Wrench icons [read]
  • How to add animated graphics in Blogger Post and Sidebar [read]
  • Add Text Box or HTML textarea code in Blogs [read]
  • Know the limits on our Blogger account [read]
  • How to take Screenshots or Screen captures [read]
  • How to change and transfer Blog ownership [read]
  • Change font size and font styles in template [read]
  • How to center align Page Elements [read]
  • How to insert a separator line between each comment [read]

Search Tricks for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 29, 2007

Digg This Story

Highlighted Text with Colored Background

When typing a Blog Post, the font colors can be changed using the tool provided in the rich-text Post Editor. Unfortunately, there is no icon or tool to add highlighting to the text. However, as we shall discuss, it is possible to add highlights to the text and choose a color to appear behind a word or lines of text. This tutorial will also explain how to enclose the text within a box with a colored background.

Text Highlighting

Create the post as you normally would using the “Compose” mode. If there are some words that you want to highlight, switch to the “Edit HTML” mode and insert the following tags before and after the TEXT TO BE HIGHLIGHTED. Here are some examples of common color highlights and codes to be inserted:-

1. Yellow highlight

<span style="background-color: rgb(255, 255, 0);">TEXT TO BE HIGHLIGHTED</span>


2. Green highlight

<span style="background-color: rgb(51, 204, 0);">TEXT TO BE HIGHLIGHTED</span>


3. Blue highlight

<span style="background-color: rgb(51, 204, 255);">TEXT TO BE HIGHLIGHTED</span>


Note: You can insert other color codes to change the background color to something of your choice. How to do that is to type any word and change the font color. View it in “Edit HTML” mode to extract the color code.

Text in Box with Colored Background

We can place a group of text within a box by using the Table HTML codes. A simple Table code looks like this:-

<table border="1" cellpadding="1" width="200"><tbody><tr>
<td bgcolor="#33ffcc">TEXT IN COLORED BOX

The above code will give you a box of 200px width, a border of 1px and a background color:-


You can do away with the border by changing border value to "0". Change the background to a different color by inserting the relevant color code from our Color Code Chart. Instead of having a color, you can have a background image in the box. For more details on this and the various Table HTML attributes, refer to Tables – HTML Basics and Tutorial.

© Tricks for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button


Matt Plavnick said...

Right now I'm using this method to put a different color background behind my block quotes. It looks good, but is there a way to make it default to that every time I push the block quote icon in the wsyiwyg editor? That'd save a lot of work.

Your site is working wonders on my blog. Thanks for all the great info!

bizwhiz said...

Hi Matt Plavnick

Most templates have styles for blockquotes e.g.,

.post blockquote {

Add the styles you want and preview the template.

][vellios said...

Is there a way that I can make this a permanent feature for my entire blog?

Whooop said...

Is there a way I can highlight the date in my blog posts like this? Thanks.