Formatting the Text in a Blog Post

The one thing that I have found well-communicated in Blogger's help system is some basic HTML text formatting instructions. This includes information about font size, block quotes, etc. Click here for the entry. From here you can link to more about CSS (Cascading Style Sheets) to learn about text colors, borders, font preferences, etc.

Now, for practical instruction, here is how you can add some formatted text to a blog post. Specifically, text in a particular color, size, and font style (technically, overriding the CSS of the blog).

See example below:

YOUR TEXT GOES HERE


Formatting Text in a Blog Post
1. Type the following text into your Blog post


Use this code as a template to make your own preferences. I'll go through each part of this code separately below.

2. First, you can select the color of your post. There are some standard colors (ie, blue, yellow, etc) that you can use or you could select from any number of the supported colors on the Web. There is a great reference for this at the ColorMatch website. You can literally go to this site, move the slides for Red, Green, and Blue to create your own color and the resulting number (beginning with a # sign) will show up on the page. It will also show you five other colors that coordinate with the one you chose. If I had chosen a custom green shade for my text (#BFE971), the text reference would have appeared as follows:
YOUR TEXT GOES HERE

3. Next, you can select a font size. In the example above, we used +2, but you can select another number. Website fonts are in seven sizes (numbered 1 through 7) with the base being size 3. If you specify +2, you basically get size 5. Experiment to find your preference or see references on the web. If I had chosen a smaller font size for my example, it would have appeared as follows:
YOUR TEXT GOES HERE

4. Finally, you can select your font face. This is typically specifed by the name of the TrueType font on the computer. I'd stick with common ones, as I will not go into assigning alternates. The sample we use above specifies the font "arial black." If I had chosen "comic sans ms" instead, the text would have appeared as follows:
YOUR TEXT GOES HERE

5. Of course, the "YOUR TEXT GOES HERE" is where you enter your actual copy that you'd like formatted in this way.

Adding a "Quote Search" to a Blog Post

So, I haven't done this yet on our family blog, but I ran across it and thought it would be fun to experiment with. It allows you to include a quotes search engine in your site.

Here is an example (note: this search takes you to a site unaffiliated with Blogger Assist)

Quotations Page Search:

Adding a Quote Search
1. Visit http://www.quotationspage.com/useourquotes.php
2. Copy the HTML code for the search reference and paste it onto your Blogger entry where you want it to appear. You may want to warn people that they will be leaving your site.
Note: Their "Quote of the Day" uses Javascript, which Blogger doesn't appear to like without some modifications (which I am figuring out now).

I'd love to see an HTML-based "Quote of the Day" service that allows you to pick a category, search term, or author to include in the page or post. If you know of any service like this (or other cool things that you can add to blogs), respond with a comment! I'd love to hear about them.

Adding a Countdown Ticker

When I was expecting, I added a countdown calculator to our blog, courtesy of Lilypie. They have designs for pregnancy countdowns, as well as wedding, anniversary, birthdays, and vacations. See example below:


Adding one to your blog posting is very easy.

Adding a Lilypie.com Countdown
1. Go to www.lilypie.com
2. Select your event from among the options and fill in the date of the event and the style you want to use. Click "Create Ticker."
3. At the bottom of the page, you will see the design you selected. You will also see the code (in a scrolling text field) that you can use to recreate this ticker in your post.
4. Copy the HTML code and paste it into your Blogger entry, where you want the ticker to appear.
5. You may want to add a note about the loading time of this feature, as it often takes a few seconds to appear.

Note about Emails

My friend, Allan, writes the following caution that is worth repeating:

"I strongly recommend not posting someone's email address. SpamBots harvest them, and send those people you love spam. If you must, do it like this: person[at]website[dot]com or something creative. People will get it."

Allan has helped me make some enhancements and I have copied a few from his wife's blog at well.

Adding a Live Link to a Blog Post

Let's say you want to include a live link to another website in your blog posting. There are two ways to do it. Both are included below.

Adding a Link to a Post - Simple
1. Select the Posting Tab. It will take you to default "Create" sub-tab and the "Edit Html" tab under that.
2. Click on the link icon (the world and the chain) in the menu above the scrolling text box. If you don't have words selected with you click the link will just be the URL and will not include a label.
3. Type in the destination URL/Website that you want the link to go to. Let's assume you want to link to our website at www.DavisFamilyHome.us and you typed that into the field.
4. This will automatically create a reference that looks like this:

5. You can move this text anywhere in your post you want it to appear, by copying and pasting it.

Adding a Link to a Post - Link with English Description
1. Select the Posting Tab. It will take you to default "Create" sub-tab and the "Edit Html" tab under that.
2. Again, let's assume you want to link to our site and label it as our site. Type the following where you want the link to occur:

3. As you can see, the URL is the description that you type after the http:// and the label for the link is the words you type at the end (see "Davis Family Website" in the example. The description can be anything you want it to be.

Editing Sidebar Links (aka, removing the "Edit-Me" links)

For those of you interested in publishing your own blog, here are brief instructions how to change the links on the sidebar from Google News and generic "Edit-Me" links to whatever you want them to be.

EDITING THE SIDEBAR LINKs
1. Open your Blogger account and go to the "Template" tab. The default sub-tab is "Edit Current."
2. You will see a scrolling window that has the code used to format your site.
3. From your browser menu choose "Edit" and then "Find (on the Page)"
4. A dialogue box will appear and will prompt you to enter the text you want to find. Type in "Google News" and click "Find Next."
5. This will bring you to the portion of code that manages the sidebar links.
6. You will see three lines of code that begin with a "greater than" sign and the letters li.
7. In each of these lines you will see a URL link (beginning with http://www) and a label for the link that will appear on the site. Now you can edit these.
8. For instance, if you wanted to change the Google News link to instead link to my website you would replace the line of code with the following:

9. You can have any number of links. As you can see the template defaults to three, but you can delete them all or add a bunch (your page will just grow to accomodate them).

Helping Others Blog

I am a big fan of blogging, as it is a much easier way to create a website than doing coding or even using the wizards that are available from your ISP. However, there are lots of enhancements that you can do with a Blogger account than what is represented in the menus and tabs. This requires some basic coding. I am not a programmer, but there are a variety of things that I have learned to do that I will share here for other non-programmers.

The purpose of this site is to help others get started with their blog using Blogger. I am hoping this is helpful. Feel free to post cool ideas and tips and tricks of your own to this site. We can help each other get the most out of our Blogger accounts.