A Few Minor Repairs

I obviously haven't kept up with the site for a while, and came back to find that a few things had fallen into disrepair. Sorry if that was an inconvenience to the handful who were actually reading. I've been doing a few repairs to get things back up to speed.

Both the javascript that worked the magic for the "Read More" tags and the audio files that had the messages on the Audio page were hosted at third-party sites and eventually quit, so evidently both haven't been working for who knows how long. My apologies. I had found and imported the javascript into this site's source code a few days before Google came out with this announcement that it had created its own means of accomplishing the same thing. I'm trying out Google's version on this post.[Yeah, I tried it, it didn't work. I'll stick with what does.]

I've also uploaded my sermon files onto a more reliable platform, so they shouldn't disappear again. I also always intended to upload music files as well, but haven't gotten around to finishing any song recordings. Maybe I'll get inspired again someday.

So once again, sorry for the inconvenience if anyone experienced problems with the site over the last few months.

Additional note: it appears that the audio player doesn't work in Explorer. I'm not sure if it ever did, or if I just assumed that if it works in Firefox it will just work. (Stupid, stupid assumption, I know.) Anyway, I'll keep trying to get the bugs out, but if the player doesn't work, you should be able to right click the hyperlinked text and download the mp3 files to play in whatever way does work.

A Couple of Minor Tweaks

[Note: since making these changes and composing this post, I've finally taken a look at the site in Explorer, and found that my font changes don't seem to have any effect in that browser. So at least 2/3 of my readers--that's right, both of you--would have had no clue regarding what I was talking about. Sorry about that. Plus, in my first paragraph, I morphed from talking about what I had changed and why into talking about how to accomplish this wonderful feat in your own Blogger pages, without telling you that that's what I was describing. So there might have been hapless readers desperately trying to figure out how to do what I was describing in order to see the wonderful changes I said I had made. Well, probably not, but if you were by any chance, you have my deepest regret and sympathy. I've now carved that first paragraph into two, and added an explanatory line, to make things clearer.

On the brighter side, the printing trick seemed to have worked in both browsers. Not that anyone is going to want to print out this stuff. But still.]

I've made a couple of minor alterations to this site that I hope improve readability and usefulness. First, I've chosen 'Lucida Grande' and 'Lucida Sans Unicode' as the preferred fonts (Mac and PC, respectively) for most of the text. They're the closest thing to Optima that I can find that would be in common usage. The varying thickness of the lines gives it the readability of a typical serif font, but without all the actual serifs that sometimes don't come out well when viewing on-screen.

[If you want to achieve this stunning effect on your own Blogspot blog, here's how to do it.] Unfortunately, Blogger doesn't actually offer these two Lucida fonts as options in the "Fonts and Colors" screen of its Template tab, so you have to alter the HTML template itself. In the "Edit HTML" area, scroll down a bit to get to the "Variable definitions" section; then, in the description of fonts, change whatever sections you want from the current settings to "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Sans-Serif". Make sure you back up your template before doing this; if you run into problems, check punctuation.

The other alteration is less apparent, unless you choose to print out a page. If you click on "Print Preview" from the File menu, you'll see that the blog header, sidebar, and other extraneous material will not print; instead, the main body will expand to fill the page. If you would like to do something similar on your Blogger blog, here's the code I used:

<style type='text/css' media='print'&rt;
#outer-wrapper { width: 100% }
#main-wrapper { width: 95% }
#sidebar { display:none }
#header { display:none }
#h2 { display:none }
.post-footer { display:none }
.comment-footer { display:none }
#blog-pager { display:none }
.post-feeds { display:none }
#footer { font-size:x-small }
#navbar-iframe { display:none !important }
</style>

What this is doing is adding a new CSS style sheet that only applies to printing. You can choose whatever aspects of your page you want to hide from printed output. Add this code in at the very end of the <head> section, just before the </head> code.

Expandable Posts in Main Page

I'd like to thank both Hans and Ramani for their joint work on "Super Peek-A-Boo Posts," a hack for Blogger Beta that allows posts on main and archive pages to appear condensed, with a link reading "Read More" that expands the post to its full size, and then another link reading "Summary Only" at the end of the full-size post that allows you to condense the post back to its first few lines. (Short posts like this one won't be affected.)

