Typing Tip: How to Make an Em Dash

This tip will probably be of interest to only a tiny percentage of nitpickers people, but on the off chance I'm not the only detail-obsessed nut out there, I offer this tidbit.

In printing, an "em dash" is the term used to describe the longish dash that sets off a word or phrase within a sentence—like this!

Since typewriters didn't have an em-dash key, two hyphens became the standard substitute--like this.

Either way is considered correct, nowadays. But if you like the look of the em dash, you can make it by pressing the shift, option, and hyphen keys at the same time. Like—this—! Ooh, how very dashing!

Emily Dickinson would approve.

Opening Links in a New Window—Yes or No?

Here's an interesting post from Swank Web Style on why links shouldn't be opened in new windows. What's your take?

Using a Reader to Make Blog-Reading Easier

The following is a question and answer from the Moms Who Blog discussion group. (You can join that group by clicking the link in the sidebar. And you don't really have to be a mom to join—it's just a place to discuss blog-related topics.)

My answer here is unpolished, so if any of the other MWB contributors wants to chime in with more info, feel free to hijack this post!

A reader asked for an explanation of blog-readers like Bloglines and Google Reader. Here is my response:

Great topic!

A reader (also called a feed reader) makes it easier to keep up with multiple blogs. Let's say there are 40 blogs you really really like and try to read on a regular basis. (That sounds like a lot, but I think I actually have something like 300 blogs in my list! Yikes!)

You can read them by clicking on each blog individually, through your browser bookmarks or whatever, OR you can use a feed reader to see what blogs have been updated since your last visit.

Google Reader and Bloglines are the two most popular readers. I've used both—I like Google Reader the best, so I'll use it for this example. Bloglines works pretty much the same way, though.

You create your Google Reader account (or sign in with your gmail address) and then you'll need to "subscribe" to the blogs you like to read. Each blog publishes something called a "feed"—this means the text (and sometimes images) of the blog's posts gets fed to the readers.

Most blogs have a button you can click to "subscribe to my feed" or it will say RSS feed, something like that.

Or—even easier—from the Google Reader screen, you can drag a "Subscribe" button to your browser's toolbar. Then, when you're on a blog you want to subscribe to, just click that button and it'll be added to your Google Reader subscriptions.

You can set up folders or categories to organize your blogs—I have folders for homeschooling blogs, kidlitosphere, politics, food, close friends, crafts, frugal blogs, and miscellaneous.

Once you've subbed to your favorite blogs, you just go to your reader and you'll see a list of all the blogs with new posts since your last visit. If you click on the blog name, the posts will appear. Some blogs publish their entire posts to the feed readers; others publish excerpts only, and you have to click over to the blog to finish reading the post. (Full feeds are much more convenient for the readers, of course, but that does affect the blog's page views since you don't have as many people clicking onto the blog itself. I publish a full feed for Bonny Glen, but for Lilting House I have to publish excerpts only.)

There are other handy tricks you can do with your reader, such as Google Reader's nifty "Shared Items" feature (see my shared items here, for example), but their main purpose is just to pull all your blogs into one place for easy reading.

Blogger Hacks: Top Menu Bar

I can't believe how easy this turned out to be, but this is a "hack" that you'll want to try after you've backed up your html code!!!

My husband found some coding from this site that was along the lines of what I was looking for. It turned out to be just two segments of coding that was easy to manipulate (and since I wasn't using the search feature - I'll leave that to the Blogger top bar - I was able to simplify the coding even further).

Here's what you do (this is the actual coding I just added to Studeo - it's the menu just under the photo which offers choices like "About Us" and "Book Lists"). Naturally this is set up for a certain width - 796 I believe. It may take some considerable adjusting to use it for a different width:

