Special Blog Post:
The Coding Hack's Corner, Issue #1
Although you'll find little here in the way of intensively technical detailsthis series is more of a 'try this' offeringyou'll have to suffer through a little bit background information from time to time. That's not because it's good for your soul to know esoterica; instead, it's because the background knowledge will help in formulating a better understanding of the coding trick involved and the consequences of using it.
As a general point of reference in writing code for Web pages, the ancient "language" that Web browsers expect to see and translate into Web pages for end users is called "Hyper-text Mark-up Language" (HTML), a specialized version of a broader language called "Standard General Mark-up" (SGML). Mark-up languages for computers are actually modern descendants of the old annotational language of publishers and editors, going clear back to the very early years of printing. During the production of a book, the manuscript would be set to print, and a copy would be printed out, often on one or several long sheets of paper. This so-called "galley proof" would go to an editor, who would go through it not just to make final corrections in spelling, grammar, and perhaps layout, but also to tell the printer where to change words from regular type to bold, italics, or something else. (And yes, this story is somewhat simplified, but the point is accurate.) The editor would make these notations with "marks" on the galley proof where the changes were to be made. For example, a galley proof might have the following run of text:
Now, the editor would like to add some emphasis to this otherwise bland story, so he must indicate to the printer that the word "left" should be italicized to enhance the building plot. He would do so with some mark-up around the target word:
The printer would know what the mark-up meant. In just about the same way, a browser knows what that mark-up means, too, and will render the text as follows:
Simple mark-up for browsers comprises nothing more than a set a open and close tags that browsers know how to render. The most common ones are <b> and </b>; <i> and </i>; <center> and </center>; <u> and </u>; <s> and </s>; and <a> and </a>, with this last tag pair having some extras that can be thrown in the opening one. This is the one upon which we'll focus for the first tip.
Hyperlinks Plain and Hyperlinks with Style: The TITLE Command
Most Web page writers are familiar with the <a> tag as it is used to create "hyperlinks," which are words or phrases that, when an end user clicks on them, cause the browser to go to another Website whose URL ("Web address") is embedded in the tag. For example, a Web page writer might want to offer the following suggestion to readers:
An end-user's browser would interpret that code as follows:
Now, let's sophisticate this code just a little bit. Later, we'll throw it into high gear with a neat trick; but for now, let us add a modest enhancement called a "tool tip," which is a little ingot window of information that appears when the end-user mouses over the hyperlink. It works like this: instead of putting in only the code
put in this:
Your result in the full sentence will look like this:
Mouseover the link, and you'll see the tool-tip appear.
As a couple of quick asides in closing on the tool-tip trick, it's better to use lower-case letters to write the command portion of HTML tags these days; and notice that it's a good idea to have a space and then a forward slash (/) before the closing > character. This is especially true if, at the very top of your template, you see some mystical code lines that have "XHTML" somewhere in them.
Hyperlinks Plain and Hyperlinks with Jumps: The TARGET Command
Now that we have the tool tip in the link, let's talk about not losing visitors to your site, which is going to happen if they click on your links. It would be nice if clicking on a link in your blog opened the link in a new window instead of using the existing browser window. If the existing window does the move, you've lost your visitor, who might or might not hit the BACK button to return.
Two ways exist to do this trick. The first is a case-by-case method; the second makes it the default way that links open. The second way is a little more complicated than the first, but you do it once, and you never have to worry about it again. We'll take the easier route first, though. Recall above that we had created a hyperlink with a tooltip that looked like this:
Look at the following enhancement, which causes the link to open in a new window:
That's all there is to it: put in the target="_blank" string, and when someone clicks on the link, the Webpage will open in a new window. Here's an example of the code in use:
And here's the result the end-user will see. Click on the link, and you'll get a new window opening up:
Mouseover the link, and you'll see the tool-tip appear. Click on the link, and you'll see the linked Website open in a new window. (And close it quickly, for God's sake: the last thing I need is a federal prosecutor seeing that he's getting referrals from this blog and thereby noting my existence.)
Anyway, pretty cool, yes? No more losing your readers when they click on a link you've put in a post.
The only problem with this trick is that you have to remember to do it with every link you write. It's not much to do, but after a while, it can get pretty old, so it would be nice if there were a code that you could put in your template to make this target="_blank" statement the default way every link was handled; then, when you coded your hyperlinks, all you would need to worry about is the URL part and the tool tip part.
Preparing for Disaster
To pull this trick, we need to go to the blog template. That means we're going to mess with something that will ruin the blog if we make a mistake. To avoid catastophe, we're going to make a back-up of the template, and we're going to do it the old-fashioned way.
Open the ancient program Notepad. If you're unfamiliar with how to do this, here's the way: START → ACCESSORIES → NOTEPAD and double-click. A Notepad window will open for you. Minimize it; we'll use it in a minute.
Now, go to the screen that shows your template. Put your mouse cursor anywhere in that screen, and right-click. The menu that appears will have as its last item SELECT ALL. Click on it. The entire template will highlight. Right-click again, and on the menu, click COPY.
Now, maximize that Notepad screen you opened a minute ago. Anywhere in the screen, right-click. On the menu that opens up, click PASTE. Make sure that WORDWRAP (in the FORMAT menu) is OFF (and make sure it's always set to OFF when you're dealing with back-ups).
The entire code of your blog is now in there. Save the file. A good way to name it is to write , for example, INDEX10-27-05.txt or something similar that indicates the date of the back-up. This way, over time, you can make occasional back-ups of your template, and you'll know very easily at what date each one was done. Those of you who are role-playing-game buffs might be familiar with this as a gaming strategy: you save multiple copies as you go along so that, if you get killed, you can try opening up earlier versions to find where you were before you got yourself into the situation that led to your demise.
Once you've made this back-up, if you ever do something catastrophic on the active template for your blog, it's easy to go back to one you've saved. Here's how to make the back-up become the active template, once again. Open the file that has your back-up. It should open in Notepad unless you've reset plain text files to open in some higher word processor. If that's the case, open Notepad and then open the INDEX file from inside Notepad. Once the back-up is on screen, right-click your mouse anywhere in the screen and SELECT ALL. The whole thing should highlight. Now, right-click again and click COPY. Next, go to your template screen where the template you want to replace is showing. In that screen, right-click, then choose SELECT ALL. Now, right-click again and then click PASTE. The contents of your back-up has now replaced your active template.
Now for the Surgery
Open the BASE tag pair right before the statement that calls up the posts. In Blogger, look for this statement:
You put the opening BASE tag, <base target="_blank"> right before this, and you set the BASE back to the default with the <base target="_parent"> right after this. So, when you're finished, you should see this little structure in your template:
instead of just the <$BlogItemBody$> statement.
That's it. Now, any hyperlink you put in a post will open in a new window when a reader clicks on it. You don't need to put that TARGET declaration in the A HREF statements anymore. In fact, sometimes, you'll be given hyperlink code to put in your blog somewhere; and if it's an advertisement, you can almost be sure that the hyperlink code you're given will have the declaration target="_top" in it. If you've put the BASE statements in that frame, just get rid of the advertiser's TARGET declaration. It won't hurt a thing.
And to finish this topic, look through your template for frames. As I noted above parenthetically, they're usually trapped by a <div> and </div> pair. To get links within those frames to open in a new window, put the <base target="_blank"> right after the <div>, and put the <base target="_parent"> right before the </div>. So, after you've done the enhancement, you should see this:
[hyperlinks and other code]
And that is that.
One More Tip for the Night
As I promised, this article would provide something for non-bloggers as well as bloggers. The following trick shows you how to use special characters not on your keyboard in posts and in comments. Special characters are rendered by way of "entity codes," which all browsers read as the same specific characters. Every entity code begins with the & sign and ends with a semi-colon. For example, to create an "em-dash" (a long "hyphenation" sign), you would type the code — where you wanted the em-dash to appear. To create the acutely accented "e" in text, you would type é to create it. The capitalized version is created by typing É. Some entity codes use pound signs followed by numbers; others use a word related to the letter. As a generalif somewhat arcanerule, if there is a number entity code and a word entity code, use the number entity code; however, it doesn't hurt to use the word entity code in most situations. The Web has many resource tables of entity codes. In the sidebar of this blog, I have a link to a special page called HTML for Bloggers, where I provide a few tips. In that article, you'll find a nice little list of the more popular characters that can be created with entity codes.
The End of the Road
This concludes the first installment of "The Code Hack's Corner." Use what I've given you here at your own risk. Remember that your host and author is a hack, an occasional conspiracy theorist, and a blogger drifting all too quickly into the happy place of slightly fuzzy thinking that is the hallmark and reward of old age. That having been said, these tricks should work if implemented properly. If you try them and they really do succeed, by all means put a comment on the thread associated with this post. It will please me to know that something I've suggested actually had some practical use.
The Dark Wraith will provide further advice on coding in future installments of this series.