Picking a Non-Standard Template

A friend of mine, Josh Stump, just turned me onto a fun repository of blog templates that are very cool. Copy and paste one of these into your blogger template and people will think you hired a professional designer.

You'll love the site, as it also includes a helpful list of hacks and ideas on how to enhance your blog. Enjoy!

Now for instructions on how to implement these templates. There are details on the site, but in general I would recommend copying and pasting your current template into a Word or NotePad document and saving it before changing the template. This way you can always go back if the new one doesn't work out. This is especially true if you have edited one of the standard templates, because who wants to do that work again?

To see an example of another blog that utilizes one of their templates see Creative Outlet Labs.

Keeping up with your correspondence

In the olden days, people would have writing desks and would set aside time for keeping up with their correspondence, as they responded to party invitations and letters. Or, at least that is what I remember from the period movies.

The modern day equivalent of that might be checking email and reading blogs. To make the reading blogs part easier, there is a variety of tools out there calls RSS Readers that allow you subscribe to blog content and be alerted everytime there is a new post. I have used several, but the one I am currently using is GoogleReader. Is is easy to set up and can be integrated right into their personalized home page for easy reference.

So, click the link above to open GoogleReader in a new window. Sign up for the free service. Copy and paste this URL into the search field: http://www.bloggerassist.blogspot.com. Hit the "subscribe" button and voila! you now will see whenever there is a new post.

While you are at it, you can subscribe to other blogs that I publish including Creative Outlet Labs and Invention Recycling.

Move Your Profile

On our family site and on this site, I wanted to move the "About Me" profile to the bottom of the page, rather than having it at the top of the site. This helps make the site look less like a blog.

Turns out that changing this is really easy. Again, my friend Jason Hill provided his expertise.

Moving Your About Me Profile
1. Find the text comment string that reads as follows:

<!-- Begin #profile-container -->

2. This portion of code (beginning with this comment and ending with another that reads <!-- End #profile -->) is the About Me Profile that we will be moving.
3. Cut that whole chunk (which may only be a few lines and most of it comments). You will copy it later in the code.
4. Find the following code:

</div></div></div>
<!-- End .box -->

5. Paste that profile code (see step #3 above) below this code. The exact reference in your template might be different, but in general it is below the references to Links, Previous Posts, and Archives.
6. Save changes and republish blog to see changes. That will move the Profile (the green box in our template) and put it beneath the Links and Archive sections.

Note: The word "profile" is reference several times in the Template, most of them in the Style area. Do not move this code.

Hiding the Blogger Menu Bar

So, we love Blogger, but maybe we think the blogger menu bar (see the black bar at the top of this site) looks cluttered and distracting. Here is a hack that my friend Jason Hill taught me. You can see that he also uses it on his blog. I just put it on our family site and it works great. He did caution, however, that is is a "big" hack and should be used with caution. I don't take any responsibility for this not working or breaking something else, but it is easy enough to try.

Removing the Blogger Menu Bar
1. You will need add two lines of code to your Template and remove one. Go to the Template tab and see the "Edit Current" scrolling text window there.
2. Search this field (using the Edit-Find On This Page from your Internet Explorer browser menu bar) for the text "</style>". If there is more than one, just the last one in the template.
3. Once you have found the last one, enter the following code immediately before the closing style tag:

#b-navbar { height:0px; visibility:hidden; display:none }

Note: this needs to be spelled correctly to work. The character after "height:" and before "px" is a zero, although this font makes it hard to read
4. Now, search for the string the reads <div id="header"> using the Find On This Page feature of your browser.
5. When you find it, replace it with the following:

<div id="header" style="margin-top:5px">

6. Now, for the final edit, you can remove the "Powered by Blogger" logo in the bottom of your site by removing the code that begins as follows:

<p id+"powered-by"

Delete the whole line which ends with a </p> tag.
6. Save changes and republish the blog to see the changes.

Your Own URL for Your Blog

You may have noticed that the URL (Universal Resource Locator; aka, the website address) of our family blog is www.DavisFamilyHome.us. It is also accessible using the standard www.davisfamilyhome.blogspot.com, but I find that longer address a bit cumbersome. In order to "hide" the blogspot address under a custom moniker, you use a service provided by your ASP. I used this same effect on my sister's blog (www.RebeccaHull.com) and the blog for our Westside Mothers of Preschooler's group (www.WestsideMOPS.org).

I know there are fancier and more "thorough" ways to create a blog at your own URL and maybe I will learn how to do that and post instructions here. But until then, masking the blogspot URL provides a potentially easier-to-remember URL and helps present a more professional image.

I have used both Network Solutions and GoDaddy! for this service and have found GoDaddy to be less expensive (they don't charge extra for masking the URL) and just as flexible, so I will use them for the instructions.

Creating Your Own URL for Your Blogger Blog

Step A: Securing a URL
1. Go out to www.GoDaddy.com and type in the name of your desired URL name. Although the home page here is WAY too busy, you should be able to find this as they try to draw attention to it with arrows and scrolling offers. Think of a URL that will be easy to remember and spell (as you will want to tell everyone about it). Having your name in it will help with search engine optimization, but might not be what you want to do. Having a descriptive name to the content of the site might help your visitors remember the URL. For instance, if your blog is about sports, you can name the site www.MySportsSite.com or www.SportsNotGames.com. If you have a blog about nothing, you can name your site www.WannaBeJerrySeinfeld.com. You get the idea.
2. You can select from the pull-down box whether you want the site to be a .com, .net, or .org or one of the dozens of different options. We selected a .us suffix for our home site and it has caused some confusion because people want to type .com.
3. Click "Go" to search to see if the URL you requested is available. If it isn't, most sites will provide you with some alternatives to consider or you can enter a second choice.
4. Follow the instructions on the screen for paying for your URL and setting up your secure log-in. GoDaddy assigns an Account ID number.
5. This URL currently doesn't lead anywhere. Most domain name registries will create a "coming soon" page for you, but even that won't be live right away.

Step B: Forwarding your URL to Your Blog
1. I assume you already have a Blogger account. If not, go to www.Blogger.com and enter the name of your blog and the basic contact information required to set up your free blog. It is super easy and free. The address you create (which should be live right away) will be formatted as follows: www.YOURTEXTHERE.blogspot.com.
2. With that URL in hand, go to your Go Daddy accoung and go to the Manage Domain Forwarding link under the Domain Names subhead on the Welcome Page (again, this site is TOO busy, but it was second on the list).
3. Select your new URL from the list presented. On the right hand side of the screen you will be asked to provide a URL to forward it to. Type in your blog address here.
4. If you want the URL of your blog to be hidden from visitors view, click the "Mask Domain" check box. Otherwise, if someone types in your URL they will be redirected to your blog site, but if they bookmark it, they will be bookmarking the blog page, not your URL. You can also type in a title for your site here.
5. Click "Save Changes." It typically takes a little while for this redirect to be active, but certainly by the next day, you can point people to the URL you created in Step A and up will appear your blog.


Note: This URL masking works really well. In fact, it works too well sometimes. If you include a link on your site to some other website that takes people from your blog to other addresses on the Internet, those too, will appear under your home URL. Someone might know how to get around this or "fix" this and I welcome your ideas and expertise in a comment.

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.