The Fifth Step
Step Navigation
Day #6

With our new skills, we dropped anchor after anchor all over this blog, and a few other blogs, as well. Our readers now navigate the "Build a Blog" Blog sea with ease, inspect one port after another without losing their direction, drifting from one ridiculous metaphor to the next with only the most brief bouts of sea sickness to show for the wear.

Not all of the Stone Blog members are so lucky. Some of the Stone Bloggers haven't had the time to prettify their own blogs.

Short on time but loaded with sympathy, we decided to pursue a simple but wonderfully useful trick: automatically redirecting traffic with a single line of code.

For example: as mentioned, one of the Stone Bloggers, TPS, fell victim to the tBLOG tides of change, and without the gumption to explore the cutting edge possibilities of the new system, his site has waned and washed away.

Fortunately for TPS, he runs a legitimate blog elsewhere. If he could find some way to redirect his tBLOG regulars to his new blog front while tBLOG tidies up the shiz, well, then, la-dee-da for TPS.

At the Template Chooser, he clicked through to the Add/Edit HTML page. As described in The Third Step: Heading to the Side Bar, he located an accessible, numbered Custom HTML block (probably block #1 or block#2 for everyone at tBLOG) and added this code:

This is a meta tag: a piece of information that describes to the rest of the web what kind of information can be found within your blog. Most sites have several meta tags: they help search engines locate your web pages, they instruct different browsers as to how your pages should be read, and they declare to the world how often your blog content changes. Your blog has meta tags, provided by tBLOG automatically--but there's no reason that you can't add one of your own.

The key section of this particular tag is the content. TPS tells your browser not to wait (0); hurry on to another URL where his real blog can be found. Once he's added this meta tag, every visitor who visits his tBLOG page will be redirected to his active site. Because browsers take time, even when encouraged to hurry, you will catch a glimpse of his tBLOG blog before settling at the real deal. Check out his meta tag in action here. To add the meta tag above to your own blog, just replace TPS's web address with your own, and place the tag in your own Custom HTML section.

But what if your own tBLOG blog works swell? Why bother with a redirect? Well, take a gander at our "Build a Blog" Blog. Beautiful, isn't it? But we thought of an interesting way to use the redirect. As you may know, we are producing our own blog as we proceed through these lessons. Why not set up a redirect at our building site that would bring you back to a specific spot in this very article? We could likely save you one, maybe two mouse clicks, and keep your place in the lesson at the very same time?

In order to create such a sweet set up, we need to review our anchor skills. We also wanted to offer a suggestion as to how you can use the redirect yourself, to create a more dynamic experience for your own readers. Try creating a second tBLOG account, and filling that blog space with photos, movies, podcasts, book lists, or even advertisements to increase your already massive cash stash. You don't need to load that site up with hilarious article posts, because you'll keep those at your real-deal blog. All you have to do is set some nifty anchors on your storage site next to each of your sparkly goodies. Meanwhile, you have already added your meta tag to the storage site, which will gather your reader back into your welcoming bosoms. This is how we did it:

We set an anchor at the end of the sentence you're reading now, so when you click here to check out our "Build a Blog" Blog, the "Build a Blog" Blog meta tag will bring you back after only ten seconds!

Yikes. We hope that worked, yes we do. If it did, then we might as well explain the simple steps.

1. We set an anchor at the end of the previous sentence, with the name "redirect".
2. We added a meta tag at our Blog Building site, with this code:

Huh. That's it. That's all we did. The only differences between this tag and TPS's tag are that it here, we give you ten seconds to look around (compared to the "0" that the miserly TPS offers), and, of course, we redirect you back to our own site, instead of flopping you at TPS's own blog.

*HOME*

--Stone Blogs
--Copyright ©2006 Stone Blogs. All rights reserved.

The Fourth Step
Step Navigation
Day #4
(No need to click here . . . yet.)

With our Building the "Build a Blog" Blog side bar fixed up rather nicely, we wanted to add more ways--easier ways--for our readers to move around inside our blog.  Web developers who own web sites spanning many different web pages do not need to contend with ultra long content pages; but rent-a-page bloggers are usually offered but a single page to post their articles.  By the time a blogger posts a handful of articles, the casual reader will have to scroll down for ages before locating an article that interests them enough to stick around.

Even if your blog is beautiful and sparkly, what are the odds that someone will sift through all your articles?  It's a long shot at best, we think--especially against a random web surfer (the rare individual who does a google and clicks onward to your door step) having the patience to give you the time of day.

So let's make it easier for that guy to find something interesting.

We're talking about setting anchors everywhere throughout your blog.  What's an anchor?  An anchor is simply a target for a link.  An anchor is an address, or, rather, the address of a specific apartment number within a mega-complex.  Your single blog page will be your mega-complex, and your anchors will be the rooms.

The first step is deciding where the most important places live on your blog.  For Stone Soup Blog Forum, the most essential location on our page is the navigation system, which, thanks to our side bar work, is ready for action.

We wanted our readers to have easy and frequent access to our lesson list.  If someone stumbles into our blog by clicking on an article, and the article happens to be Step 32 rather than Step 1, we need that reader to click to that first step, or even to our mission statement, before they despair and flutter away, lost and lorn.

Therefore, we dropped an anchor at the beginning of every step we post, and another anchor at the side bar heading, Chronicles.  Go ahead, we dare you: give it a click.

Setting an anchor at the top of an article is an easy, one-step process.  When you are writing an article in Advanced View, fill in your title and then move on to the body.  In the second toolbar row, about two thirds of the way toward the right side, you should see a pretty little anchor icon.  When asked for an anchor title, give them one.

Our example will be step4, the title of our anchor at the top of this very article (note: the link "here" at the top is not the anchor, but rather a link back to a specific point in the content).   

Okay, you're done.  Not too bad, right?  Just remember your anchor name, and where you put that particular anchor.  Now, suppose your article becomes ridiculously long (the article you're reading right now might be an appropriate example), or suppose you are writing an altogether different article that refers to the first article.  If you don't want to force your reader to wipe the dust off your archives, you simply add a link to the anchor.