Add this segment of coding to the top portion of your html coding (I have mine between the "Blog Header" segment and the "Posts" segment.

/* Menu
----------------------------------------------- */

/* The outer menu bar box */
div.menuBar {
width: 793px;
height: 36px;
padding: 1px;
border: 1px solid #000000;
margin-top: 1px;
margin-bottom: 1px;
margin-left: auto; /* center horizontally */
margin-right: auto;
background-color: #b3b3b3;
}

/* The boxes that go inside the menu bar */
div.menuBarBox {
width: 110px;
height: 32px;
border: 1px solid #000000;
margin-right: 1px;
float: left;
}

div.menuBarBox a {
width: 110px;
height: 30px;
padding: 1px;
border: 1px solid white;
float: left; /* have to float to put elements next to each other */
text-align: center; /* we put the align here cause the text is inside us */
background-color: #ffffff;
}

/* The current page also has this style, which just changes the background color of the box */
div.menuBarBox a.true {
background-color: #ffffff;
}

/* The links within menu bar box */
div.menuBarBox a:link {
font-size: 18px;
text-decoration: none;
line-height: 32px; /* using this to center text vertically. Could also do so by changing padding/height of menubarbox */
}

div.menuBarBox a:visited {
font-size: 18px;
text-decoration: none;
line-height: 32px; /* using this to center text vertically. Could also do so by changing padding/height of menubarbox */
}

div.menuBarBox a:hover {
background-color: white;
color: black;
font-weight: bold;
}

This is the segment where you can adjust your colors and such.

Next, add the following segment to the bottom half of your html coding. I have mine between the "header-wrapper" segment and the "cross-col wrapper" segment. Unfortunately you have to go change all of the "<"s to "("s (same thing for the opposite direction). You'll save yourself a lot of time if you just copy and paste this segment from my source code here):

(div class='menuBar')
(div class='menuBarBox')(a class='false' href='http://studeo.blogspot.com/' title='Home page')Home(/a)(/div)
(div class='menuBarBox')(a class='false' href='http://studeo.blogspot.com/2005/05/about-us.html' title='Meet the Family')About Us(/a)(/div)
(div class='menuBarBox')(a class='false' href='http://studeo.blogspot.com/2007/07/our-other-sites.html' title='Our other websites and various projects')Projects(/a)(/div)
(div class='menuBarBox')(a class='false' href='http://studeo.blogspot.com/2005/05/oddsnends.html' title='Miscellaneous and Possibly Useful Information')Highlights(/a)(/div)
(div class='menuBarBox')(a class='false' href='http://studeo.blogspot.com/2005/05/book-lists.html' title='Book Lists of All Sorts')Book Lists(/a)(/div)
(div class='menuBarBox')(a class='false' href='http://studeo.blogspot.com/2005/05/links.html' title='Favorite Links')Links(/a)(/div)
(div class='menuBarBox')(a class='false' href='http://studeo.blogspot.com/search/label/photos%2Fdrawings' title='Photos and Drawings')Photos(/a)(/div)

(/div)

Change all the links, labels and titles as desired. Make sure you don't accidentally erase any of the quotation marks when you edit things - that'll make a real mess of things.

***

UPDATED: This is Lissa chiming in to say I was sure I had posted here about adding a top menu bar to Typepad blogs, but it turns out I only mentioned it on Bonny Glen.** Here's the link to the post where I found instructions: Jimmy the Geek's Typepad Hacks. You can only do this with a Pro level account, and you'll have to convert your design to Advanced Templates. (Which turned out to be a very simple thing to do.)

Jimmy uses vertical bars to separate the items in his menu; I changed mine to little leaves (click on Bonny Glen and you'll see what I mean) by replacing the bars with image code:

(img src="http://yourimageurl")

(Replace the parentheses with pointy brackets, and of course you have to upload the image to your Typepad Files (under Control Panel) first, in order to get the URL.)

Just make sure you backup your template before attempting any of this tinkering! I tried mine out on a test blog first.

**UPDATED AGAIN: I knew I'd posted about top menu bars on this blog! I found it buried at the bottom of this post. Aha.

Creating a Border Around Posts and Sidebar Items

I have been asked to explain how I created a thin-lined box around each of my posts and my sidebar items on my personal blog. When I first learned how to do this, it was from copying a template that I had made for me long ago, so hopefully I’ll be able to remember all the steps!

This may work with other Blogger templates, but I have used "Minima" for all of mine, so this is what I know best, and what I'll be using for this explanation.

First, find the place in the HTML for your template that says:


.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}


You then need to add a few lines describing the border, as below. I added a background color which changes the color inside the box I’ve created, and "padding" which keeps the post text a certain distance from the box (like a margin). You can create a boarder with a wider pixel (px) width, but I like the thin look of 1 px.


Here are the changes:

.post {
background: #ffffff;
margin:.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid #000066;
border-bottom:1px solid #000066;
border-width:1px 1px 1px;
}



To do the same on the sidebar, find:

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

And make similar changes as above, adding lines for background color, borders, and padding:

.sidebar ul {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid #000066;
border-bottom:1px solid #000066;
border-width:1px 1px 1px;
border-bottom:1px line #000066;

The numbers represent html color codes, you will choose colors you like, based on the rest of your template look.