If you are using Blogger Beta and would like to implement this hack, click on either of the two hyperlinked names to get to their site that shows how to set it up. Also, if you restrict javascript, you may need to allow it for www.anniyalogam.com in order to see the effect; I believe that if you don't allow it, you'll simply see the full text of all posts without any being condensed (i.e., the way it's always looked before).

Once again, thanks guys.

Making Your Blog Readable How to make text and columns larger in Blogger

Tired of skinny columns of tiny text in your blog? I guarantee you, your readers probably are.

A few short hacks in your Blogger template are all that's necessary to make your blog much more readable. As in, small changes in six lines. Sound good? Okay, here goes:

First, you'll have to go to the template tab in the management section of your blog. Choose "Edit HTML." The first, best thing to do here is to back up your present template. Click "Download Full Template" and save it somewhere on your present computer. This way, you can get back to square one if you mess something up.

Now, scroll down in the template code until you come to a section that looks something like this:

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small "Trebuchet MS", Trebuchet, Verdana, Sans-Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

I'm using the Blogger Beta version of the Minima Blue template; yours might look somewhat different. See the three lines that have either x-small or small in them? That's what makes your text so tiny. Change all of them to medium, so that your code looks like this:

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:medium "Trebuchet MS", Trebuchet, Verdana, Sans-Serif;
  font-size/* */:/**/medium;
  font-size: /**/medium;
  text-align: center;
  }

Your readers, incidentally, can change the text size themselves, either by using the "View > Text Size" drop down menus in Explorer, or by hitting "Ctrl-plus" (i.e., "Ctrl-=") or "Ctrl-minus" in Firefox. (Sorry, if you're using other browsers, I can't help you.) So there's really no reason on a website to make the main text size anything other than "medium."

Anyway, now that you've got the text to a readable size, you're going to want to change the column sizes. Scroll further down until you see a section that looks like this:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  }

#sidebar-wrapper {
  width: 220px;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

(If you're using the older Blogger, you'll be looking for a section entitled "Content" instead. I don't want to reproduce that code here, to avoid confusion.) See the lines that say width: and then have a number with px after it? These lines specify the overall width of your blog, the width of your main text, and the width of your sidebar, respectively, as a number of pixels (px).

The number of pixels is relatively small because older monitors had a low screen resolution; a larger number could potentially make your blog too wide, with text running off the sides of the screen so your blog would difficult or impossible to read. The crazy thing is, the widths don't need to be specified as a number of pixels at all; they can be specified as a percentage of screen size. That makes a lot more sense, since you don't know the screen sizes of your readers' monitors. If you specify percentages, your blog will resize itself to fit all your readers' screen sizes automatically. Cool, huh?

So each of these three numbers has to be changed to a percent. It's best not to add up to a full 100%, so you have some space between columns and at the edges of the screen. Here's how mine looks:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 90%;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

#main-wrapper {
  width: 70%;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  }

#sidebar-wrapper {
  width: 25%;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

And that's it. Really. You've got your text and the widths of your columns set; with those six minor changes, you've just overhauled the whole look of your blog. If you like how it looks, this would be a good time to save it and download another backup of your template.

Now in my case, I decided that I wanted my sidebar content and my comments to be in a text a bit smaller than the text of the main posts. No problem. Scrolling further down to the section that deals with comments, look for code that looks like this:

#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }

This time you need to actually add in a line that specifies the type size for comments to be small. Here it is:

#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  font-size: small;
  }

Now do the same thing to the sidebar content. Here's the code you're looking for:

.sidebar li {
  margin:0;
  padding:0 0 .25em 15px;
  text-indent:-15px;
  line-height:1.5em;
  }

Add in the same line as above:

.sidebar li {
  margin:0;
  padding:0 0 .25em 15px;
  text-indent:-15px;
  line-height:1.5em;
  font-size: small;
  }

And there you have it!

Well, that's it. Give it a shot and spread the word. Readable blogs are only a few short keystrokes away!