When you click the cool smiley, you are really clicking a link to our step4 anchor (at the top, click the here link to return).  We inserted a smiley here, as you can see, but you can use words, photos, or whatever weird crap you think up for yourself.  We highlighted the smiley, and clicked the link icon on the toolbar, located two spaces to the left of the anchor icon.  This is the link address we provided:

Actually, we really only needed to provide #step4 for the link address, because "#" tells your browser to take you to the requested anchor located on your current page.  However, when tBLOG archives one of your articles, or moves you to the commenting page, you are no longer located at the blog home page.  To counter, we ask the link to direct us to a specific page, and then to the specific anchor located on that page.

That's it.  Anchor dropped, link set.  As you most likely noticed, most of the links we included in this article are links to anchors on our own page.

If you want to be as clever as we are, if you want to stick an anchor in your own navigation bar just like we did, you should now be able to do it yourself (if you understood Step 3: Heading to the Side Bar).

However, if you have any trouble (remember, each template behaves differently), do not hesitate to ask us for a blathering, futile solution to your problem.

--Stone Blogs 

The Third Step
Step Navigation
Day #3

After creating, ruining, and eventually fixing our own proud “Building the ‘Build a Blog’ Blog” header, we decided to head for the side bar. The intuitive tBLOG side bar, without requesting any information from us, guessed that:

1. We might have a personality worth a description;

2. We had enough stamina to maintain a blog for a duration requiring Archives; and

3. We might have enough friends to warrant Links.

We have no personality we care to recognize. We have no stamina. In regard to having linkable friends, that, too, we are sorely lacking. So we thought we would give the bar the sound beat-down it deserved.

At the moment, though, tBLOG provides no easy way to affect any text within the side bar. The headers (such as About Me, Archives, and Links) are untouchables, and the local administration suggested that we wait the few days they required to make the necessary additions to the tBLOG upgrade.

Patience is one of many virtues we do not have at Stone Blogs (except for TPS, and all rational beings call his brand of patience by a different name: laziness), so we attempted to find a way around the patience requirement.

As mentioned, there aren’t any obvious input forms within the “Sports” Template setting categories–the provided forms allow only style changes, no manipulation of header text or link content. The next place to look was the “Custom HTML” section on the Template Chooser. At the Custom HTML page, tBLOG asked in a quite gentlemanly manner whether we were interested in viewing the blog page “blocks” where our inserted code might appear. We accepted the gracious offer, and were thus treated to an exact image of our own blog, but with the addition of little red circles filled with numbers added to specific locations within our blog template.

The numbers correspond to a unique HTML entry form on the Custom HTML page, from one up through five. Apparently, the "Sports" Template only allows access to two HTML blocks--and wouldn't you know it, they were both in the side bar. Eureka.

Except for one problem: we didn't know any HTML code.

Let's go through a few steps for our rookie developer brethren:

1. Launch your blog;

2. On your browser's navigation tool bar, go to "View" and click "Source" or "View Source;"

3. The hieroglyphics you now see form the page code for your nice and tidy blog, though there are many hidden bits of information, some of which can be uncovered, some of which, like tax code, will remain hidden until time eternal.

This is the tricky bit, and takes some trial and error. Also, we suspect, different templates will respond differently to the solution we found:

4. Within the page code, search out the location that describes your side bar.

Here are a few hints: we were looking for the header titles "About Me" and "Archives" and "Links" and so, when we located these words anywhere in the HTML code, we gave them a close inspection. We also found this:

After copying, pasting, and mutilating the code we found several times, we remained at a loss as to how removing the side bar headers might be accomplished. However, we were able to manipulate the rest of the side bar text.

This is how we did it:

We couldn't eliminate any code, so we added some of our own to the appropriate custom HTML section (as explained earlier in this post):

The numbers here are just to identify each line, and have no place in the blog code.

Also, our more observant readers may wonder about the "#" we included in our address. Briefly, "#" indicates an "anchor" we have previously placed within our blog page. An anchor is like a paper bookmark within our blog, to make it easier for our readers to locate fixed points of interest.

Here, for example, #introduction takes the reader to our mission statement. Because we had no idea how to fix our mission statement to an easily accessible location at the top of our blog, we decided to write an article. The article itself was the mission statement. The article moves farther and farther down the blog page as we add more articles, but when we originally wrote that article, we included an anchor with the name "introduction." Therefore, whenever we want the reader to find the mission statement, we add "#introduction" to the end of a link address.

We'll talk about anchors in depth, next time.

The bestest and brightest of you might understand why the side bar works so well here, at our Stone Blogs Chronicles blog, while at the same time, after installing it at the real-deal Blog Forum, the Blog Forum side bar had some problems.

--Stone Blogs

The Second Step
Step Navigation
Day #2

Mission statement: Check. Template Analysis: Kinda. Site progress: Zero.

To make ourselves feel productive, we decided to test the flexibility of the brand new header we received by selecting the "Sports" Template. Here's what the sexy beast originally looks like:

The "Sports" Template Header

Not too shabby . . . if we wanted to build a wind-surfing blog, which we don't, or if we wanted our header to look exactly like the header of every tBLOGer with the same template taste as ours.

Fortunately, after some hunting and pecking, we located the appropriate template tweak (which, with regard to the "Sports" Template, is called the "Bar Head").

Unfortunately, however, we stacked face-first into a new problem: tiling headers.

Several attempts at uploading and installing images to replace the surfer header resulted like this:

Tiling Header, Anyone?

After a bit of snooping, someone told us that the slacker method we used to rely on was called "image stretching"--which, we learned, was rookie stuff. Stretching results in poor image quality, and, apparently, in mixed browser results (clearly a subject for another lesson).

No short cuts while building the "Building a Blog" Blog, eh? Well, actually . . . .

Stone Blogs uses the Firefox Browser, a browser we are rapidly learning to appreciate (any bits of advice, questions, or suggestions related to Firefox will always be appreciated here). We had no problem opening the original "Sports" header in a separate window, and exploring all the details.

The most relevant details were the dimensions. This header is 708 pixels x 200 pixels, and in order to avoid tiling, we messed with a bunch of images in Paint--always making sure to maintain the dimensions of the original. Again, when reviewing the templates, we made certain that the template we chose would enable us to change the header; the "Fire" Template, for example, does not allow for a header change.

Using paint, we actually manipulated the given blog header until we arrived at what we currently consider to be an almost tolerable representative of the Building the "Building a Blog" Blog:

Blog Header Results

We uploaded it here, to the Stone Blog Chronicles, as you can see, just to make sure we knew what we were talking about. Then came the big moment: we uploaded the new Blog Forum Header to the real-deal Building the "Build a Blog" Blog and here's the snap shot of our baby in progress:

--Stone Blogs
--Copyright ©2006, Stone Blogs. All rights reserved.

The First Step
Step Navigation
Day #1

After declaring our Mission Statement as the blog introduction, our "Building a Blog" Blog Project begins by inspecting tBLOG's new template options:

Default

Sports

Blue

Pink

Fire

Retro

Yellow

Balm.

Of the eight, we agree that the most attractive template is Fire. Unfortunately, none of us are able to figure out a way of removing the atrocious header and adding one of our own.

The color templates are basic, as is the default template. As we play with the various options, we discover that each offers various, unique ways to tweak the different elements. Many such functions are beyond our greenhorn skills. "Code" is apparently something we can change in the "Sports" template, but blimey if we can figure out what it does. Other listed options, such as "Pre" and "Antonym" seemed almost comprehensible, but "Pre" requires access to the HTML that 1) we don't have, and 2) we don't understand anyway; meanwhile "Antonym" may never be useful unless we decide to take the GRE's.

In the end, we decide on the "Sports" template. We install it here at "Building a Blog" Blog Chronicles and fix it to the real-deal Blog Forum, which without any help from us, still looks like this:

Pretty sweet, huh?

No.

--Stone Blogs

The Beginning: "Building a Blog" Blog Mission Statement
Step Navigation

Inspired by the renovations here at TBlog, we decided to pool our somewhat dubious blog skills, and build our very own "Building a Blog" Blog Project.

True: we're amateurs, most of us, yes we are, and our blog-building skills are only worth a donkey squat when we don't have a friendly giant like TBlog to build us some nice, easy-to-use templates with lots of smiley icons.

What happens, though, when the beanstalk falls down with the giant, leaving us--the helpless, squirming baby blog vermin--in its wake? One option is to cry. Another option is to pound our fists on the top of of our skulls. And a third option yet is to sort through the pieces, to tirelessly try to use another master's blog building blocks until they almost make sense.

Curiously, one of our geekier, more pathetic collaborators attempted all three options, and arrived at this result: TPS. Nothing but refuse and rubble. And yet, the joke grows even more pointed with wit and irony when you consider the relative beauty of his blog model. The poor bloke is left with only the empty husk of his laughable soul.

Thus, like the phoenix rising from the ashes of his own previous life, "Building a Blog" Blog Project was born. Consider our mighty purpose: to understand the philosophy of blogging, to study the storied successes of the pinnacles of blogerdom, to build a blog template that appeals to society, to feed that template blog-worthy articles, and then, at last, to learn the html code, the cascading style sheets, yea, even the holy grail of rookie web skills, JavaScript itself.

Our "Building a Blog" Blog Project chronicles can be found here, at Stone Soup Blog Forum, and while we bungle our way through the trials and the errors of learning to blog, our half-formed, developing baby blog may be observed at the "Building a Blog" Blog itself.

Yes, we hope you will join as we proceed through the stages of our infancy. But we would prefer, rather, that you offer us your gleanings, your own building brainstorms. We need help. Our minions will sieve through your comments and messages, and should we select your advice as a worthy topic, we will gift you with a Post of Honor (which includes any and all credit you deem necessary, all photo and/or site linkage you might desire--within reason, TPS).

--Stone Blogs

Copyright ©2006, Stone Blogs. All rights reserved.